1575347 - Replace #d74345 with an accessible CSS variable

Status: REOPENED

(UX Systems :: Component, defect, P3)

Description

[Itiel]

Attachment: Screenshot

See attached.
The same applies the "You are not securely connected to this site" string.

https://searchfox.org/mozilla-central/rev/03853a6e87c4a9405fce1de49e5d03b9e7a7a274/browser/themes/shared/controlcenter/panel.inc.css#325

Comment 1

[Meena Murthy]

Please assign this bug to me

Thanks

Comment 2

[Meena Murthy]

Attachment: Bug 1575347 - Gave a more contrasting color to Connection not secure string.

Depends on D68015

Comment 5

[Tim Nguyen :ntim]

https://searchfox.org/mozilla-central/search?q=color%3A+%23d74345%3B&case=false&regexp=false&path=

It should be a CSS variable with accessible colors for each theme. For #d74345, the dark theme contrast is 2.00 and the light theme contrast is 4.39 (checked using the a11y inspector), while the WCAG standards asks for at least 4.5 for normal text, 3 for large text.

The pocket usages should be excluded from this change though, since the pocket panel is always light.

Comment 6

[Meena Murthy]

I first introduced different values of red and tested, but felt it was too dull
The background color of the panel is slate color which is dull, so I went for a brighter color(for dull-bright contrast)

Also if one looks at "Connection is secure" string, they would find the test yellowish green or greenish yellow which is bright too. Please check the brightness of this string.

The slate grey seemed to dull the red, I don't remember the different values I used, one of them was " #ff4500".

I did look at WCAG specifications for the contrast, but a layperson would be looking at these and the text has to stand out, this is why the brightening by changing to #ff9900

Comment 7

[Eric Pang [:epang] UX]

I'm going to bring this up with the UX Systems team. I also noticed that the green (secure connection) also does not pass contrast ratio. This feels like something that needs to be fixed on all of dark theme consistently. Adding NI on myself to get back to this bug when I have more info!