Conveying Information with Color

Requiring Color to Convey Information
Checking Pages for Color Contrast
Resources
Next Topic: Style Sheets
Previous Topic: Multimedia
Web Accessibility Home

How you use color on your web pages cannot be assessed by any program, the use of color requires an individual to review and consider the choices made. Issues with color on web pages are two-fold:

1. If you use color to direct people or convey information ("Click the Green Circle to go to the next page." OR "Check for details in the yellow box.") you must provide another means to convey or direct the same information.
2. Color selections for text and background should be high contrast and ensure that people with color-blindness will not have difficulty reading your web page. There are web tools available to help you with this checkpoint but the decision is ultimately up to the web developer.

Requiring Color to Convey Information

Click the Green circle to go to the next page. Click the Red circle to go back to the previous page.

Imagine the same set of circles to a color-blind person:

How will they know which is green and which is red?

Adding text to assist with the visual images-
Click the Green Next circle to go to the next page. Click the Red Back circle to go to the previous page.

Now even if you cannot distinguish red and green, you can tell which one to click for Next and which to click for Back.

Back to top

Checking for Color Contrast

In addition to ensuring that information is not conveyed in a way that requires color recognition, you should also ensure that your text and background colors offer enough contrast to be read by people with different types of color blindness.

One web site that can assist you in performing this task is Vischeck. This site will load your web page and then display it as it would appear to people with different types of color-blindness.

See how Vischeck works
Printable/Accessible Version (opens in new window)
Check your own page at http://www.vischeck.com

Another web site that is useful allows you to select text styles, colors and background colors and then apply filters to see how it would appear to an individual with color blindness. This allows you to make some decisions regarding colors before you design your entire web page.

Using the Fonts and Colours Laboratory web page
Printable/Accessible Version (opens in new window)
Check your own page

Viewlets require Macromedia Flash Player.

Back to top

Resources

Vischeck

Phillip Chalmer's Fonts and Colours Laboratory

WebAIM information on color-blindness

Back to top