Web Accessibility Blog | About Matt Bailey | Contact Form

«July 19, 2005»

How To: Design for Color Blindness

If you are using color-based charts and graphs to convey important information, you need to take into account that about nine to twelve percent of the male population suffers from some form of color deficiency. Some estimates place the level of color blindness as high as 20% among the white male population. However, less than one percent of women suffer from color blindness.

Most color blindness takes the form of red-green confusion, while the minor forms are mostly blue-yellow confusion. While most websites will not create large obstacles, communicating information or instructions through graphics or color codes that use rely of these colors or the difference of colors will cause confusion.

A great resource for understanding how your web pages would appear to those with color blindness is Visicheck blindness. Any obvious problems will become apparent. If you would like to explore further, Visibone provides designers with color-blindness web color charts. There are diagrams which show how those with color blindness perceive web-safe colors.

If you suspect that you or someone you know may have color blindness, here is the link to the Ishihara Test for Color Blindness.

Some things to remember:

  1. Never make color the single visual cue.
  2. If red, green or blue is being used as a font color for emphasis, another cue should be used, such as an underline or bold attribute.
  3. Use effective color contrast in web pages and presentation materials.
  4. Avoid fonts that are too decorative and require study.
  5. Label graphical elements, so that users do not have to rely solely on color keys.
  6. Use descriptive text near graphic images to explain the purpose of the image.

Using these elements will also create better methods for the search engines to use the information on the page. Search engines can read the color instructions in the HTML, but cannot us it as a basis for judging graphic elements. As more information is added to explain graphics and highlight specific areas of text, this will also help in naturally implementing keywords to target your specific business or venture to the search engines. It will also go far in assisting users to understand your site and your purpose.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • del.icio.us
  • digg
  • NewsVine
  • Reddit

1 Comment »

  1. Thank you for the list of things to remember - very important ones!

    A very good tool to see your web site through colorblind eyes is at http://colorfilter.wickline.org/

    Information about images that are friendly to color blind people:

    Don’t rely on color alone.

    Comment by FeaturePics Images — May 25, 2007 @ 6:15 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>