Web checklist

Checkpoint 1.4a: Use of Color

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).

  1. Color of words: If using the color of particular words to indicate information, ensure that color-coded information is also available in text.
  2. Text cue: If using color of particular words to indicate information, include a text cue when color cues are used.
  3. 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).
  4. Color in images: If using color within an image to convey information, ensure that color-coded information is also present in text.
  5. 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.
  6. 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

  1. 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.

    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.

    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.

  2. 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.

  3. 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.

  4. 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.

  5. 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:

  6. 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:


©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.