Techniques for WCAG 2.0

On this page:

-

# G111: Using color and pattern

## Applicability

All technologies that support images.

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 within non-text content, patterns are included to convey the same information in a manner that does not depend on color.

## Examples

### Example 1

A real estate site provides a bar chart of average housing prices in several regions of the United States. The bar for each region is displayed with a different solid color and a different pattern. There is sufficient contrast between the solid and pattern colors to meet Success Criterion 1.4.1. The legend uses the same colors and patterns to identify each bar.

### Example 2

An on-line map of a transportation system displays each route in a different color. The stops on each route are marked with a distinctive icon such as a diamond, square, or circle to help differentiate each route.

### Example 3

A flow chart describes a set of iterative steps to complete a process. It uses dashed, arrowed lines with a green background to point to the next step in the process when the specified condition passes. It uses dotted arrowed lines with a red background to point to the next step in the process when the specified condition fails. There is sufficient contrast between the line and background colors to meet Success Criterion 1.4.1.

### Example 4

The content includes an interactive game. The game pieces for the 4 players are distinguished from one another using both color and pattern.

## Resources

No resources available for this technique.

## Related Techniques

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

## Tests

### Procedure

For each image within the Web page that use color differences to convey information:

1. Check that all information that is conveyed using color is also conveyed using patterns that do not rely on color.

### Expected Results

- Check #1 is true.

- Top
- Contents
- Intro
- Previous: Technique G110
- Next: Technique G112