Designing For Color Blindness

in Brainy Stuff,Visual Design

Post image for Designing For Color Blindness

“If I get an email with words highlighted in red, I can’t see them.”
“I couldn’t spot an orange laying in my lawn.”
These are comments made by people with partial color blindness, the most common form of color vision deficiency.

It’s Not All Monochromatic

It’s a misconception that people with common color blindness only see in shades of gray. Their world is not like an old movie. Rather, common color blindness is the inability to perceive differences between certain colors. The most common type of partial color blindness results in difficulties discriminating between red and green hues. The “rainbow” on the right exemplifies what a person with red-green color blindness might see when looking at the rainbow stripes on the left (according to Wikipedia.) The second most common type is difficulty discriminating between blue and yellow hues. Total color blindness is much more rare.

Design Considerations

An important fact to consider is that 8% of the male population has some form of color blindness. That’s a lot of guys out there to consider during design, particularly when you’re thinking about user interface, maps, graphs, visualizations and other informational graphics.

The wearecolorblind.com site offers helpful tips for designing with the color blind in mind, including the color combinations to avoid below. They state that the High and Medium combinations should definitely be avoided.

High Medium Low
Green and Red Light Green and Yellow Blue and Yellow
Green and Brown Blue and Grey Yellow and Violet
Blue and Purple Green and Grey Dark blue and Black
Green and Blue Green and Black

Other Tips

In addition to watching color combinations, here are some additional important tips:

  • In graphs, place the legend directly in the chart
  • In graphs and maps, display the type of data for each element in a  tooltip so it can be viewed on a mouseover [done with the a:hover tag] so color isn’t the only attribute
  • Use varied icons or varied shapes in addition to color for status icons
  • When users are required to select a color, name the color in text as well as showing the color
  • To sum it up: never use color alone to indicate anything!

{ 3 comments… read them below or add one }

NeonBlueWS November 2009 at 9:51 pm

Great article! Thank you. You have some really great tips in here for web designers. I hope more designers read your article. After all, 1 out of 12 people has problems distinguishing different colors. Thanks, again!

Ivan Kemp May 2010 at 10:54 am

Hi Connie, Great theme, i´ve worked with a color blind person, and he never told me, so he looked to my graphics for 3 years only cheking text… it´s sad because i could had improved my work taking that in the equation. It´s very important in design to take this problems in consideration when creating, but persons can´t be afraid of telling they have a visual or any type of incapacity, because sharing only adds to better design.
Check this link if you have color blindness or just want to design better.
http://coloradd.net/index%20EN.htm

cmalamed May 2010 at 11:13 am

Thanks for sharing your story, Ivan. And thanks for the resource link.

Leave a Comment

Previous post:

Next post: