1226069 - [accessibility] Contrast line for color selectors

Status: ASSIGNED

(DevTools :: Inspector, enhancement, P3)

Description

[Karl Dubost💡 :karlcow]

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

Comment 1

[Patrick Brosset <:pbro>]

Triaging (filter on CLIMBING SHOES).

Comment 2

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 3

[Patrick Brosset <:pbro>]

See also bug 1332090 for a similar feature request (which has been worked on and, although still behind a pref, might come soon).

Comment 4

[Patrick Brosset <:pbro>]

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

Comment 5

[Patrick Brosset <:pbro>]

Attachment: Screenshot 2020-02-19 at 14.42.30.png

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

Comment 6

[Julian Descottes [:jdescottes]]

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.