What a WCAG contrast ratio measures
A contrast ratio compares the relative luminance of a foreground color and its background. It ranges from 1:1 for identical colors to 21:1 for black against white. The higher the ratio, the easier text is generally to distinguish from the surface behind it.
Contrast is one part of accessibility, not a complete accessibility audit. Font size, weight, spacing, state changes, icons, and the surrounding interface still matter. But checking the ratio early prevents a common, avoidable problem.
WCAG AA and AAA thresholds
| Content | AA minimum | AAA minimum |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Non-text UI components and graphics | 3:1 where the criterion applies | Review the relevant WCAG requirement |
In WCAG 2.x, “large text” generally means at least 24 CSS pixels (about 18 pt) or at least 18.66 CSS pixels bold (about 14 pt bold). Do not treat a slightly larger paragraph as large text: use the normal-text threshold unless the definition is clearly met.
How to check a color pair
- Identify the actual foreground and background colors used in the interface state.
- Check the ratio against the right threshold for the text size and target conformance level.
- Test the same component in hover, focus, disabled, dark-mode, and error states.
- Review the result in the final font, size, weight, and layout—not only on a color swatch.
A useful habit is to record approved text and surface pairs as design tokens. This prevents a one-off fix from drifting when the same component appears elsewhere.
Common contrast mistakes
- Testing the wrong background: translucent layers, gradients, and images can change the effective contrast.
- Only checking default state: links, buttons, placeholders, focus rings, and errors all need their own review.
- Relying on color alone: an error message should retain meaning through text, icons, or structure as well as color.
- Assuming a passing ratio fixes readability: very thin fonts or dense text can remain hard to read even when the ratio passes.
Check your colors locally
Open the free WCAG Contrast Check tool to test a foreground and background pair. It runs in the browser, requires no account, and does not upload your color values.
For formal compliance work, review the applicable WCAG success criteria and test the real product experience with people and assistive technology.