Bug 153377 – Web Inspector: Make UI more color blind friendly

• Component: Web Inspector
• Status: NEW

[Jon Davis]

It would be nice to provide swappable color-schemes particularly for color-blind users. CSS variables could make this easier in many cases, though extra work would be needed for SVG icons that need to match colors.

[Radar WebKit Bug Importer]

<rdar://problem/24307265>

[Nikita Vasilyev]

Created attachment 269616 [details]
[Image] How color blind people see the Inspector

Repost of my "Color blindness testing" email:

---

This weekend I learned about Sim Daltonism (https://michelf.ca/projects/sim-daltonism/) (from Bug 151544), a color blindness simulator for Mac OS X. As I’m obsessed with everything colors, I installed it and tested Web Inspector.

We did pretty well, with a few notes in the Timelines: [see the attachment].

Seems like we’re doing okay with a few exceptions:
— Short layout and paint bars are hard do distinguish
— Red record button probably needs some title


Q: Why should we care?

It seems like color blindness isn’t that rare:
						Males	Females
Dichromacy					2.4%	0.03%
Protanopia (red deficient: L cone absent)	1.3%	0.02%
Deuteranopia (green deficient: M cone absent)	1.2%	0.01%
Tritanopia (blue deficient: S cone absent)	0.001%	0.03%
Anomalous Trichromacy				6.3%	0.37%
Protanomaly (red deficient: L cone defect)	1.3%	0.02%
Deuteranomaly (green deficient: M cone defect)	5.0%	0.35%
Tritanomaly (blue deficient: S cone defect)	0.0001%	0.0001%

https://en.wikipedia.org/wiki/Color_blindness#Epidemiology

As I learned today, blue cones deficiency is very rare.

https://cldup.com/mPIRdLt7mn-3000x3000.png


Q: How can we improve?

The most common advice I hear is to avoid using green and red. I find this to be very bad advice.

https://cldup.com/xBMs3enIgC-1200x1200.png

As you can see, the left color is easily distinguished from the right color by people with color blindness.

Only green and red with similar luminance can’t be distinguished.

A better advice would be to just test with a simulator (e.g. Sim Daltonism).

[Nikita Vasilyev]

This being said, I don't think we need swappable color-schemes.
The default color scheme should be usable by both color-blind people
and people with normal (trichromatic) vision.