How to Check Color Contrast for WCAG Compliance
Color contrast is the difference in luminance between foreground text and its background. WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios to ensure text is readable for people with low vision or color deficiencies. Failing contrast means real users can't read your content.
- Test your color combinations against WCAG 2.
- Covers wcag aa vs aaa contrast requirements.
- How Contrast Ratios Are Calculated.
- Covers common contrast failures.
- How to Fix Low Contrast.
WCAG AA vs AAA Contrast Requirements
WCAG defines two compliance levels. AA is the minimum standard required by most accessibility laws: 4.5:1 for normal text (under 18px/14px bold) and 3:1 for large text (18px+ or 14px+ bold). AAA is the enhanced standard: 7:1 for normal text and 4.5:1 for large text. Most organizations target AA. AAA is recommended for critical content like body text on healthcare or government sites. UI components and graphical objects require a minimum 3:1 contrast ratio against adjacent colors.
How Contrast Ratios Are Calculated
The contrast ratio is calculated from the relative luminance of two colors. Relative luminance measures a color's brightness on a scale from 0 (black) to 1 (white), weighted for human perception — green contributes more to perceived brightness than red, which contributes more than blue. The formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker. The result ranges from 1:1 (identical colors) to 21:1 (black on white). You don't need to calculate this manually — the Contrast Checker tool does it instantly.
Common Contrast Failures
Light gray text on white backgrounds is the most frequent failure — designers love the aesthetic, but #999 on #FFF only achieves 2.85:1 (fails AA). You need at least #767676 on white for AA compliance. Other common failures include colored text on colored backgrounds (blue on purple, orange on yellow), placeholder text in form inputs (often set too light), and text over images without a background overlay. Buttons with white text on bright brand colors also frequently fail.
background-size animation or @property registered custom properties instead.How to Fix Low Contrast
When a color pair fails, you have three options: darken the text color, lighten the background, or add a semi-transparent overlay between text and a background image. Adjust the lighter color first — small changes to a light color have a bigger impact on contrast than the same adjustment to a dark color. For text over images, add a dark overlay (rgba(0,0,0,0.5) or higher) behind the text. The Contrast Checker shows the exact ratio as you adjust colors, so you can find the minimum change needed to pass.
Testing Workflow
Check contrast during design, not after development. In Figma, use a contrast plugin on every text layer. For existing sites, run a full-page audit with browser DevTools (Chrome's CSS Overview captures every text/background pair). Then use the Contrast Checker for specific pairs you need to adjust. Test both light and dark modes — a color pair that passes in light mode often fails in dark mode because the background/foreground relationship inverts.