Provide Strong Color Contrast

When we talk about color, we talk about three different things:

  • Hue (red, green, blue)
  • Saturation (pastel, bold)
  • Brightness (closer to white, closer to black)

When it comes to accessibility, it is important to remember that only brightness is visible to all users. Changes in hue and saturation may not be apparent to readers who are color blind or low vision, and may disappear entirely when viewed in grayscale on devices with "digital wellness" settings that desaturate the screen in the evening.

In practice that means three things:

  • Make sure selected colors for fonts and graphic elements have a lot of contrast against their background (most common issues: white backgrounds with Princeton orange or gray text).
  • When using colors to differentiate between things (e.g., different parts of a chart or a link and its surrounding text), do not rely on color alone to differentiate elements the two elements -- underlined text, hatched patterns, outlines and labels, etc.
  • Check your work! Use an automatic color checker like Color Contrast Analyser or WAVE.

Don't do This

Insufficient Color Contrast

A sample 25/75 pie chart and text each showing insufficient contrast to be legible

Why Is This Wrong?

  1. For people who are colorblind or are using grayscale devices (e.g., for "digital wellness" in the evening or due to migraines), red and green color hues may not be visible, so it is only the difference in brightness (the "contrast") that remains. Since these red and green colors are the same, no contrast remains without the hues.
  2. Princeton Orange (#e77500) is a fairly light color; like light gray and yellow, it does not have enough contrast on black. It is also the same brightness as the gray around it, so this link will be invisible to low vision and colorblind readers.

Note that explaining the image in its alternative text only helps non-sighted users; alternative text is invisible to the users with low vision, who need the increased contrast.

Here is the exact same image in black and white:

in grayscale all the colors are identical, so the pie chart divisions and link cannot be seen

Do This

Sufficient Color Contrast

labels are shown inside pie chart segments, and there is now a dark background behind the orange text

Why is This Right? 

  1. Using a secondary indicator to associate labels with chart elements means the color of the bar or segment no longer matters. In this case, the labels have been placed inside outlined segments; for line charts using different dash patterns or dot shapes could accomplish the same.
  2. Princeton orange is fine on black. And underlining the link means it can be easily detected, even if the contrast ends between the link and the text is not very strong.

Here is the same chart in black and white:

in grayscale, all text remains legible, and the labels can still be matched with their segments

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

Resources