Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Rationale
The purpose of this checkpoint is to ensure that color is not the only means of conveying information. If a Web page conveys information by color alone, users who cannot identify or distinguish colors are unable to use the information. For example, asking users to click the red button is not useful if they cannot distinguish the red button from other buttons on the page. Web pages should provide another method for making the information available.
Note: This checkpoint does not apply to links that change color after activation. Users can adjust the color of links in their browser. This checkpoint also does not apply when color is used to indicate the location of a mouseover focus on a navigation bar or within a Web site. Color used as redundant information is acceptable and encouraged.
Required development and unit test techniques
To comply with this checkpoint, you must meet one of the following techniques.
These techniques are defined in WCAG 2.0 Level A Success Criterion 1.4.1
(link resides outside of ibm.com)
.
- Color of words: If using the color of particular words to indicate information, ensure that color-coded information is also available in text.
- Text cue: If using color of particular words to indicate information, include a text cue when color cues are used.
- Color and pattern: If using color within an image to convey information, use color and pattern (for example, colors on bar/pie charts with lines or texture fills).
- Color in images: If using color within an image to convey information, ensure that color-coded information is also present in text.
- Color contrast: If using color solely to identify links or controls, use a contrast ratio of 3:1 on surrounding text and provide additional visual cues on focus.
- Additional cues: If using text color differences to convey information, ensure that additional visual cues are available.
Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.
General examples
-
Color of words: If using the color of particular words to indicate information, ensure that color-coded information is also available in text.
To comply with this technique, you must implement the following example.
General example 1
Ensure that color-coded information is also available in text. For example, the list item displayed in red below indicates a racer who qualified for the Olympic team. This item is also displayed in bold text as a redundant cue to the red color. Bold, red text is not sufficient to make the content accessible.
These are the results of the race. Racers listed in red also made the Olympic team.
- John Doe
- Jack Sprat
- Billy Bob
To make the example accessible, 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
For additional information, refer to the WCAG 2.0 examples of ensuring color-coded information is also available in text (link resides outside of ibm.com).
Required unit tests for general development technique 1
Manually perform the following unit test.
- Identify any text or words on the Web page that conveys information by color, such as Click the big red button.
- Follow the configuration instructions for removing color from text and images on the Web page.
- For such cases, verify that a textual identification is also provided, to enable a user to find the element in the absence of the color (for example, "click the big red Go button.").
-
Text cue: If using color of particular words to indicate information, include a text cue when color cues are used.
To comply with this technique, you must implement the following example.
General example 2
Include a text cue when using color cues. In the example below, the asterisk is used in addition to the color red to indicate required fields.
For additional information, refer to the WCAG 2.0 examples of using text cues for colored form control tables (link resides outside of ibm.com).
Required unit tests for general development technique 2
Refer to the required unit tests for general development technique 1.
-
Color and pattern: If using color within an image to convey information, use color and pattern (for example, colors on bar/pie charts with lines or texture fills).
To comply with this technique, you must implement all of the WCAG 2.0 examples of using colors and patterns (link resides outside of ibm.com).
Required unit tests for general development technique 3
Perform the following unit test using a Web syntax analysis tool or a screen reader.
- Use the tools available for the technique to identify any non-text elements on the page where color or color and pattern are used to convey information (such as images, charts, graphs, or illustrations) in the Web application content.
- Follow the configuration instructions for removing color from text and images in the Web page.
- In the absence of color, verify that information originally conveyed using color and pattern is now conveyed by patterns that do not rely on color. In turn, each pattern should be distinct to indicate uniqueness when required to convey the original information.
-
Color in images: If using color within an image to convey information, ensure that color-coded information is also present in text.
To comply with this technique, you must implement all of the WCAG 2.0 examples of ensuring that information conveyed by color differences is also conveyed in text (link resides outside of ibm.com).
Required unit tests for general development technique 4
Refer to the required unit tests for general development technique 1.
-
Color contrast: If using color solely to identify links or controls, use a contrast ratio of 3:1 on surrounding text and provide additional visual cues on focus.
To comply with this technique, you must implement all of the WCAG 2.0 examples of using a contrast ratio of 3:1 on text and providing visual cues (link resides outside of ibm.com).
Required unit tests for general development technique 5
Perform the following unit test using a Web syntax analysis tool or a screen reader.
Use the tools available for the technique to identify any content where color is used to solely identify links or controls and verify the following:
- The relative luminance (link resides outside of ibm.com) of the color of the text differs from the relative luminance of the surrounding text by a contrast ratio of at least 3:1.
- Mouseover and keyboard focus causes a visual enhancement, such as an underline, font change, and so on.
-
Additional cues: If using text color differences to convey information, ensure that additional visual cues are available.
To comply with this technique, you must implement all of the WCAG 2.0 examples of using more visual cues when color is used to convey information (link resides outside of ibm.com).
Required unit tests for general development technique 6
Perform the following unit test using a Web syntax analysis tool or a screen reader.
Identify content where text color differences are used to convey information technology and verify the following:
- When text color differences convey information, the text should have a style or a font that is visually distinct from surrounding text and there should be additional redundant visual cues other then color.
©2011, 2013 IBM Corporation
Last updated January 1, 2013.
W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.