Provide Strong Color Contrast

When we use a color picker, we are making three choices:

  1. Hue (red, orange, yellow, green...)
  2. Saturation (from pale/pastel to bold)
  3. Brightness (from light to dark)

When it comes to accessibility, it is important to remember that only brightness is visible to all users. Red text on a green background may disappear entirely for people who are color blind, have low vision, or are viewing the site in grayscale on an e-ink screen.

In practice that means three things:

  • Make sure color choices for fonts and graphic elements provide sufficient light/dark contrast against their background.
  • When using colors to differentiate between elements (e.g., a link and its surrounding text), do not rely on color alone to differentiate elements the two elements -- underline the link, use a hatched pattern or segment outline in a pie chart, etc.
  • Check your work! Use an automatic color checker like Color Contrast Analyser or WAVE.

 

About Princeton Orange...

On the Web, #e77500 is used on white and #f58025 on black. These combinations do not meet contrast requirements for small text. They can be used for non-text elements and visual distinctions between elements (borders, underlines, icons), but not for body content.

Large text (greater than 24px regular or 19px bold) is fine, as the requirements are less strict for large text. 

E77500 orange on white and f58025 orange on black

 

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