10 Oct 2007 10 am eastern

Testing designs for color-blindness

What toll does color-blindness take on design usability? Even experienced designers and art directors, assuming they think about color-blindness at all, can find it hard to predict how their work will appear to someone with, say, protanopia, the most common form of red-green color-blindness.

Enter Sim Daltonism (donationware), a color-blindness simulator for Mac OS X. Its floating palette filters your web page in real time, showing how the area around your mouse cursor looks to people with many different kinds of color-blindness, including rare as well as common types.

Windows and Linux users, or Mac users who would rather view complete pages than floating palettes, should check out the Colorblind Web Page Filter. In our studio, we use both tools. Here is Happy Cog as its front page may appear to a person with protanopia. (Allow time for the page to load, and don’t all click at once.)

[tags]colorblind, colorblindness, design, accessibility, usability, software, tools, apps[/tags]

Filed under: Accessibility, Design

27 Responses to “Testing designs for color-blindness”

  1. Will Green said on

    I found this nifty tool once called Color Oracle: http://colororacle.cartography.ch/

    Java-based tool that runs on Windows, Max, and Linux. It applies a filter to your display, and can save an image of the filtered display.

  2. Joe said on

    Is it still true that if your foreground and background colors are at least 30 in luminosity difference, they will be discernible enough for color-blindness?

  3. Jeffrey Zeldman said on

    @Joe, I do not know.

  4. MT said on

    This is a nice asset and I hope more designers start testing for the colorblind. It was surreal when I had to a call a friend into the room to tell me if the colored dots on Apple’s iPhone availability tracker were red or green.

    If we can do this, though, how about an application that simulates to the color blind what the normal-sighted see? I’m a web designer with deuteranopia, one of the most common forms of color-blindness. I also work from home. Since my deficiency is in seeing full saturation of reds and greens, it’d make my job unbelievably easier if I could do a quick check of my color choices with software before sending them to my colleagues for their input.

  5. Rob Kirton said on

    Although I have regular eyesight myself, this area has always fascinated me. On researching this, I was surprised to find that up to 8% of all Caucasian males have some form of colour blindness. As a condition it is failry discriminatory, outside of this group it is comparatively rare.

    As MT said, deuteranopia is one of the most common forms. The problem is that trying to accomodate all forms of colour blindness (apart from monochromatic vision which causes its own special problems), the number of colours available to a designer would be greatly limited. Web sites would then begin to look fairly much the same i.e. similar high contrast colours from a limited palette.

    I’ve always found the colour contrast analyser to be a handy tool V2 now available at

    http://www.paciellogroup.com/resources/contrast-analyser.html

  6. Andy Baio said on

    MT: The iPhone tracker was the most frustrating recent example because it was both so easy to prevent (darker shades of green would’ve fixed it), and I really needed the information and was unable to find it in any other form.

    Snopes.com’s icon indicators for truth/falsity of urban legends is another classic example. Oddly, they even have a maddening FAQ entry for the colorblindness question, justifying their refusal to actually tweak the icon colors.

  7. Richard Rutter said on

    As with everything, the best thing to do is find someone who is colour blind and ask them. As Rob Kirton stated, 8% of Caucasian males are colour blind so most of us will know someone who is colour blind.

    That said, as someone with strong protanopia, I’ve stated in the past that colour blindness on the Web isn’t a big deal. For example, contrasting foreground with background is rarely any more an issue for colour blind people than for people with good colour vision.

    What does matter is when you need to identify something as being a certain colour (“click the green button”), or be able to distinguish one thing from another (picking out red links within black text).

    For a fantastic example of a site which causes problems for colour blind people (well me anyway) see Jeff Veen’s blog. Jeff removes the underline from his links and makes them dark red in order to improve the readability of his posts. The unfortunate result is that I cannot distinguish the dark red links from the black text.

  8. Josh said on

    @MT: I am in the same boat as you are. I wonder if such a tool would even work for us though. If we can’t see those wavelengths, how could it be simulated?

  9. jon deal said on

    There is a great tool/widget from colorjack.com which can help you design a “color-blind” friendly color scheme. It simulates all the forms of color-blindness.

    I know some people are anti-Dashboard widgets, but their site has the same tools as the widget. And, like Adobe’s kuler, you can download color palettes for later use.

  10. Chris Coyier said on

    If you are running OS X, there is an option to make your screen grayscale in the Universal Access control panel. It’s really easy to turn on and off. This could be good quick-test as well.

  11. Maria Stultz said on

    Have been using Sim Daltonism for a while and I love it.

    Along the same lines of what Joe (above) mentions: I once read an article written by a color blind person. He said that something that gets overlooked often is contrast. He complained specifically about red links appearing to him indiscernible from black or dark gray text. He suggested for designers to test our designs transformed to a grayscale palette. In Sim Daltonism that would be the “Monochromacy” options.

  12. Daniel said on

    Thanks for linking up to my article about protanopia. Unfortunately I’ve to tell you, that this only the second as most form of color blindness (if you count protanopia (red-blindness) and protanomaly (red-weakness) together).

    Deuteranomaly (green-weakness) is by far the most common form of color vision deficiency. About 5% of all men are suffering from this single subtype. But anyway, protan and deutan defects can almost be put into one pot, because they almost look the same and all belong to the group of red-green color blindness.

  13. ManxStef said on

    @MT & Josh: a single coloured contact lens, usually with a red tint, may help some red-green (deuteranomaly) colour–blind people distinguish reds better. These lenses go by the name “X-chrome”, amongst others. I’ve tried them once and it did make the reds “jump” out in a way I’d never seen before – I’d recommend giving them a go just to experience it – but they’re not a perfect solution by any means, more of a “mind hack”, and won’t give you a good estimate of full-colour vision. (They’re banned for most colour vision testing, such as for pilots or marine use, for instance.)

    I’m afraid we’re stuck with colour-blindness until someone comes up with an effective gene therapy solution, which is really only a matter of time. With a little luck, within our lifetimes it’ll be possible to get the disability reversed – I’d imagine it being a similar experience to the laser correction procedure, though I can’t see having stuff injected into your eyeballs being particularly pleasant!

  14. Jim Whitten said on

    Thanks to everyone posting here with different experiences and links to the tools as well. Both my parents have some form of color blindness and have often questioned what designers are doing (requiring discussion ranging from color theory to layout). I sincerely appreciate this discussion.

  15. John Faulds said on

    aDesigner is a downloadable tool which simulates low vision at different colour deficiency settings.

  16. Webstandard-Team said on

    Another interesting way to test websites for accessibility ( color vision deficiency etc.) is aDesigner a free Software from IBM.

  17. Stefan Klose said on

    Fujitsu also offers a free set of tools on this purpose. It’s almost a full suite of accessibility testers, but it’s only available for Windows. Give it a try:

    http://www.fujitsu.com/global/accessibility/assistance/

  18. Ray said on

    Thanks Jeffrey. I was happy to test one of my sites and see that there were no problems for colorblind visitors. And my contrast is good too. Color me happy?

    The Veen example is very adroit Richard. In my early incarnation as a ‘designer’ I used to rail against the Jakob N advice (blue and underlined!) but these days my links are at least underlined, if not a better shade of blue. I just caved to the advice, but now I see. Smart.

  19. Jack Cole said on

    A technique that might be useful here was announced at MAX – Flash 10′s new shader language called Hydra. Shaders could be developed to allow users to adjust content for easier viewing. I could imagine a standard library of shaders being developed for creating sites that would accommodate a variety of sight deficiencies. It’s Flash, granted, but maybe this same idea can be ported to web standards with SVG at some point?

    One application that looks particularly promising is Zeh Fernando’s, allowing users to make Threshold adjustments to images on the fly. He includes an example of it (with code) on his site. People

  20. Steve Cochrane said on

    Sim Daltonism seems like a great tool, but you might want to keep an eye on system performance while it’s running. I had all kinds of memory issues when it was open and it was taking over 90% of my CPU seemingly every time it was in view. I’ve since ditched it and started using Color Oracle, which is nice and simple.

  21. Joe said on

    @Zeldman – My former coworker, Eric Puidokas taught me that if you look at the luminosity value of your background and your foreground text color, their values should be at least 30 in difference, and that was a general rule of safely applying color for color-blindness.

    This might have derived from the 7:1 Contrast Ratio Rule.

  22. Greg Bulmash said on

    @ManxStef, the red contact lens may be a bit extreme. I found a pair of red safety glasses that came with a laser level worked well for me.

    When I was putting up shelves in my son’s room (before he was born), I used a laser level and red-tinted safety glasses. The room was painted green and my wife had done some highlights in a complimentary shade of green. When I looked at the wall normally, it looked to be one solid color. When I put on the red-tinted safety glasses… there were the highlights.

  23. Ellen said on

    Very interesting site. I am a graduate student in Human Factors, teaching an undergraduate course in sensation and perception, and one of my students sent me this link. I’d just like to point out that the term “color blindness” should be reserved for the very rare phenomenon of monchromatism–no color vision at all, either due to brain damage or no functioning cones. Protanopes, deuteranopes, and tritranopes should be referred to as color deficient.

  24. Asela said on

    Sim Daltonism looks useful. I have been using color oracle, worth a look.

  25. Paveo said on

    color oracle, have a little try.

  26. Andy said on

    I’m guessing that many people who read this blog design for print as well (at least once in a while – branding and all that) so I thought I’d bring up Scribus, an open source multi-platform desktop publishing program. The version I have installed (1.3.4) has a button in the lower right hand corner that shows how your piece will look with various types of colour blindnesses. Also, the colour wheel in the ‘Extras’ panel can do similar checks. Hope that helps someone!

  27. Stef said on

    And almost two years after my comment theorising on a cure, scientists have successfully used gene therapy to correct colour blindness in monkeys:
    http://www.wired.com/wiredscience/2009/09/colortherapy/

    Bring on the eye hacking! (Though my apprehension of the eye injections required still stands.)

Comments off.