Colour Accessibility

27 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Richard Rutter

    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.

  2. Chris Lilley

    “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.

  3. Jared Smith

    Very good article. WCAG 2.0 has specific guidance for non-underlined links. Because color is the only mechanism used to identify the link, the guidelines require that the link have a 3:1 contrast difference from the surrounding non-link text, and that the link become underlined (or have some other non-color designator) on both mouse hover and keyboard focus.

    WAVE currently only checks contrast issues between foreground text and background. The example you use clearly passes (the maroon text has sufficient contrast to the background). But this does make me think that we could add logic to test the 3:1 text to text contrast ratio for non-underlined links, as well as flag lack of hover/focus styles. Your example is only around 1.9:1 (maroon text to black text).

  4. Rob Szumski

    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/

  5. Theo

    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/

  6. prisca

    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 :)

  7. Peter

    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 :).

  8. Geri Coady

    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.

  9. Thomas van Dijk

    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.

  10. Torsten

    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.

  11. Ficholas Norneris

    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!

  12. Alexa

    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.

  13. Ben

    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/

  14. Chris Hayton

    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.

  15. Dennis Gaebel

    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

  16. John Faulds

    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.

  17. Lakeside Technologies

    I was not much aware of this “color” issue in web design. A very good read for me.

    I specially like the easy solution with multiple color display, given in ecommerce sites; will be helpful for other sites too.

  18. Wray Bowling

    I feel like I have been waiting for this for years. In fact, I have! I tried my darnedest to write a good article about how to design for colour blind people but I simply did not know enough colour blind people to bounce questions off of. The bits about contrast in a grey-scale conversion seemed obvious but the bits about providing the name of a colour is something I never would have thought of on my own. For doing your homework, you get an A+.

  19. Bruno Girin

    Brilliant! I need to do a few slides on accessibility for a presentation at work later this week and your post is the best I’ve seen on colour accessibility. Can I quote you and borrow your colour wheel picture? All with due credit and reference back here of course!

  20. Nicolas Chevallier

    Excellent article, I was convinced that the sites have to be highly contrasted. Thanks to you I realize that this is not enough. The simulator for Mac is an indispensable tool and very educational.

    Small note: Even Google Images not use labels when you have to choose a color.

  21. Jenny

    Nice article, but can you practice what you preach and check the colors of your own site.

    I have a cataract so I have trouble discerning foreground and background colors.

    You have quite a lot of ‘grey on grey’ (some things are practically invisible to me), also the colour you use for your links is also a problem.

    If I could I would attach screen shots from my contrast checking tool (Colour Contrast Analyser version1.2 from the IE WAI toolbar) that show the issue.

  22. Sara

    This is one of the most useful articles I’ve read in a while. Very good job! I just tweeted and bookmarked it! Thank you, Geri.

  23. Ben Wellby

    Absolutely essential reading for any designer/dev. Nice writeup.

    The irony is if you run 24 Ways through Wave you get the following message:

    “UH OH! WAVE HAS DETECTED 24 ACCESSIBILITY ERRORS

    I’m not bitchin’, it just made me chuckle, that’s all.

Impress us

Be friendly / use Textile