Color and Context/Markup

Accessibility Standards Checklist

Requirement

Ensure that all information conveyed with color is also conveyed without color and to design for people with partial sight and color deficiencies as well.

Reason

If a Web page conveys information by color alone, users who cannot identify or distinguish colors will not be able to make use of the information. For example, asking users to click the red button is not useful if they cannot distinguish the red button from other buttons.

Most graphical browsers allow users to override the color of text on the Web page, but have no control over the color or contrast of images that contain text. Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone with color deficits or when viewed on a black and white screen.

There are two simple ways of testing a Web page to determine if this requirement is being met. One way is to view the page on a black and white monitor. Another way is to print it out on a black and white printer. Both methods will quickly show if the removal of color affects the usability of the page.

Examples

Color

The list below shows the first place, second place, and third place winners. The person in RED won by 2 points.

  • 1. Jane Sample
  • 2. Joe Something
  • 3. Jill Public

If a visually impaired reader was using this Web page, he or she would not know that the 2nd place winner was in red. Give some alternative indicator such as an asterisk (*) or other symbol, as shown below:

The list below shows the first place, second place, and third place winners. The person with an asterisk by his name won by 2 points.

  • 1. Jane Sample
  • 2. Joe Something*
  • 3. Jill Public

Contrast

The example below shows a strong contrast and a weak one.

A light color used on a dark color.

A dark color used on a dark color.

For a person with partial sight or color deficiencies, the strong contrast image will be easier to read. The weaker contrast image may only look like a black box.

Suggestions for testing this on your pages

  • Print a black and white copy of the page and see that it is still understandable
  • Lynx text-only browser
  • Watchfire WebXact
  • Pass/Fail Examples
[Back To List]