- Ensure that all information conveyed with color is also conveyed in the absence of color.
Rationale
If the 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 Web page 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. Most graphical browsers allow users to override the color of text on the Web page, but users have no control over the color or contrast of images that contain text.
Please Note: This checkpoint for color does not apply to links changingcolor 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.
Techniques
The following technique is the minimum required to meet Checkpoint 12 from the IBM Web Accessibility Checklist.
Context and markup
When color is used to convey important information, also use context and markup to convey the same information.
In this example, 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
Recommended techniques
The technique above is required; the following technique is recommended to enhance accessibility:
Images with Color Contrast
On an image containing 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 from Lighthouse International.
- Vischeck a tool that simulates colorblindness.
- Colour Contrast Analyser, a tool from Juicy Studio that checks foreground and background color combinations for sufficient contrast based on the W3C colour contrast algorithm.
Testing
Test the Web site to ensure that it complies with accessibility requirements.
Tools
- No tools are required, but a tool that will display the page in shades of gray (such as Grayscale the Page) can be used.:
Techniques
The following technique is required to verify this checkpoint:
| Action | Result | |
|---|---|---|
| 1 |
Test text and images with color using one of the following methods:
|
Pass:
|
| 2 |
Test color images by turning off images in the browser. In Microsoft Internet Explorer follow these steps:
|
Pass: Images with color have alternative text that conveys the meaning of the image. For example, if the instructions say "press the red button", the alternative text is "red button". Fail: Images with color do not have sufficient alternative text, so they are not discernible without color. |
®2001, 2008 IBM Corporation
Last updated January 17, 2008.