Colorblind design for web applications
June 28th, 2007
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:
- Wikipedia - Color blindness
- Causes of color blindness walkthrough
- Color blind test
- Color blind labratory comparison tool
- Another color comparison tool
- Web safe color blind charts
Posted in Web Applications, Web Design | Comments (3)
August 19th, 2007 at 7:33 pm
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
October 10th, 2007 at 7:09 am
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.
March 10th, 2008 at 3:51 pm
[...] For more information on colorblind design and applications, read my previous entry here. [...]