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.