WCAG Color Contrast Requirements Explained

Color contrast is one of the most common WCAG violations -- and one of the easiest to fix. It is number two on our list of the 10 most common WCAG violations. WCAG 2.1 Level AA defines specific contrast ratios that text must meet against its background to be readable by people with low vision or color deficiencies. If your site fails contrast checks, it affects roughly 300 million people worldwide with color vision deficiencies.

The Contrast Ratio Rules

WCAG 1.4.3 (Contrast Minimum) defines two thresholds:

• Normal text -- 4.5:1 contrast ratio minimum. This applies to all text under 18pt (24px) regular weight or under 14pt (18.66px) bold.
• Large text -- 3:1 contrast ratio minimum. Large text is defined as 18pt (24px) regular or 14pt (18.66px) bold and above.

WCAG 1.4.11 (Non-text Contrast) adds a third rule: UI components and graphical objects that convey information need a 3:1 contrast ratio against adjacent colors. This covers buttons, form inputs, icons, and charts.

The Most Common Failures

Light gray text on white backgrounds. The classic offender. A light gray (#999) on white (#fff) has a contrast ratio of only 2.85:1 -- well below the 4.5:1 requirement. Darkening to #767676 gets you exactly to 4.5:1.

Placeholder text. Most default placeholder colors fail contrast requirements. While WCAG does not require placeholder text to meet contrast standards (since it is not "real" content), accessible design practice is to ensure it is readable.

Text over images. Hero banners with white text over photographs are frequent violators. The contrast varies across the image, creating areas where text is unreadable. Use a dark overlay or text shadow to ensure consistent contrast.

Disabled states. Buttons and inputs in disabled states are exempt from contrast requirements under WCAG, but making them too low-contrast creates usability issues for everyone.

How to Check Contrast

You do not need to calculate ratios manually. These tools do it for you:

• Browser DevTools -- Chrome, Firefox, and Edge all show contrast ratios in the color picker when inspecting elements.
• WebAIM Contrast Checker -- Enter two hex colors and get the ratio plus pass/fail for AA and AAA.
• axe DevTools -- The browser extension flags contrast violations with specific element references.
• Litmus -- Scans every page and reports all contrast violations with the exact elements, current ratio, and required ratio.

Fixing Contrast Issues

The fix is straightforward: adjust either the text color or the background color until the ratio meets the threshold. A few practical tips:

• Start with your design system's color palette. Check every text/background combination before shipping.
• Use color contrast tools during design, not after development. Fixing colors in Figma is faster than fixing them in code.
• For text over images, add a semi-transparent dark overlay (e.g., background: rgba(0,0,0,0.5)) behind the text.
• Consider dark mode separately -- contrast requirements apply to both light and dark themes.

Beyond Minimum Compliance

WCAG Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. While AAA is not legally required, aiming for higher contrast improves readability for all users, especially on mobile devices in bright sunlight or for aging users with declining vision.

Color contrast is a quick win for accessibility. Run a scan with Litmus to find every contrast violation on your site, then fix them systematically. Most fixes take minutes and the impact on usability is immediate.