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

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.

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.

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

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.

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

Pass:

Fail:

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

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