
Show HN: Automatic detection of non-colorblind safe colors - gka
https://www.vis4.net/blog/2018/02/automate-colorblind-checking/
======
bbarn
Really cool. I showed the a11y geeks in our design group this and they're
already thinking about approaches they could take to embed this into the CI
process for our UI libraries.

------
robbrown451
An interesting question might be, which is the best approach: having designers
alter their designs (which means everyone is affected), vs. client side
settings that alter the appearance just for those affected?

I just am not so fond of the idea that all designs must be compromised (both
aesthetically and functionally) for everyone else, if there are solutions that
work as well without affecting everyone.

~~~
tsm
Disclaimer: I'm colorblind.

There are SO MANY designs that use indistinguishable colors for no good reason
at all. It's perverse that League of Legends uses blue and purple as its team
colors—literally anything else (blue and red is my vote) would be easier for
many colorblind users to tell apart. And a lot of heatmaps use gradients that
go from blue to purple or from red to green…why‽

I'm willing to admit that the very occasional design might Really Just Work
Better with particular colorblind-incompatible colors, but I feel like I'm
being affected by it awfully frequently. The primary point of design is to
communicate information; why restrict a substantial minority from easy access
to that information?

~~~
Nadya
League of Legends offers a colorblind mode in game that does exactly that -
changes the teams to Blue and Red from Blue and Purple.

IIRC, they even use that mode for their E-sports tournament streams - but I
might be wrong on that as I haven't watched any LoL tournaments in quite some
time.

E: Just tuned into the EU LCS to take a screenshot - and it has colorblind
mode on: [https://vgy.me/ijQgrR.png](https://vgy.me/ijQgrR.png)

~~~
Fnoord
World of Warcraft got colorblind mode in patch 6.1 (around feb 2015) [1].
Before that, one needed to achieve this via addons (with varying effect).

[1] [https://worldofwarcraft.com/en-
us/news/17964863](https://worldofwarcraft.com/en-us/news/17964863)

------
tofof
The author uses CMC I:c (and somewhat incorrectly claims it's also called
Delta E, which normally refers to one of the CIELAB metrics). Then he notes
the asymmetry of that quasimetric, and a workaround -- averaging the C1,C2 and
C2,C1 distances.

I wonder if perhaps he would be better served by simply using the actual
"Delta E" metric, specifically ΔE*₀₀, which doesn't have this symmetry
problem?

PS. Sexy interactive color matrix table. Small error in the text below --
values >=40 are highlighted, not >45.

~~~
gka
Author here, thanks for the feedback.

Well the only thing I know about DeltaE I know from Bruce Lindbloom's website,
where he uses the terms interchangably.
[http://brucelindbloom.com/Eqn_DeltaE_CMC.html](http://brucelindbloom.com/Eqn_DeltaE_CMC.html)

But I'm happy to try out the CIELAB deltaE as well. I can already see another
dropdown for comparing difference metrics coming up :)

Will fix the text error you found.

\--edit: after reading again I see that he used DeltaE as a sort of broader
category. worth fixing as well

------
jaysonelliot
Excellent tool. Our organization is AAA compliant with the ADA section 508
(details for anyone who needs them:
[https://www.section508.gov/content/build/website-
accessibili...](https://www.section508.gov/content/build/website-
accessibility-improvement/WCAG-conformance)), and color is a major issue.

One suggestion for designers & developers who need to be ADA-compliant: part
of the spec is the level of contrast between different colors. We currently
use WebAIM to check our color contrast:
[https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)

I'd recommend looking at the contrast levels needed to achieve ADA compliance,
or any other compliance needed depending on the regulations in various
countries, to make it easy for designers & devs.

------
mmjaa
I kind of wish the OS Vendors were not asleep at the wheel, and had features
to address these issues as a 'built-in' value proposition for their products.

I mean, it seems to me the sort of thing that a computer ought to know how to
deal with, inherently .. and sure, some vendors do make an effort to make
these kinds of human differences accessible.

But its just .. well maybe there is a broader malaise with OS vendors, asleep
at the wheel, not caring too much about this on the OS level any more. We've
moved on and its all web now, I guess.

I say this, as my first thought while reading this article was "surely this is
just a hash-table away from being applicable everywhere ..." ..

~~~
Larrikin
Not sure about iOS, but Android has multiple color blind settings built in.

~~~
Osmium
iOS does too, along with a number of other display accommodations. It has
adjustable filters for specific forms of color blindness, along with an
Ishihara-like test pattern to help tune the filter to your specific needs.

------
mkempe
Thank you, this is great work.

While implementing the UI for a medical device I had the disappointing
experience of having to work with a UX company that designed an interface that
relied almost exclusively on _colors_ to indicate results and state (red,
green, orange, blue, yellow...). When I pointed out that the color blind would
not be able to understand their color-based system they refused to make any
changes -- not even adding distinct icons for distinct results. These people
claim to be UX specialists for medical devices.

------
george_perez
FYI, you should reissue your certificate. Chrome 66 is already blocking it
(because of the Symantec fiasco).
[https://i.imgur.com/dWqeK74.png](https://i.imgur.com/dWqeK74.png)

~~~
gka
er, I switched to firefox when it became a good browser again. will see what I
can do about the cert. thx

------
aaossa
I have a legit question. Do colorblind people use some extension in their
browser? This post gave me the idea that maybe some extension could show them
the warnings and some options to scale the colors in an appropiate manner. My
first idea was to try using it in development, to check how colorblind people
see our apps and provide a solution. Do you have any further plans or ideas
with this? (It's an interesting topic, but I'm not very informed)

~~~
mtu9001
I suffer from deuteranopia and use the Spectrum extension in Chrome from Yehor
Lvivski.

It's ok for switching between different color modes so I can see differences
in them.

I am intrigued by the Enchroma glasses, haven't wanted to gamble $300+ on them
yet.

~~~
reificator
Not colorblind myself, but I often use spectrum as a final pass to make sure
any colors I've chosen for a UI aren't going to cause issues. I just hope it's
decently accurate.

I'm also a very heavy F.lux user, so all my color choices have to be usable
with an orange filter as well.

------
snissn
Would love for someone to do a similar analysis on the Overwatch colorblind
modes (and why they don't work and Blizzard needs to improve them)

------
relaunched
This is a very informative and well structured post. The clarity of thought
and experimentation methods that led to the final solution was a pleasure to
read.

Also, the problem space is one that I haven't thought about, but probably
should. After all, accessibility should be important to all of us.

------
nix0n
Now that I've detected my color ramp is inadequate, where can I find a good
one? Am I limited to greyscale or other single-hue ramps? Do I need multiple
color ramps for deuteranopia vs protanopia?

~~~
hood_syntax
Depends, I assume. The original Destiny had color palettes for every type of
color blindness iirc, you could select whichever one you wanted. That was a
really nice feature for a FPS, where you need to be able to determine
allies/enemies at a glance.

If you didn't want to do separate palettes, which I imagine could be a lot of
work, you could create your own. I imagine if you varied the tint/shade/tone
enough you could (probably?) get a set of colors (with different hues) that
would be differentiable across all forms of colorblindness.

Disclaimer: I'm not a designer _at all_. Somewhat on topic, my favorite quick
tool for colors is colorhexa dot com. At the bottom of each color page they
have a color blindness simulator.

