Colorblind design for web applications
8% of all males are afflicted with some type of color blindness. 0.5% of all females. This article isn’t about color blindness, it’s about what you should or shouldn’t do when creating a web application regarding color blindness.
Do you see anything wrong with the picture below?
Can you distinguish in-stock vs. out-of-stock? Perhaps most people reading this can because not everyone is colorblind. But for those of us who are this image is completely undecipherable.
The image comes from Apple’s iPhone stock checker website. I completely appreciate the fact they took the initiative to create the website but I’d expect better of Apple.
The W3C’s Techniques for Web Content Accessibility Guidelines 1.0, Guideline #2 is:
Don’t rely on color alone.
It’s just that simple! When it comes to a boolean column, something as simple as a “checkmark/x”, or the text “yes/no”, or text formatted with a “strikethrough/normal” sufficiently differentiates each option. I personally think the “checkmark/x” combination is the most distinguishable to a global audience.
Design becomes more complicated when you need to distinguish between multiple sets of data. Consider the following map:
The map needs to do better job distinguishing the colors to even be remotely useful but that isn’t the full story. What would be best would be a hovering “tooltip” window that lets you know what color and section your mouse is pointing at. This isn’t necessarily easy and would take time to create, but the people who spend the time perfecting things like that usually end up being the best resource in town. And isn’t that what we all want in our web applications?
While I can’t change the fact that someone in the US decided it was a good idea to use red and green stoplights, I can hopefully shed some light on webdesign in the future. Thanks for your time!
For more reading on color blindness and design, I suggest the following links:
I was recently making a Ontario Parks online reservation and noticed a menu item talking about how they had adapted the site to assist those who cannot easily distinguish color.
The main reservation page:
http://www.camis.com/OP/
The color blind assist page:
http://www.camis.com/OP//colourblindinfo.asp
Excellent Posting! I think too often people take vision in general for granted in website design. Case in point: take a look at http://atmail.com/support.php#search. It amazes me that they use such a light colored font for the heading sections of each article. As someone who suffers from poor eye sight I can tell you that this site is a pain in the butt! The wide use of flat panel displays magnifies the problem as many lower cost flat panel displays distort color and blend lighter areas together more… Webistes that are designed well will typically include things like well contrasted text colors and a tool to enlarge print for those of us who cannot read the smaller type on a 1600 + pixel display.
[…] For more information on colorblind design and applications, read my previous entry here. […]