Use color as an enhancement, not as the only way to convey information or indicate an action.
Rationale
If an application or 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 can't distinguish the red button from other buttons on the screen. The application needs to provide another way of making the information available.
An image with insufficient foreground and background color contrast may also cause problems for some users. An image containing light text on a dark background or dark text on a light background would provide good contrast. Users have no control over the color or contrast of images that contain text.
Note: This checkpoint for color does not apply to links changing color after activation. Users can adjust the colors for their links in their browsers. This checkpoint also does not apply to using color to show where a user is on a navigation bar or within a Web site. Color used as redundant information is acceptable and encouraged.
Development techniques
Use one or more of the following techniques to meet Checkpoint 4.2 from the Lotus Notes Accessibility Checklist:
-
In addition to using color, provide a brief text description. In the example below, the list item displayed in red indicates a racer who made the Olympic team. This item is also displayed in bold text as a redundant cue to the red color. Even though there is an additional cue besides the color, a screen reader would not provide this information to the user.
These are the results of the race. Racers listed in red also made the Olympic team.
- John Doe
- Jack Sprat
- Billy Bob
One method of correcting this example is to add explanatory text to each item as follows:
These are the results of the race. The second place finisher, highlighted in red, also qualified for the Olympic team.
- First Place: John Doe
- Second Place: Jack Sprat
- Third Place: Billy Bob
- It is not sufficient to use attributes such as bold or italic in addition to color. While these attributes may provide additional information to users who cannot identify or distinguish colors, the attributes do not provide sufficient information for someone using a screen reader. Include a character such as an asterisk in addition to color. For example, in Lotus Notes, unread documents are displayed in the color red and with an asterisk.

Recommended techniques
The techniques above are required; the following techniques are recommended to enhance accessibility:
Do not use graphics files as a background for a form. While this may add to the visual appeal of the form for some users, the background may make it difficult or impossible for some users with visual impairments to read the data on the form. Many users need high contrast between the background and foreground objects in order to read the documents. To enable users to turn off patterned backgrounds:
- Open the Form Properties box and select the Form Background tab.
- Under Options, select the option "Allow users to change these properties".
If an image contains text, use either light text on a dark background or dark text on a light background to provide good contrast. For example, the first image on the left uses good contrast, light text on a dark background, while the second image on the right uses poor contrast, medium blue text on a slightly darker blue background.


There are many free resources that provide information about effective color contrast including:
- Guidelines for effective color contrast (link resides outside of ibm.com) from Lighthouse International.
- Safe Web colors for Color-deficient Vision (link resides outside of ibm.com) from BT Exact that provides information on color combinations.
- Vischeck (link resides outside of ibm.com)a tool that simulates colorblindness.
- Colour Contrast Analyser (link resides outside of ibm.com), a tool from Juicy Studio that checks foreground and background color combinations for sufficient contrast based on the W3C colour contrast algorithm.
Testing techniques
Test the application to ensure that it complies with accessibility requirements.
Tools
No tools are required to test this checkpoint.
Techniques
| Action | Result | |
|---|---|---|
| 1. |
Verify text and images with color using the following methods.
|
Pass:
Fail:
|
| 2. |
This step applies only if the application uses the Web interface. Test the Web application color images by turning off images in the browser. If the color of the image is significant to understanding the page, then the alternate text associated with the image should provide enough information to make the page usable. For example, if the page instructions say "press the red button", then the alternative text should say "red button". Use the appropriate configuration dialogs for your Web browser to turn off images. Instructions for Microsoft Internet Explorer are listed below.
|
Pass:
Fail:
|
©2001, 2008 IBM Corporation
Last updated February 08, 2008.

