The degree of visual difference between elements, particularly between text and its background. Sufficient contrast is critical for readability and accessibility; WCAG requires a minimum 4.5:1 ratio for normal text and 3:1 for large text.
Common contexts
- Running a contrast audit on all text styles in a design system before a brand refresh ships
- Flagging a light gray placeholder text that passes aesthetically but fails WCAG AA
- Testing a dark mode palette to ensure all foreground-background pairs still meet minimum ratios when inverted
Use when
Check contrast ratios every time you introduce a new color pairing — at the token level when building a system, and at the component level before handoff. Use a dedicated contrast checker, not your eyes; the human visual system is notoriously unreliable at judging ratios in the 3:1 to 5:1 range.
Avoid when
Contrast ratios are a floor, not a target — a 4.5:1 ratio on small gray body text in a busy layout is technically compliant but functionally unreadable for many users. Don't use WCAG minimums as the design target; treat them as the absolute lower bound and aim higher wherever possible.
Good contrast is one of the cheapest accessibility improvements you can make — it costs nothing to check and nothing to fix in a token, but a failed audit after launch can cost weeks of remediation work.
Real-world examples
- Apple's iOS accessibility settings include an 'Increase Contrast' option that darkens background colours and removes transparency effects, improving readability for low-vision users.
- GOV.UK enforces a minimum 4.5:1 contrast ratio across all text and interactive elements as a hard design standard, making content accessible to users with low vision.
- Stripe's dashboard uses high-contrast typography (near-black on white) for data tables, ensuring financial figures are legible for users in bright-light or low-vision conditions.