Ensure sufficient contrast between foreground and background colors  
WAI / WCAG 1.0 Priority 2 checkpoint 2.2
 
 
Issue Description

The page contains images, objects or applets. There might be cases where the contrast between foreground and background colors is not sufficient to differentiate them.

 
 
How to check

Check that colors and colored items in the page can be clearly differentiated in all the possible contexts in which website visitors may be using the page.
Make sure that the contrast between foreground and background items is conveyed by other means in addition to colors, such as levels of luminosity (i.e. black and white contrast), different font styles, font sizes, or font faces.

If color is used, consider exaggerating the differences between foreground and background colors by making colors differ in all the following three parameters:

  • hue
  • saturation
  • brightness

Easy ways to test the page are:

  • view the page on a black and white screen and go through each of its elements;
  • print the page on a black and white printer;
  • take the printout and copy it two or three times to see how it degrades. This will demonstrate where it is necessary to add redundant cues (like underlying links) or whether the cues are too small or indistinct to hold up well.
 
 
Issue Explanation

There are many situations where a poor choice of color hinders perception and comprehension of some information item or image in a page.

This may depend on many factors including:

  • poor choice of background/foreground colors;
  • the website visitor uses a screen incapable of rendering colors with the same quality as the one used by the page designer;
  • the visitor is accessing the page via a black and white screen on a PDA or cell phone;
  • the visitor needs to print the page on a black and white printer;
  • the visitor is color-blind.

From the W3C guidelines:

Guideline 2. Don't rely on color alone.
Ensure that text and graphics are understandable when viewed without color.

If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.