Make the shared error icon fill colour satisfy WCAG contrast guidelines in dark theme
Categories
(DevTools :: General, defect, P2)
Tracking
(Not tracked)
People
(Reporter: yzen, Unassigned)
Details
Right now we are using --red-40 to fill the error icon across all panels/highlighters, however this does not pass AA WCAG rule for contrast.
|
||
Comment 1•6 years ago
|
||
Thanks for filing. Do you mind providing an example of where this colour is used in the DevTools UI so it's easy for someone to jump on this bug (especially that it seems to be a good-first-bug).
|
||
Comment 2•6 years ago
|
||
Our Red 40 (unofficial variant because Photon doesn't have lighter reds than Red 50) is #FF3B6B.
In the dark theme, our body background color is #232327, and sidebars are darker.
This should result in a 4.54:1 contrast ratio, matching WCAG 2 AA's minimum contrast for text.
Also I think WCAG 2.1 requires graphical elements to have a minimum contrast of 3:1, so I'm not sure if reaching 4.5+ is always necessary (but it can still be a good thing of course).
Do we have specific instances where our Red 40 doesn't work out well?
|
Reporter | |
Comment 3•6 years ago
|
||
Yes I believe this was primarily for transparent fill for the ! mark inside the icon in the light theme, which is 3.44:1 so I guess we are ok here. I don't think to remember any other specific issues here.
Description
•