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
Why Is This Wrong?
- 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.
- 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:
Sufficient Color Contrast
Why is This Right?
- 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.
- 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:
Testing for Accessibility
- 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
- Color is not the only visual means of conveying information (1.4.1)
- Text and images of text have a contrast ratio of 4.5:1 (with certain exceptions; 1.4.3)
- Visual information required to identify user interface components and states...have a contrast ratio of at least 3:1 against adjacent color(s). 1.4.11