1513362 - dark theme: background tab text contrast ratio should not be better than active tab

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P5)

Description

[Will]

Attachment: ffdtat.png

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

Steps to reproduce:

The text contrast ratio of the active tab should be better/higher than the background tabs, this is so the active tab is emphasized and the background tabs are de-emphasized. But in dark theme, Firefox is the reverse! Edge's dark them, for example, does this properly. Please see attached screenshots

Comment 1

[Will]

Attachment: edgedark.png

Comment 2

[Danny Colin [:sdk]]

> this is so the active tab is emphasized and the background tabs are de-emphasized.

The actual colors already create an emphasizing effect and there's even a blue line at the top of the tab. An other concern with reversing the colors would be that the dark theme wouldn't follow the Photon Design System (https://design.firefox.com/photon/visuals/color.html) anymore. I mean I think we should keep the same logic (consistency) between the light and dark theme. 

A solution to that problem could be to use the Firefox Colors Extension (https://testpilot.firefox.com/experiments/color) to set your own colors. I know it still is in Test Pilot but the more it is use the more chance it have to become an official thing and we definitely need the help of other awesome Firefox users like you to push to have more customization options :).

Hope this extension will help you.

Here's some useful links regarding the extension :

- https://testpilot.firefox.com/experiments/color (official page)
- https://github.com/mozilla/FirefoxColor/issues (bug report)

Comment 3

[Will]

The light theme doesn't have this problem, the dark theme should change to be consistent with light theme. With the light theme, background tabs are darker than the active tab, so the text contrast ratio is lower than the active tabs, this is good and that's the way it should be with dark theme too. With dark theme, the fact that background tab titles are easier to see/read than the active tabs title, that's just not right, it doesn't make sense.

Here's an easy fix if you don't want to change the color of the background tabs: just darken the text for background tabs! That way the text contrast ratio will be lower than the active tabs

Comment 4

[Danny Colin [:sdk]]

> The light theme doesn't have this problem, the dark theme should change
> to be consistent with light theme.

The dark theme is consistent with the light one because the design system 
is based on inverting the colors. I mean I'm not part of the UX team but 
that's what I understand after looking at the Photon Design System website. 

I invite you to join the #ux channel on irc.mozilla.org if you want to 
know more about the Design System. They're very welcoming. Here's the Wiki
page if you need help to join IRC https://wiki.mozilla.org/IRC.

Regarding the color choice, I'll also add that if we change the background
color of the active tabs it'll remove the actual effect of looking like it
is linked to the Navbar. The darker color of the inactive tabs give the 
impression of being under (deeper) in relation to the Navbar.

> Here's an easy fix if you don't want to change the color of the background
> tabs: just darken the text for background tabs!

I wouldn't say it is easy but it'd be probably, indeed, a better option. Still
the UX team will need to decide if they only change the color for the tabs or
for any text on a dark background and that imply changing the actual rules in
the Design System. That's the not so easy part depending on the decision because
it could involve a lot of change elsewhere in the code.

Again, I invite you to join the #ux channel because you'll probably have an
answer sooner since this issue has been assigned with a P5 priority. :)

Comment 5

[:Gijs (he/him)]

This was fixed in Firefox 89 with the proton redesign!