Use color as an enhancement, not as the only way to convey information or indicate an action.


Rationale

Color can be useful in highlighting actions for a visual display, however if a user cannot identify or distinguish colors they will not be able to use the information. The software needs to provide another way of making the information available. For example, an application that asks users to press the green button is not accessible since some users cannot distinguish the green button from other buttons on the screen. To make it accessible, add a text label such as "Submit" on the green button and ask users to press the green "Submit" button. Consequently the green will be an enhancement to the visual display and the "Submit" label will provide the information to users who cannot identify or distinguish colors.


Required development techniques

Use one or more of the following techniques to meet Checkpoint 4.2 from the IBM Software Accessibility Checklist:

  1. If the color of a particular word is used to indicate information, ensuring that color encoded information is also available in text.
  2. If color of particular words is used to indicate information, including a text cue whenever color cues are used.
  3. If color is used within an image to convey information, using color and pattern (for example, colors on bar/pie charts with lines or texture fills).
  4. If color is used within an image to convey information, ensuring that color encoded information is also available in text.
Examples of required development techniques

1. If the color of a particular word is used to indicate information, ensuring that color encoded information is also available in text.

In the following 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. Putting the text in bold is not sufficient to make it accessible.

Example 1

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.

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

Example 2

In Lotus Notes, unread documents are displayed in the color red and with an asterisk.

Screen shot from Lotus Notes Mail showing red text and asterisk used for unread mail items, and black text with no asterisk for read mail items.

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

Examples for this technique are under development.

4. If color is used within an image to convey information, ensuring that color encoded information is also available in text.

Example 3

]]>

If a green button indicates that the information is correct and can be submitted, add the text label "Submit" to the button. If a red button indicates an error and the action is not ready to be submitted, add the text "Error" to the button.

Required test techniques

Test the software to ensure that it complies with accessibility requirements.

Required test software

No additional software is required to test this checkpoint.

Test techniques

One or more of following techniques are required to verify this checkpoint:



Action Results

1.

If the application uses color, visually inspect the screen and verify color is not the only way to identify or distinguish information.

Pass:

Fail:

2.

If the application uses color, print a copy of the screen in black and white to verify color is not the only way to identify or distinguish information.

Pass:

Fail:

example using the color red to identify required fields on a form

©2009, 2013 IBM Corporation

Last updated January 1, 2013.