Open Bug 1226069 Opened 6 years ago Updated 1 year ago

[accessibility] Contrast line for color selectors

Categories

(DevTools :: Inspector, enhancement, P3)

enhancement

Tracking

(Not tracked)

ASSIGNED

People

(Reporter: karlcow, Assigned: jdescottes)

References

(Blocks 2 open bugs)

Details

(Keywords: parity-chrome)

Attachments

(1 file)

This is an idea which is currently experimental but is a very good visual cue for helping with color choices. 

There's a line in the color selector to help people figure out what is a good contrast for color choices. 

 You can see it at the 10 min mark.
https://www.youtube.com/watch?v=dJR-n8szgBc&index=13&list=PLNYkxOF6rcICcHeQY02XLvoGL34rZFWZn
See Also: → 1003289
Triaging (filter on CLIMBING SHOES).
Severity: normal → enhancement
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
See also bug 1332090 for a similar feature request (which has been worked on and, although still behind a pref, might come soon).
See Also: → 1332090
Product: Firefox → DevTools

Chrome now shows 2 lines in their color picker, one for AA and one for AAA color contrast ratios.
The code they use to do this can be seen here: https://github.com/ChromeDevTools/devtools-frontend/blob/f5d825ac1bb6eca13782947e30e5c5c78b9de1f0/front_end/color_picker/ContrastOverlay.js#L91

Keywords: parity-chrome
Version: 44 Branch → unspecified

This is what the color picker looks like in Chrome Canary today (version 82).

Had a quick chat with Martin about this feature. There is one additional complexity when porting this to Firefox.
Firefox DevTools is trying to accommodate for backgrounds with different colors and still give an accurate accessibility rating for text displayed on top of such backgrounds.

For those backgrounds it won't be trivial to compute the "contrast lines".
We don't have a clear solution in mind, but we just wanted to highlight this additional difficulty.
I will initially focus on a version working against single color backgrounds, and that should give us opportunities to experiment for more complex backgrounds.

Assignee: nobody → jdescottes
Status: NEW → ASSIGNED
You need to log in before you can comment on or make changes to this bug.