1963601 - Red and pink tab group colors have become harder to distinguish in dark mode

Status: NEW

(Toolkit :: Themes, defect, P3)

Description

[Kestrel]

Attachment: Comparison of open tab groups using red and pink colors in dark mode (top latest)

STR:

1. Enable the Dark theme.
2. Create tab groups with red and pink colors.
3. Make sure the tab groups are open.

Expected:
Red and pink tab groups can be easily distinguished by color when they are open in dark mode like before.

Actual:
Red and pink tab groups have become pale and similar in appearance when they are open in dark mode.

Colors did not change for closed tab groups or in Light mode.

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=811aae6f374285f0210d0a822f8e2f998f4f6b6d&tochange=a2850c111df28ac941cb19e670467aed332a6551

Regressed by Bug 1861526.

Comment 1

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

:jules, since you are the author of the regressor, bug 1861526, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 2

[Jules Simplicio [:jules]]

Hello there - when we introduced a color palette we opted for a paler scale in dark mode for tab groups in order to provide better contrast with text and various themes. I can see how pink and red get close in shade when lighter, which is a color spectrum problem that's hard to solve for. We can consider bringing the tab groups dark mode colors to a slightly darker pale like before.

I'd probably not mark this as a regression since colors tend to be particular to each individual but this is a totally fair point. Thanks for filing this, we'll look into it. Setting it to S3 and can bump it up if other reports show up.

Comment 3

[Kestrel]

(In reply to Jules Simplicio [:jules] from comment #2)

I'd probably not mark this as a regression since colors tend to be particular to each individual

There's nothing subjective here, these two colors (red #ffa0aa and pink #ff9fc3) have a WCAG contrast ratio of 1.01 which is close to a rounding error.

Contrast ratios of similar tab group colors (dark mode):

color1	color2	contrast
pink	red	1.01
purple	pink	1.07
purple	red	1.08
pink	orange	1.10
red	orange	1.12
blue	cyan	1.12
yellow	orange	1.13

Comment 4

[Kestrel]

Attachment: Red and pink WCAG contrast ratio

Comment 5

[Jules Simplicio [:jules]]

(In reply to Kestrel from comment #3)

There's nothing subjective here, these two colors (red #ffa0aa and pink #ff9fc3) have a WCAG contrast ratio of 1.01 which is close to a rounding error.

Pink and red get close to each other when shades go lighter as I said above. For example, if we were to stick to WCAG in particular, and measure the contrast of the previous pink and red tab group shades before this change from your uploaded screenshot itself, we get a 1:1 ratio.

Comment 6

[Kestrel]

Yes, WCAG color contrast was already extremely low with these two colors before this change and now the paler versions are worse (I get a value of 1.01 with both but there is no resolution left at this end of the scale). Color blindness is taken into consideration which is why the values might be lower than what you expect and more reason to pick colors with higher contrast ratios.

Comment 7

[Kestrel]

Attachment: Old red and pink WCAG contrast ratio before becoming paler

Comment 8

[Jules Simplicio [:jules]]

Okay, so as you said according to WCAG this didn't get worse. I also said above that everyone's eyes are different, so yes we do take color blindness into consideration. I also said we would look into this but that I did not consider it a regression, and I still don't.

At the moment, we can't control the group of colors since this is tied to an API, so unfortunately pink and red will continue to exist as options, but luckily there are other colors to pick from. I believe the tab groups team is looking into how to provide more options in the future as well since the collection unfortunately isn't too big.

Comment 9

[Sören Hentzschel]

Perhaps the contrast ratio is not the best way to look at the problem. It is usually used to evaluate the ratio of background to foreground. And in my opinion, this is a very different thing in perception than when you look at two background colors next to each other.

I also have to say that although the contrast ratio hasn't got any worse, in my personal perception, based on the first screenshot, there is a clear regression because I was actually able to distinguish between these two colors quite easily before and now it's really difficult for me.

Comment 10

[Jules Simplicio [:jules]]

Perhaps the contrast ratio is not the best way to look at the problem. It is usually used to evaluate the ratio of background to foreground. And in my opinion, this is a very different thing in perception than when you look at two background colors next to each other.

Totally fair, but Kestrel's measure of them against one another does help highlight how close red is to pink. Even though that WCAG ratio is really intended for background and foreground measures.

I do feel it's a two part problem: 1. Contrast with the background 2. Contrast with one another. Because ideally for this sort of UX, the collection of colors are distinct enough from one another, but also have good contrast on top of our Tab Strip, and also good as the background for the tab group's name text.

Thanks again for filing this, and thanks for sharing your perceptions, Kestrel and Sören. Besides looking into this with theme reviewers to find a solution, I'll also bring it up to Tab Groups team as well to see where they are at in terms of prioritizing more user choice behind the colors.