Color Contrast
Contrast ratios, WCAG thresholds, and how to fix failures
Color contrast is the ratio between the luminance of a foreground color (typically text) and its background. A higher ratio means more contrast. Sufficient contrast ensures text is readable for users with low vision, color blindness, or in challenging lighting conditions.
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Many more people have low vision or experience reduced contrast on low-quality screens or in bright light. Contrast failures affect a broad range of users.
WCAG minimum contrast ratios
| Text type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (below 18pt or 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components and graphical elements | 3:1 | - |
Black on white is 21:1. White on white is 1:1. The higher the number, the more contrast.
Common failures
Light gray text on white backgrounds - The most common failure. #999999 on white is 2.85:1 - fails AA. #767676 is the lightest gray that passes AA on white.
White text on medium-tone brand colors - A brand color that looks vivid may not provide sufficient contrast for white text. Medium blues, greens, and purples frequently fail.
Placeholder text in form inputs - Browsers default to low-contrast placeholder color. Treat placeholder text the same as any other text.
Text on images or gradients - Contrast varies across the image. The lowest-contrast area must still meet the threshold.
How to measure
In Chrome DevTools, click on any text element. In the Styles panel, click the color swatch next to the color property - the picker shows the contrast ratio and pass/fail status.
For manual spot checks: WebAIM Contrast Checker (opens in a new tab) - enter two hex values and see the ratio immediately.
Vesper Audit runs axe-core on every page and reports all contrast failures with exact element references and computed ratios.
How to fix
For most text: darken the text color, darken the background, or lighten the background. A few points of lightness adjustment often moves a failing ratio to passing without significantly changing the design.
If working with a design system or token set, fix contrast at the token level - not at the individual component level. A failing token appears across every component that uses it.
For text over images, use a translucent overlay behind the text to ensure sufficient contrast regardless of image content.