2088843 - Container names and icons have too little contrast with Nova

Status: NEW

(Firefox :: Containers, defect)

Description

[Dão Gottwald [:dao]]

With bug 2074327, Nova paints the container name, the container icon and the outline of a multiselected container tab with --identity-stroke-color, and drops the tinted background behind the name. Most of its light-mode values are the 40 shades (30 for yellow), where the name and icons used the 60 shades before.

Container name in the address bar (#userContext-label), before and after the patch. Text needs 4.5:1, and the icon, which uses the same color, needs 3:1:

color	light before	light after	dark before	dark after
yellow	5.45	1.91	7.88	8.34
cyan	5.37	2.78	7.83	5.75
orange	5.63	2.91	7.36	5.49
gray	7.81	2.93	7.99	13.04
red	6.03	3.24	7.26	4.93
purple	6.18	3.28	7.24	4.88
pink	6.14	3.31	7.20	4.83
green	5.20	4.24	7.93	5.93
blue	5.94	4.94	7.63	5.05
violet	6.08	5.12	7.31	3.12

In light mode the name fails 4.5:1 for every color except blue and violet, and the icon fails 3:1 for yellow, cyan, orange and gray. In dark mode violet fails 4.5:1. The tab hover preview shows the container name in the same color.

The outline of a multiselected container tab (--focus-outline-color before, 5.38:1) falls below 3:1 for yellow (2.01) and cyan (2.92) in light mode.

Measured headless on Linux with the default theme and browser.theme.native-theme=false, at 1x. The Nova toolbar is translucent over a gradient, so each value is the median ratio over the pixels behind the element, scored with devtools' calculateContrastRatio.

Comment 1

[Dão Gottwald [:dao]]

On Linux's default native theme (browser.theme.native-theme=true) the address bar background is darker, so the container name fails in both color schemes:

color	light	dark
yellow	1.61	6.60
cyan	2.34	4.55
orange	2.45	4.35
gray	2.47	10.32
red	2.73	3.90
purple	2.76	3.86
pink	2.79	3.82
green	3.57	4.69
blue	4.16	4.00
violet	4.31	2.47

In light mode the name fails 4.5:1 for every color and the icon fails 3:1 for all but green, blue and violet. In dark mode the name fails for blue, orange, red, pink, purple and violet, and the icon fails for violet.

Measured headless on Linux at 1x with the patch from bug 2074327, against the address bar background (rgb(230, 230, 230) light, rgb(48, 47, 52) dark).