Avoid Using Color Alone

Relying on color alone to communicate information causes barriers to access for many readers: colorblind and low vision users may not be able to perceive the color differences, and screen readers do not announce colors to non-sighted readers.

Best Practices

  • Have a secondary indicator that text is linked: not just another color, but also underlined, or bold, or placed on a color background.
  • When differentiating elements in charts and graphs, do not just change the color, also change shapes, patterns or the like, or provide some other other visual differentiation like direct segment labels.
  • Provide a text alternative for very complicated charts and graphics.

Don't do This

example line chart where each line is a different color

Why Is This Wrong?

The only way to correlate the data series to the values in the line graph is through color, and no text alternative is available (the alt text on the image reads: "line chart of color contrast vs background color")

Without color perception, these issues become starkly apparent:

in grayscale the lines on the example chart are indiscernible

Do This

example line chart where each line has different vertex shapes and patterns
Color Contrast on White Contrast on Black
Princeton Orange 3:1 5.7:1
Cool Blue 3:1 7:1
Vivid Blue 6.7:1 3:1
Dark Red 7:1 3:1

Why Is This Right?

Many alternatives to color are visible here:

  1. The lines are differentiated by vertex point shape and a hash pattern as well as color.
  2. The labels are visually linked to their lines.
  3. A purely text alternative is provided with the source data.

Using markers in the line graphs that correlate to the series legends provides a visual redundancy and no longer relies on color alone to communicate information. Adding the data table as a text equivalent actually renders the graphic as decorative content as well. 

Here is the same chart in black and white:

in grayscale, differences in shapes and pattern remain visible

It may not be easy to understand this without color, but it is certainly possible to locate lines based on shape and label proximity and then track them to their opposing matching vertex shape. But providing the table means a user presented with this challenge, or a screen reader user, could simply skim the table instead.

Testing for Accessibility

Test

There are no automated or programmatic tests for this requirement; you simply have to review your content and design to ensure you do not have any items (like charts and graphs) that rely on color as the sole means of communication.

Applicable WCAG Success Criteria

Resources