Color Considerations

Overview

Color is a powerful design tool, helps convey meaning, and draws attention to content. It must be used thoughtfully so it does not present a barrier to people with disabilities, such as those who are colorblind, have low vision, or use grayscale monitors.

Best Practices

  • Use sufficient color contrast.
  • Do not rely on color alone (or any single sense)

Use sufficient color contrast

The Web Content Accessibility Guidelines require that text - and images of text - provide a contrast ratio of at least 4.5:1.

The ratio for large text is 3:1. Large text is: 

  • 18pt (24px)
  • Or, at least 14pt (19px) and bold.

You must use a color contrast checker to determine the contrast ratio of the text color to the background color. You cannot determine it just by sight.

For example, Princeton orange, #E77500, is used on white and #F58025 on black. These combinations do not meet contrast requirements for small text, but they do for large text. They can also be used for non-text elements and visual distinctions between elements (borders, underlines, icons), but not for body content.

Princeton orange hex codes.

For non-text elements

The same contrast ratio for large text applies to non-text elements, such as buttons. There must be enough contrast between the text and non-text elements.

A screenshot of the TPGi color contrast analyzer.

The TPGi Color Contrast Analyzer is showing that this shade of orange on white passes the criteria for large text and non-text elements.

Do not rely on color alone

The Web Content Accessibility Guidelines require that color not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Present data in at least two different ways:

  • In addition to color, use shapes, patterns, or labels. For example, a line can be a color, but also dotted, to distinguish it from a solid line of a different color.

Example

This pie chart is representing data through the colors green and red, but what about people who are red/green colorblind? Or people who don't use color monitors?

A red and green pie chart.

For some, the red and green won’t have enough color contrast to be able to tell them apart. To correct this issue, add a unique pattern and labels to the chart to make it more clear.

A red and green pie chart where each slice has a label and a pattern.

Now when we remove color from the pie chart, the sections are still made clear with the pattern, the heavy outline, and the percent labels.

A greyscale pie chart. Each slice has a pattern and a label.

Testing for Accessibility

Test

Use automatic checkers like Color Contrast Analyser or WAVE to test your color choices.

  • Does all small text have at least a 4.5:1 contrast ratio?
  • Does all large text (19px bold or 24 px regular) have at least a 3:1 contrast ratio?

Applicable WCAG Success Criteria