Color contrast is one of the most commonly failed WCAG success criteria — and one of the most frequently cited violations in ADA website lawsuits. The rule seems simple: text must be readable against its background. But the specific requirements trip up designers and developers who prioritize aesthetics over accessibility.
WCAG 2.1 Success Criterion 1.4.3 (Minimum Contrast) requires that normal text have a contrast ratio of at least 4.5:1 against its background. Large text — defined as 18pt or 14pt bold — requires at least 3:1. This applies to text rendered in images as well as live text. Decorative text, logotype text, and text that is part of inactive interface components are exempt. But virtually every piece of readable content on your website needs to meet the 4.5:1 threshold.
Contrast ratio compares the relative luminance of two colors on a scale from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white). The formula uses the relative luminance of each color, which accounts for how the human eye perceives different wavelengths of light. You do not need to calculate this manually — contrast checker tools do the math automatically. Enter your text color and background color hex values and the tool returns the ratio.
Light gray text on white backgrounds is the most frequent failure — popular in modern minimalist design but often failing the 4.5:1 threshold. A common offender is #999999 gray text on white (#FFFFFF) which achieves only 2.85:1. Blue text on white backgrounds often fails when lighter blues are used for aesthetics. Placeholder text in forms is frequently too light. White text on colored backgrounds can fail if the background color is not dark enough. Yellow or light-colored text on light backgrounds almost always fails.
Several free tools check color contrast. The WebAIM Contrast Checker lets you enter two hex colors and immediately see the ratio and whether it passes. Chrome DevTools includes a built-in contrast checker in the inspector. The axe browser extension flags contrast failures automatically. ADAWebPro's automated scan checks contrast across your website pages and flags violations in the report. Running a free scan is the fastest way to see how many contrast violations your site currently has.
For text on white or light backgrounds, darken the text color until the ratio reaches 4.5:1. Most design systems can accommodate this without dramatically changing visual appearance — moving from #999999 to #767676 on white passes at exactly 4.54:1. For colored background situations, either darken the background or lighten the text until the ratio passes. If brand colors are causing failures, create a slightly darker or lighter variant specifically for text use. Document all color combinations in your design system to prevent future violations.
WCAG Level AAA requires 7:1 contrast for normal text and 4.5:1 for large text — significantly stricter than the AA requirement. While Level AAA is not the legal standard for ADA compliance, targeting AAA ratios provides a larger buffer against edge cases and ensures readability in varying screen conditions. Many accessibility-focused design systems target 7:1 or higher as their default text color standard.
Free WCAG 2.1 AA scan. 60 seconds. No signup required.
Free WCAG 2.1 AA scan. Results in 60 seconds. No signup required.