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.
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.
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?
Red and green are particularly easy to distinguish for people with normal vision because the sensitivity spectra overlap so much. So when you don't consider colorblind people it's a very natural choice.
It's also fairly easy to have a colorblind mode that swaps the pallet to something. People generally only have 3 color receptors, but color blind people don't all share the same 2.
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
Your comment reminded me of the talks on the issue of information display for Matplotlib[0][1]. I think a lot of design is done without awareness of accessibility and this is more broadly a cultural thing than a technical thing. The situation can be improved both by technical means (OS or hardware awareness) as well as by our collective education about what kinds of issues designs should consider. Typically, designs become better when they account for accessibility, but it is oftentimes seen as a hurdle when a designer or developer has not heard about the issues and also is not equipped with tools to handle them. Having good tools is helpful here. The situation seems to be improving, but it will take time.
When I was in elementary school, you had to special order large print text books, audio books were available, but required special tapes & players. A portable CCTV could be used to magnify small print. All of this equipment was specialized, expensive and hard to come by for most people. All of this has been replaced by features built into my phone. Special shoutouts to the "Zoom" app on iOS, that thing has color filters for people with color sensitivity issues and enhanced text rendering for small print (unfortunately, it's buggy and crashes sometimes), but it is much better than littering my camera roll with random pictures of menus or the bottom of routers just so I can zoom in on some numbers.
FYI, recent versions of iOS have a zoom / light / color-swap tool built in. You can enable it in Settings => General => Accessibility; it's called "Magnifier".
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.
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/
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.
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 ..." ..
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.
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.
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)
I'm colorblind; I don't; and I haven't even looked into it. I have a lot of little heuristics I learned in the real world to help cope with not being able to distinguish certain colors. If they're not good enough, I can usually either just ignore it, ask someone nearby for help (or text my sister or girlfriend), or use the web inspector to change things around.
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.
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.
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?
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.
See the links I posted in my reply to another comment here: https://news.ycombinator.com/item?id=16343367. There's some good information in those talks about how you can tackle mapping information.
