How do my choice and use of color affect the accessibility of my website?

As developers create websites, they should consider whether their use of color will prevent some users from accessing their content. For example, some users are unable to perceive particular color combinations. Vischeck is an online tool that allows users to enter a URL and then renders the target web page as it might be viewed by someone with each of three types of color blindness: deuteranope or protanope (both red/green color deficient), and tritanope (a blue/yellow color deficient). The Vischeck Info and Links website provides a well organized collection of links to information about color blindness and accessible design.

A general rule for web developers is to assure that foreground and background combinations provide ample contrast, both in color and brightness. The World Wide Web Consortium's Web Content Accessibility Guidelines (WCAG) Working Group is currently seeking an algorithm that measures contrast in a way that is accurate and testable enough to include in WCAG 2.0, which is currently a working draft. Several tools already exist for measuring color contrast; they include the Juicy Studio Colour Contrast Analyser website, and the Colour Contrast Analyser software package from Accessible Information Solutions.

In addition to assuring good color contrast, any information that is communicated using color (e.g., "fields with red labels are required") should also be communicated using some mechanism other than color (e.g., bold text, marked with an asterisk). This way, if a user is unable to perceive color, they can still access the information using the alternate cues provided.

Color Blindness:

  • Affects 7-10% of the male population
  • Affects 0.5% of the female population
  • Reds & greens are often indistinguishable

Accessible Design Techniques:

  • Do not rely on color alone to denote information
  • Foreground (text) and background colors must provide enough contrast to allow color blind users with or those using a monochrome screen to view information
  • Use additional cues or information to convey content

Example of color and additional cue:

Form using both color and asterisk to provide guidance of required fields
Tell us about yourself (* Indicates required fields)
* First Name:
* Last Name:

By developing websites that are accessible to users who can't perceive color, these same websites will be accessible to users with monochromatic displays including many of today's hand-held computers (PDA's) and web-enabled wireless phones.