1688241 - Active tab has a contrast too low with Proton dark theme

Status: RESOLVED DUPLICATE of bug 1686529

(Firefox :: Theme, enhancement, P1)

Description

[Danny Colin [:sdk]]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

1. set browser.proton.enabled and browser.proton.tabs.enabled to true
2. Open a few tabs

Actual results:

The active tab is really hard to distinguish because the background-color has a low contrast ratio vs. the inactive tabs. It also lack the blue line indicator that was present in the previous design.

This is even more problematic on laptops where people tends to lower their screen brightness to save power or also if you're in a bright environment that provoke light reflection in the screen

Expected results:

The tab could have:

1. a brighter background color but still enough dark to fit in a dark theme
2. a colored line like the old design

Comment 1

[Tim Nguyen :ntim]

dark alpenglow theme has the same issue fwiw

Comment 2

[MrOtherGuy]

And light theme in particular. See Image

The dark theme is usable, although it's not as good as before usability-wise without the tab line. But on light theme there's just not enough contrast between the selected tab and tabs toolbar background. It is practically impossible to see selected tab if you are scrolling overflowing tabs.

Comment 3

[MrOtherGuy]

Attachment: light-vs-dark.png

Comment 4

[Danny Colin [:sdk]]

(In reply to jastekken from comment #2)
And light theme in particular. See Image

The dark theme is usable, although it's not as good as before usability-wise without the tab line. But on light theme there's just not enough contrast between the selected tab and tabs toolbar background. It is practically impossible to see selected tab if you are scrolling overflowing tabs.

The issue isn't visible from a screeshot since it doesn't take into consideration the screen brightness or the environment in which you are.

Comment 6

[Romain Testard [:RT]]

FYI the dark theme details will be changed with Proton so please hold here until UX can provide final details for the theme.

Comment 8

[Romain Testard [:RT]]

Marking as P1. Per experience review we agreed to mark as P1 bug the ones that will block MR1.

Comment 9

[Mathew Hodson]

Bug 1697559 is similar but for the light theme.

Comment 10

[masstmp+0cq2v]

Attachment: oldvsnewtabtray.jpeg

Picture taken of my LCD screen, which is ~10 years old and set to medium contrast, showing weaknesses of Proton compared to current layout. Notice how proton contrast is really hard to see. Suggestion: bring back colored accent.

Comment 11

[Danny Colin [:sdk]]

(In reply to masstmp+0cq2v from comment #10)

Created attachment 9211352 [details]
oldvsnewtabtray.jpeg

Picture taken of my LCD screen, which is ~10 years old and set to medium contrast, showing weaknesses of Proton compared to current layout. Notice how proton contrast is really hard to see. Suggestion: bring back colored accent.

Thanks for the screenshot. I didn't had a good enough camera to take one myself but this is exactly the issue I'm experiencing on a more recent screen (~2015).

Comment 12

[masstmp+0cq2v]

(In reply to masstmp+0cq2v from comment #10)

Created attachment 9211352 [details]
oldvsnewtabtray.jpeg

Picture taken of my LCD screen, which is ~10 years old and set to medium contrast, showing weaknesses of Proton compared to current layout. Notice how proton contrast is really hard to see. Suggestion: bring back colored accent.

To add, I should clarify that a real-world viewing angle was used for this picture, ~40cm from the monitor. Yes, some monitors have more forgiving viewing angles than others, of course; still, Firefox usability should not be compromised through such ubiquitous cases, obviously.

Comment 13

[Jared Wein [:jaws] (please needinfo? me)]

Amy, the contrast ratio is 1.7 on latest Nightly in Proton Dark when comparing the selected tab against the tabs bar background. See https://webaim.org/resources/contrastchecker/?fcolor=42414D&bcolor=1C1B22

Aside from the viewing angle and quality of screens, it seems we should maybe make a change here? Can you look in to this?

Comment 14

[Jared Wein [:jaws] (please needinfo? me)]

The patch that is in https://bugzilla.mozilla.org/show_bug.cgi?id=1686529 updates the colors and adds a line around the selected tab for light mode. The patch that is in https://bugzilla.mozilla.org/show_bug.cgi?id=1697448 uses colors from the theme on dark themes (Proton Dark excluded) to draw a line around the selected tab. Otherwise, there are no changes planned for Proton Dark. The colors were checked and deemed sufficient contrast for Proton Dark.

I'm going to close this bug as a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1686529 as there is no planned work here.