Although we use the phrase “color blindness” … most people who have impairments in their ability to see colors do not see the world as a continuous tone of grey.
Instead, we usually mean that someone cannot cannot distinguish between certain colors. These individuals have a color vision deficiency rather than actual blindness. The challenging colors are primarily green and red (deuteranopia), although, with age, blue can also become problematic.
The key for web designers: each design element should have more than one cue.
What are some alternate cues?
- Size
- Symbols plus text
- Type face (weight)
Take hyperlinks, for example. In-text hyperlinks (in contrast with navigation links which are usually understood to be links with their position on a page) should have two indicators: color and an underline. Take away the color, and the underline will alert visitors with color blindness that the phrase is a link. Moreover, the underline helps all visitors differentiate subheads that use the same color from text links (an all too common design faux pas).
I can hear you thinking: but what about traffic lights? They use red and green!
Yes they do: but they also use position.
So a person with color impaired vision can still assess if a light is at the top/middle/bottom of a traffic signal. Horizontal (red left-to-right) requires an adjustment. But imagine if some were red-yellow-green and others green-yellow-red. That would be a nightmare for the approximate eight (8) percent of men who have red-green color impairment.
A corollary to the hyperlink rule: be judicious with the number of colors in your design palette, but be consistent with the hyperlink colors. Differentiate between visited and unvisited links, again, keeping good contrast in mind.
Although designers should always be considerate of the contrast between colors and the background, that rule of thumb takes priority for those with color impairment.
- Color blindness and web design at Usability.gov
- Color blindness demonstration
- Color blindness simulator
- Color contrast checker at WebAIM
