I have strong protanomaly. This means I struggle to see red. Imagine if you turn down the red channel in Photoshop: reds turn grey or black; brown and yellow turn green; purple goes blue and pink becomes grey.

Despite this, I find that design suggestions catering for colour blind people are often over-stated. I rarely come across an issue on the web where my colour-blindess causes a problem.

That said you have done a brilliant job in identifying some the often overlooked areas. Put simply, problems only arise in two circumstances:

# when I need to know what the colour actually is
# when I need to spot a difference between two colours

The first – colour labelling – crops up often when trying to buy clothes. It is very useful to know if I’m about to buy a pink t-shirt I thought was grey.

The second usually crops up when things are marked red and I am required to distinguish them from the black. I hate that. Similarly applies to charts and maps, but rarely. Ironically red is rarely a problem – the biggest issue is telling apart orange/green and yellow/green.

It’s also worth noting that, while you need to provide a method other than colour to distinguish things such as links, that other method can very often be context. For a list of links (eg. nav) may often look like a list of links, and may even be labelled as such, so I don’t need to know what colour they are to know what they do.

Thanks again for pointing out and illustrating the bits of design which do need attention – particularly that problems can often be overcome using words.

“much better since it uses names instead” – no, that just gives it a different set of benefits and drawbacks.

It would be better if it used names as well as colors.

Color Oracle is a Mac app that lets you simulate (and save screenshots) of anything on your screen and works extremely well. You can browse entire pages/apps, use native programs, etc.

http://colororacle.org/

Thank you for this great article.
I use CCA, i think it is a great tool as you can check contrast ratio and some type of colour blindness in one, and it is available for mac and for windows.
Another very useful tool is Lea Verou’s contrast ratio analyser, it works with semi-transparent backgrounds too.

http://www.paciellogroup.com/resources/contrastAnalyser
http://leaverou.github.com/contrast-ratio/

Geri,

I really enjoyed reading this article – will pass it on :) It’s always good to be reminded about the importance of using colour, shape and text for better accessibility of information.

One tool I found useful in addition to the ones you mentioned: http://www.checkmycolours.com/

Thanks again :)

this is one of few good uses of my “color blindness”, Im quite certain that I wont design anything that will render unusable to users with visual impairment :).

Bruno: Absolutely, and thanks for asking!

Richard: Thanks for the feedback! I’ve spoken to a few folks who are colour blind and of course, many people have varying degrees of it. Love your comments on how a lack of words are one of the more problematic areas.

Thanks for this article !

You might like http://www.dasplankton.de/ContrastA/ to select colours that are accessible. ;)

Thanks for raising awareness! Being one of those visually impaired I ended up writing a small Mac App called “ColorBlind” to help identify what’s on the screen when colour accessibility is not how it should be. It’s available on the Mac App Store.

Fascinating stuff and some very useful tools. Thanks Geri!

Great great great. I have been relying on color-coding in my design work for years, didn’t even consider how accessible my work has been for color-blindness. Thanks for bringing this to light!

Coding with screen-readers and such in mind is often brought up and drilled in our minds, but I don’t see color accessibility mentioned much. And when it is, that’s just it, it’s mentioned. Thanks for giving this a deserving discussion! I’ll be looking at things differently now.

I can’t find the actual website for this so some dudes blog post will have to do, but this looks like an interesting way of tackling colour issues – http://www.andrewkeir.com/colour-for-the-colour-blind/

reHue.net is a web app that lets you simulate colorblindness and also daltonize images. You can screencap a webpage or desktop app and paste it directly onto the reHue.net front page to see a color-filtered version. It also handles large images.

Hey Geri,

Great job on the article. Patterns are definitely a big help when color is the main reliance -especially trying to get home on the el train.

Tom van Beveren runs a great site jam packed with goodies that help to benefit the grayscale zombies.

http://wearecolorblind.com

My favourite colour contrast analysing tool is the <a href=“https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/”>Firefox extension</a> from Juicy Studio.

Well done Geri, really well researched and nicely presented article.

I’ll be referring to this a lot, thanks

I like the idea of sorting colours for tshirt shops by text, but I’ve come across cases where there’s 8 different kinds of green or blue and clicking becomes a guessing game. You need to keep your undisabled customers happy as well.

I’d like to point out that the example picture for colour-specific instructions would probably work fine for any sort of colourblindness, as the black of the regular text is easy to tell apart from the red text. Even if you can’t be sure it’s red text, it’s the only text that looks different from black. If you’d use more colors, it would be harder to tell things apart. That said, the asterix is indeed a better solution.