1697559 - Not enough contrast between active and background tabs

Status: RESOLVED DUPLICATE of bug 1686529

(Firefox :: Theme, defect, P1)

Description

[Asif Youssuff]

Attachment: Screen Shot 2021-03-10 at 1.15.52 PM.png

Steps to reproduce:

1. Set browser.proton.enabled to true
2. Restart Firefox
3. Open some new tabs

What happens:

Observe that the background color on inactive tabs is very similar to the colors for the active tab.

Expected result:

It should be more obvious what the active tab is, like in other browsers (and release Firefox).

Comment 1

[Asif Youssuff]

Attachment: chromium

Attaching some screenshots of other browsers with better contrast.

Comment 2

[Asif Youssuff]

Attachment: safari

Comment 3

[Asif Youssuff]

Attachment: edge

Comment 4

[Sören Hentzschel]

Attachment: Firefox with all Proton options enabled

This is how it looks in Firefox Nightly with all Proton options enabled. It's hard to distinguish the active tab from the other tabs (note that it's much worse in reality than looking at a screenshot that only shows this and nothing else) and therefore it's a serious accessibility regression.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1694526

Comment 6

[Sören Hentzschel]

Attachment: screenshot

With today's Nightly it's even worse - the shadow was reduced… This is a serious a11y regression and makes Firefox unusable for a subset of the users. This is not a exaggeration - it's difficult to use a browser if you can't see the active tab or only with effort.

Comment 8

[Asa Dotzler [:asa]]

Attachment: Firefox, Chrome, and Edge tabs contrast ratios

None of the modern browsers meet WCAG guidance for selected tab contrast but Firefox is by far the worst. Attached is an image of the Firefox, Chrome, and Edge tab strips. The contrast ratio between the selected tab and the tab bar/unselected tabs is listed to the right. In parenthesis is the contrast ratio if you include the shadow (Chrome does not have a shadow.)

This is not just an issue for low vision users. The Firefox contrast ratio is low enough that even people with sharp vision are going to have difficult distinguishing the selected tab. This will be exacerbated in poor lighting scenarios or with sub-optimal viewing angles on some screens.

Comment 9

[Romain Testard [:RT]]

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

Comment 10

[emanuela [ux]]

The new spec that pass a11y review is the following:
box-shadow: 0px 0px 1px rgba(128, 128, 142, 0.9), 0px 0px 4px rgba(128, 128, 142, 0.5);

Please be sure that the color for the selected tab is white (#fff) and the background color for the tab strip is #F0F0F4.

From @asa:

What we're trying to ensure here is that the selected tab, which has a white background, is distinguishable from the toolbar background. The border/shadow enhances the contrast between the selected white tab and the light gray toolbar background by darkening the toolbar background immediately surrounding the selected tab. The critical contrast ratio is between the selected tab, which is pure white, and the toolbar color which is now #B4B4BD at its darkest point. That gives us a contrast ratio of about 2:1 which is significantly better than the other browsers provide. But there's a "but" which is that our dark border/shadow is quite thin where it's the darkest -- one pixel, and that one darkest surrounding pixel may not be perceivable by some with worse vision. That means we should really be looking at the sort of average of several pixels worth of border/shadow/background to get a better sense of the contrast users with less acute vision will experience. When I take the average of several pixels that surround the selected tab, I get something like #BCBCC5 which gives the selected button a contrast ratio of about 1.9:1 against the toolbar. That's still better than the other browsers and definitely an improvement on the prior design. I think that's good.

Dark theme spec will arrive later today or tomorrow EU time.

Comment 11

[torbjørn]

I just set up a pen on Codepen, trying the values given by emanuela:
https://codepen.io/Torbjoern/pen/eYgNWGQ

When I take the colour value of the darkest line around the tab, which is one pixel wide, I get #CBCBD2 (as reported by Digital Color Meter). Calculating the contrast ratio with the tab strip (#F0F0F4) results in 1.42:1, which is still better than other browsers but wouldn't pass as WCAG AA.

Comment 12

[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.