Techniques for WCAG 2.0

On this page:

-

# G14: Ensuring that information conveyed by color differences is also available in text

## Applicability

All technologies that support color and text.

This technique relates to:

- Success Criterion 1.4.1 (Use of Color)
  - How to Meet 1.4.1 (Use of Color)
  - Understanding Success Criterion 1.4.1 (Use of Color)

## Description

The objective of this technique is to ensure that when color differences are used to convey information, such as required form fields, the information conveyed by the color differences are also conveyed explicitly in text.

## Examples

### Example 1: A color-coded schedule

The schedule for sessions at a technology conference is organized into three tracks. Sessions for Track 1 are displayed over a blue background. Sessions in Track 2 are displayed over a yellow background. Sessions in Track 3 are displayed on a green background. After the name of each session is a code identifying the track in text: T1 for Track 1, T2 for Track 2, and T3 for Track 3.

### Example 2: A color-coded schedule with icons

The schedule for sessions at a technology conference is organized into three tracks. Next to the title of each session is a colored icon showing what track it belongs to: blue icons represent track 1, yellow icons represent Track 2, and green icons represent Track 3. Each icon is associated with a text alternative reading "Track 1," "Track 2," or "Track 3," as appropriate.

### Example 3: A form with required fields

A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that "all required fields are displayed in red and marked with an asterisk *", followed by an example.

Note: Asterisks may not be read by all screen readers (in all reading modes) and may be difficult for users with low vision because they are rendered in a smaller size than default text. It is important for authors to include the text indicating that asterisk is used and to consider increasing the size of the asterisk that is presented.

### Example 4: A form with a green submit button

An on-line loan application explains that green buttons advance in the process and red buttons cancel the process. A form contains a green button containing the text Go. The instructions say "Press the button labeled Go to submit your results and proceed to the next step."

## Resources

No resources available for this technique.

## Related Techniques

- G122: Including a text cue whenever color cues are used
- G138: Using semantic markup whenever color cues are used
- G182: Ensuring that additional visual cues are available when text color differences are used to convey information
- G183: 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

## Tests

### Procedure

For each item where a color difference is used to convey information:

1. Check that the information conveyed is also available in text and that the text is not conditional content.

### Expected Results

- Check #1 is true.

- Top
- Contents
- Intro
- Previous: Technique G13
- Next: Technique G15