+++ This bug was initially created as a clone of Bug #1713990 +++

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Updated to 89.0

Actual results:

New design made it difficult to distinguish active tab.

Proton offers two options to do this:

1. Background color of active tab is different than inactive
2. Active tab has border and shadow, inactive doesnt

Both fail and dont help.

1. Background color based option dont help as there is a small contrast ratio between tab background colors.
   Contrast ratio between active/inactive tabs background colors is 1.14:1 for light mode, and 1.70:1 for dark mode, while WCAG requirement for active user interface components is 3:1 (AA).

Personal expetience: I got perfect sight, and it is difficult for me to distinguish active tab using background color.

2. Border and shadow based option dont has help as inactive tab has same background color as address bar.
   It confuses: it looks like inactive tab and active page are joined (just like active tab and active window was joined before Proton), so we percept inactive tab as active.

As far as tab is not connected to the opened page (in proton you made tabs look like buttons) it is not intuitive, confusing behavior.

Personal experience: I use computers from the childhood, this interface decision confusing me.

3. Multi Account Containers:

Container tabs make it even more confusing: if inactive tab is opened in , as for example, yellow container, we percept it as hightlighting of active tab (instead of highlighting container tab).

Examples:

Example 1 (dark mode, has container tabs): https://disk.yandex.ru/i/5aufarK7TmQ-DA
Example 2 (light mode, has container tabs): https://disk.yandex.ru/i/6S92VFBlcR2jWQ

Looking on these screenshots i percieve "Bugzilla Main Page" as active tab, because it has same background as neighbour, but has the most bright (contrasting) color (orange). Really active tab (youtube) precieved like background/inactive/pinned. Summary: active tab looks like inactive, inactive tab looks like active. Interface goal is not reached: totally confusing design.

Expected results:

It's easy to distinguish active tab. Current active tab is obvious.

The Bugbug bot thinks this bug should belong to the 'Firefox::Theme' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.