C. Color

Checkpoint (C) focuses on ensuring information conveyed with color is also available without color. See the sections below for specific examples and techniques.

Color

Don't use color to convey information unless the information is also clear from the markup and/or text. Without color, the following example is meaningless. (This example is intentionally colorless to show the author that if the person visiting their page cannot see color, they will miss the point the author is trying to make.)

Example of incorrect color usage:

There are two ways to get things done around here. The preferred method is shown in red.

Your way.
My way.

This example uses color to highlight the preferred choice for those who can perceive it, and an ordered list to identify the preferred choice for people who cannot see colors.

Example of correct color usage:

There are two ways to get things done around here. The second method, also shown in red, is preferred.

  1. Your way.
  2. My way.

Contrast

In addition to ensuring that color usage isn't the only way of conveying information you should also make sure that your choice of colors for your web page does not hinder the ability to read or understand it. Good color choices are ones that are easily legible even against the various backgrounds patterns or colors you may use.

If the color of the background and the text over it do not contrast enough, it can prove very difficult for all of your visitors to read your content. This is especially true with visitors with low vision or color blindness. The brightness of the colors can also directly effect readability. For instance don't use white text on a light grey background.

Example

Below is an example signifying the difference your color and contrast choices can make on your web site.

Difficult to read textEasy to read text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget tortor. Vestibulum eget urna. Fusce urna ipsum, egestas et, rhoncus vitae, vulputate at, velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget tortor. Vestibulum eget urna. Fusce urna ipsum, egestas et, rhoncus vitae, vulputate at, velit.

This page adopted from the Curriculum for Web Content Accessibility Guidelines 1.0, Copyright © 2000 W3C (MIT, INRIA, Keio), All Rights Reserved.