Closed Bug 1697559 Opened 2 years ago Closed 2 years ago

Not enough contrast between active and background tabs


(Firefox :: Theme, defect, P1)




Tracking Status
firefox-esr78 --- unaffected
firefox86 --- unaffected
firefox87 --- unaffected
firefox88 --- disabled


(Reporter: yoasif, Unassigned)


(Blocks 1 open bug, Regression)


(Keywords: nightly-community, regression, Whiteboard: [proton-tabs-bar])


(7 files)

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

Attached image chromium

Attaching some screenshots of other browsers with better contrast.

Attached image safari
Attached image edge
Regressed by: 1694526
Has Regression Range: --- → yes

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.

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

Attached image 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.

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.

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

Priority: -- → P1
See Also: → 1686529
Whiteboard: [proton-tabs-bar]

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.

Flags: needinfo?(asa)

I just set up a pen on Codepen, trying the values given by emanuela:

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.

The patch that is in updates the colors and adds a line around the selected tab for light mode. The patch that is in 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 as there is no planned work here.

Closed: 2 years ago
Resolution: --- → DUPLICATE
Flags: needinfo?(asa)
See Also: → 1721098
See Also: 1721098
You need to log in before you can comment on or make changes to this bug.