Design Patterns Solve Common Problems for Web’s Color Blind Users
Every website owner wants to reach as large of an audience as possible. That’s why good web developers go to pains to ensure their sites are standards compliant, work across all browsers and provide solid accessibility for devices like screen readers.
Unfortunately, while those are all steps in the right direction, none of them address a quite large subset of problematic users — the color blind.
Color blindness affects between five and ten percent of the general population. Most color blind humans are male, and the most common form of color blindness makes it difficult for the person to distinguish between reds and greens.
We’ll admit that we hadn’t fully considered the impact of color blindness on website design until Andy Biao of Waxy.org pointed us to We Are Color Blind. The site hosts a collection of design patterns for making your website more accessible to people with common forms of color blindness.
If you’re thinking this is simply another thing you need to worry about when picking color palettes and page designs, relax. The patterns on We Are Color Blind, aren’t complicated and the site is full of very easy, subtle solutions.
For example, consider Apple’s iPhone availability chart — a simple list with store locations alongside red and green dots to show which stores have iPhones and which don’t. The problem is that if you don’t see color, distinguishing between the red and green dots is very difficult. The solution, however, is very simple and elegant — change the red dots to red squares. The basic design of the site, and the color scheme, is maintained, but the difference in shapes allows color blind users to easily get the same information.
Other potentially problematic designs include pie charts, heat maps and color pickers. But as is the case with the iPhone chart, there are easy solutions. For example, with charts, heat maps and other color maps, simply adding a tooltip when the mouse hovers over a selection helps eliminate the color dependency.
Our favorite part about We Are Color Blind is that not only does it make you aware of a problem you might have previously overlooked, but it has thoughtful solutions all ready to go. We wish there were more collections of common design patterns and solutions out there; if you know of others be sure to let us know.
Note: The image at the top is a plate from the famous test developed by Shinobu Ishihara. Individuals will normal vision will see the number 74. Color blind individuals will see different numbers or no numbers at all depending on what type of color blindness they have. Learn more at Archimedes-lab.org and Wikipedia.
See Also:
