How to Check WCAG Color Contrast (2026)
Color contrast is the foundation of visual accessibility. If text does not have enough contrast against its background, people with low vision, color blindness, or anyone using a screen in bright sunlight cannot read your content. WCAG (Web Content Accessibility Guidelines) defines specific contrast ratios that ensure readability for the widest possible audience.
- Check color contrast ratios for WCAG 2.
- What Is Contrast Ratio?.
- Covers wcag aa vs aaa requirements.
- Covers testing your color combinations.
- Covers fixing failing contrast.
What Is Contrast Ratio?
Contrast ratio measures the relative luminance (perceived brightness) difference between two colors. The scale goes from 1:1 (no contrast — two identical colors) to 21:1 (maximum contrast — pure black on pure white).
The calculation uses relative luminance, which accounts for how human eyes perceive different wavelengths. Green appears brighter than blue at the same intensity because our eyes have more green-sensitive cones. The formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
A contrast ratio of 4.5:1 means the lighter color is 4.5 times as luminous as the darker color. This sounds technical, but the practical result is simple: higher ratios mean easier-to-read text.
WCAG AA vs AAA Requirements
WCAG Level AA is the standard compliance target. It requires 4.5:1 contrast for normal text (under 18px regular or 14px bold) and 3:1 for large text (18px+ regular or 14px+ bold). Most organizations and legal requirements target Level AA.
-webkit-backdrop-filter alongside backdrop-filter for Safari support. Without the prefix, the effect is invisible to roughly 25% of mobile users.WCAG Level AAA is the enhanced standard. It requires 7:1 for normal text and 4.5:1 for large text. This provides better readability but is harder to achieve while maintaining brand aesthetics. Consider AAA for body text and AA for UI elements.
Non-text elements like icons, form field borders, and graphical objects need at least 3:1 contrast against adjacent colors. This requirement was added in WCAG 2.1 and is often overlooked.
Testing Your Color Combinations
Test every text-background combination in your design, not just body text on the page background. Button text on button backgrounds, link text on card backgrounds, placeholder text in input fields — each pairing needs to pass independently.
backdrop-filter inside a position: fixed element can cause severe scroll performance issues. Test thoroughly on real iOS devices.Do not forget hover states, focus indicators, and disabled states. A button that passes contrast in its default state might fail when hovered (lighter background) or disabled (lower text opacity).
Test with real content, not Lorem Ipsum. Different words create different visual patterns — thin characters (i, l, 1) are harder to read at low contrast than wide characters (m, w, @). If thin characters are legible, everything is.
Fixing Failing Contrast
If a color pair fails: darken the text, lighten the background, or both. Small adjustments often fix the issue — shifting from #767676 (4.48:1, fails AA) to #757575 (4.6:1, passes) is imperceptible visually but crosses the compliance threshold.
Use your brand colors as accents, not as text colors if they fail contrast. A brand blue that fails as text color can work as a button background with white text, or as a border/icon color that does not need to meet text contrast ratios.
Consider separate color values for light and dark themes. A color that passes on white might fail on dark gray. The WCAG Contrast Checker and Accessible Palette Generator let you test against both backgrounds simultaneously.