Why contrast matters
Low contrast text is hard to read for users with low vision, color blindness, or in bright sunlight. The Web Content Accessibility Guidelines define minimum contrast ratios between text and its background.
- A ratio is computed from the relative luminance of the two colors, ranging from 1 to 1 up to 21 to 1.
- AA requires at least 4.5 to 1 for normal text and 3 to 1 for large text.
- AAA is stricter at 7 to 1 for normal text and 4.5 to 1 for large text.
Large text means roughly 18 point, or 14 point bold, where thicker strokes stay legible at lower contrast.
Beyond text
- Meaningful non text elements like icons, form borders, and focus indicators need at least 3 to 1.
- Never rely on color alone to convey meaning. Pair a red error color with an icon or label so color blind users still get the message.
Test with a contrast checker, and remember that semi transparent overlays and hover states change the effective ratio.
Key idea
WCAG AA needs 4.5 to 1 for normal text and 3 to 1 for large text and UI elements, and you must never rely on color alone to carry meaning.