Skip to main content

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.

On this page:

Rationale

Required development techniques

Required test techniques



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.

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.

Back to top

Required development techniques

Compliance with this checkpoint requires all of the following techniques be met.

These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 1.4.1 (link resides outside of ibm.com).

  1. Color of words: If the color of particular words is used to indicate information, ensure that color encoded information is also available in text.
  2. Text cue: If color of particular words is used to indicate information, include a text cue whenever color cues are used.
  3. Color and pattern: If color is used 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 color is used within an image to convey information, ensure that color encoded information is also available in text.
  5. Color contrast: If color alone is used to identify links or controls, use a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus.
  6. Additional cues: If text color differences are used to convey information, ensure that additional visual cues are available.

Examples for General developers

1. Color of words: If the color of particular words is used to indicate information, ensure that color encoded information is also available in text.

To comply with this technique, the following example must be implemented.

Example 1

Ensure that color encoded information is also available in text.

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. Putting the text in bold is not sufficient to make it 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 WCAG 2.0 examples for ensuring color information is available in text (link resides outside of ibm.com).

2. Text cue: If color of particular words is used to indicate information, including a text cue whenever color cues are used.

Example 2

Include a text cue whenever color cues are used.

Shows how the asterisk is used in addition to the color red to indicate required fields.

For additional information, refer to WCAG 2.0 examples for including a text cue (link resides outside of ibm.com).

3. Color and pattern: If color is used within an image to convey information, use color and pattern (for example, colors on bar/pie charts with lines or texture fills).

For examples of this technique, refer to WCAG 2.0 examples for using color and pattern (link resides outside of ibm.com).

4. Color in images: If color is used within an image to convey information, ensure that color encoded information is also available in text.

For examples of this technique, refer to WCAG 2.0 examples for color coded information in text (link resides outside of ibm.com).

5. Color contrast: If color alone is used to identify links or controls, use a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus

For examples of this technique, refer to WCAG 2.0 examples for using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them (link resides outside of ibm.com).

6. Additional cues: If text color differences are used to convey information, ensure that additional visual cues are available.

For examples of this technique, refer to WCAG 2.0 examples for ensuring that additional visual cues are available when text color differences are used to convey information (link resides outside of ibm.com).

Back to top

Required test techniques

The following manual test techniques are required to test this checkpoint.

  1. Required accessibility verification test techniques

Required accessibility verification test techniques:

Use the following accessibility verification test (AVT) techniques to validate the Web content. It is recommended that these tests be performed in order.

1. Manual test:
Action Result

Verify the compliance criteria for this technique as follows.

  • Identify any text or words on the Web page that conveys information by color. (E.g., click the big red button.)
    • Configure browser to ignore colored text in Web pages. (For instructions, see below.)
    • Verify that a textual identification is also provided, to allow a user to find the element in the absence of the color (E.g., Click the big red Go button.).
    • Verify that if text color differences are used to convey information the text is also styled or uses a font that makes it visually distinct from other text around it to provide additional visual cues.
  • If color alone is used to convey information about text:
    • Verify that 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.
    • Verify that pointing (mouse over) and keyboard focus causes a visual enhancement (such as an underline, font change, etc.)
  • Identify any nontext elements on the Web page where color, or color and pattern are used to convey information (such as images, charts, graphs, or illustrations) in the Web application content.
    • Remove the color from the images on the Web pages. (For instructions, see below.)
    • In the absence of color, Verify that any information originally conveyed using color and pattern is now conveyed by patterns, with each pattern different to indicate uniqueness when required to convey the original information.
    • In the absence of color, verify that any information originally conveyed by color is also provided via text.

(For better understanding see the required development technique examples above.)

Pass:

  • All applicable compliance criteria in the action column to the left are verified to be true.

Fail:

  • Any failure from applicable compliance criteria in the action column to the left.
Additional instructions for the above test techniques:
To configure the browser to ignore colored text:

For Microsoft Internet Explorer™:
  1. Select the "Internet Options" item in the Tools menu pulldown.
  2. On the General tab, select the "Accessibility" button.
  3. Check the box labeled "Ignore Colors Specified on Web Pages", and click OK.
  4. On the General tab, select the button labeled "Colors" and ensure that the checkbox "Use Windows" is checked.
  5. Select OK to save changes.

For Firefox:
  1. Select the "Options" item in the Tools menu pulldown.
  2. On the General tab, select the "Accessibility" button.
  3. Check the box labeled "Ignore Colors Specified on Web Pages", and click OK.
  4. On the Content tab, select the button labeled "Colors" to display the Colors dialog.
  5. Check the checkbox labeled "Use system colors".
  6. Uncheck the checkbox labeled "Allow pages to choose their own colors, instead of my selections above".
  7. Select OK to save changes.


To remove color from images on a Web page:

For Microsoft Internet Explorer™:
  1. Use a tool to take away colors in images displayed in IE.
  2. Another alternative is, print the page in "black & white" mode and use the printout for the test.
For Firefox:
  1. Print the page in "black & white" mode and use the printout for the test (Firefox does not provide a method of displaying web page images without color).

Back to top

©2009 IBM Corporation

Last updated May 28, 2009.

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.

Checkpoint 1.3g

Web checklist

Checkpoint 1.4b