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
Filed under: Accessibility, Design
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.
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?
@Joe, I do not know.
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.
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
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.
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.
@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?
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.
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.
of the person with the accessibility issue is the key to solving accessibility issues. For many designers, color issues is difficult to test for because it is hard to put yourself in the users shoes (or vision as it may be). Jeffrey Zeldman suggeststwo cool tools for testing for color issues
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.
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.
@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!
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.
aDesigner is a downloadable tool which simulates low vision at different colour deficiency settings.
Another interesting way to test websites for accessibility ( color vision deficiency etc.) is aDesigner a free Software from IBM.
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/
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.
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
Jeffrey Zeldman Presents : Testing designs for color-blindness
and more specifically, our color cues, makes sense to people with this ‘disability’. Jump to his article and start taking this into account, it does not limit us more then ussual but, it does make you think twice when choosing a color scheme:Testing designs for color blindnessUntil next time, Schalk Neethling CO-President/Founder - The South African Web Standards and Accessibility Group
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.
@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.
Jeffrey Zeldman Presents : Testing designs for color-blindness
are legible to all those colorblind surfers out there? That’s where Sim Daltonism comes in. This little donationware app simulates what the area around your mouse looks like to a person with a variety of different types of colorblindness. [viaZeldman]Read | Permalink | Email this | Comments
are legible to all those colorblind surfers out there? That’s where Sim Daltonism comes in. This little donationware app simulates what the area around your mouse looks like to a person with a variety of different types of colorblindness. [viaZeldman] Read | Permalink | Email this | Comments
are legible to all those colorblind surfers out there? That’s where Sim Daltonism comes in. This little donationware app simulates what the area around your mouse looks like to a person with a variety of different types of colorblindness. [viaZeldman]
are legible to all those colorblind surfers out there? That’s where Sim Daltonism comes in. This little donationware app simulates what the area around your mouse looks like to a person with a variety of different types of colorblindness. [viaZeldman]Read | Permalink | Email this | Comments
are legible to all those colorblind surfers out there? That’s where Sim Daltonism comes in. This little donationware app simulates what the area around your mouse looks like to a person with a variety of different types of colorblindness. [viaZeldman]Read | Permalink | Email this | Comments
@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.
once in a while, but not enough. I guess the only way to get better is to keep reading, learning techniques, and just trying stuff. This is an excellent article about adding those finishing touches to sites. The before and after is pretty incredible.Testing designs for color-blindnessThis I found really interesting. Seeing what sites look like through the eyes of someone who is color blind. Go take a look at what your site looks like. Helping your client maintain markup quality
are legible to all those colorblind surfers out there? That’s where Sim Daltonism comes in. This little donationware app simulates what the area around your mouse looks like to a person with a variety of different types of colorblindness. [viaZeldman]Read | Permalink | Email this | Comments
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.
required reading, I came across another useful post from Jeffrey Zeldman’s blog (as I often do) on tools to help designers predict how people with color-blindness will see their designs. Sim Daltonism Colorblind Web Page Filter Details on each @Zeldman’s site. Adding to delicious….
Testing designs for color-blindness
Sim Daltonism looks useful. I have been using color oracle, worth a look.
color oracle, have a little try.
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!
Bla Bla Bla, by Gino d’Agostino (MTV Germany) . Ever wonder what a web site looks like to a person with color blindness? Well, I suppose that depends on which kind of color blindness. Here’s a site thattests colorblindness. Cracking Art at the Tate; the article, and the video. Temperament and Personality Quiz (109 Questions). The periodic table of periodic tables. Free sound database, everything from dogs barking to factory noises.
Application Brings Blackboard to Facebook [The Unofficial Facebook Blog - Oct 25, 2007] — Blackboard Announces K-20 Connection Strategic Initiative [CNN Money - Oct 24, 2007] — Top 100 User-Centered Blogs [Virtual Hosting Blog - Oct 15, 2007] –Testing designs for color-blindness [Jeffrey Zeldman Presents - Oct 10, 2007]– Building a Culture of Collaboration [CIO Today - Oct 02, 2007] — How Do Users Really Feel About Your Design? [UXMatters - Sep 24, 2007]] — iPhone Human Interface Guidelines [Apple] — Building Block Definitions (Containers) [Boxes and Arrows -