tracking protection icons do not meet contrast guidelines
Categories
(Firefox :: Protections UI, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox71 | --- | affected |
People
(Reporter: asa, Unassigned)
Details
(Keywords: access, Whiteboard: [privacy-panel][skyline])
The tracking protection shield icon has three color states:
- Off (gray)
- On. No trackers found. (gray)
- On. Trackers found and blocked. (purple)
The first two states do not meet WCAG color contrast guidelines for accessible text. Ahh, but this is not text you say. Correct. It is an informational image, though, and informational images should meet contrast requirements because they convey important details to the user.
Because the stroke weight of the icon is larger than typical text, I think the right thing to do here is to meet the contrast guidance for large text which is 3:1.
From what I can tell, the gray color, which has an effective contrast of 2.12:1, is created by a fill-opacity of 0.3 set on #tracking-protection-icon-container. To meet 3:1 contrast requirements, that fill-opacity needs to be at least 0.42.
|
Reporter | |
Comment 1•5 years ago
|
||
Since reporting this, I've learned that there's clear guidance in WCAG 2.1 for non-text contrast, and 3:1 is the baseline.
https://www.w3.org/TR/WCAG21/#non-text-contrast
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
|
||
Comment 2•5 years ago
|
||
This is going to be resolved in bug 1567440
Description
•