Web Accessibility: Understanding Colors and Luminance (MDN Web Docs)
MDN’s guide to how luminance, rather than hue, drives perceptible contrast, and the practical design consequences that follow from that distinction.
License: CC BY-SA 2.5+ (Mozilla Contributors).
Key points
- Luminance contrast, not color contrast, drives legibility. WCAG’s contrast-ratio formula is a luminance calculation (relative brightness normalized 0–1); it’s the luminance difference between two colors — not their hue difference — that makes them distinguishable, including for people with color vision deficiency.
- Blue is inherently a low-luminance color. It reads poorly as the lighter half of a two-color pairing; make blue the darker color in a pair, or add green to a light blue to raise its luminance and restore legibility.
- A transition to or from a saturated red carries an independent seizure risk, regardless of luminance or overall brightness (citing Harding et al. 2005).
- A color pair’s immediate surroundings shift its perceived contrast beyond what the calculated ratio predicts — the same blue text on a gray highlight reads differently depending on whether that highlight itself sits on a black or a white background.
- Large text tolerates a lower minimum contrast ratio than small text, per WCAG’s own size-based thresholds.
- Dark adaptation is slow (minutes) while light adaptation is faster but can be uncomfortable — a design can respond to a user’s actual viewing/contrast preference rather than assuming one fixed condition.