What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt or 14pt bold) to ensure readability for users with visual impairments.

What is the difference between AA and AAA contrast?

AA (4.5:1 for normal text) is the legal minimum in most countries. AAA (7:1) is enhanced and recommended for critical content like legal documents or healthcare information.

How do I fix a failing contrast ratio?

Darken the foreground color or lighten the background color until the ratio meets 4.5:1. Use HSL color notation to adjust lightness while preserving the hue and saturation.

Does contrast affect SEO?

Not directly, but poor contrast affects accessibility scores in Lighthouse/Core Web Vitals audits, which can influence rankings. More importantly, low contrast reduces usability and conversion rates.

contrast

StudioLimb

Creative Suite

WCAG 2.1 Compliant

Contrast Checker

Accessibility Tool Premier

Text Color

Background Color

12.63

Contrast Ratio

Large Text Preview (18pt+)

Design requires contrast to convey meaning clearly.

Normal Text Preview (Base Size)

In order to be accessible, text must have a high enough contrast ratio against its background. The WCAG 2.1 guidelines specify algorithms to calculate this ratio and determine if it meets AA or AAA standards.

WCAG Color Contrast Checker — AA & AAA Compliance

Check the contrast ratio between any text and background color pair. Instant WCAG 2.1 AA and AAA compliance results for normal text, large text, and UI components.

help How to Use

Enter your text color as a hex code
Enter your background color as a hex code
See the contrast ratio and WCAG pass/fail results
Adjust colors until you reach compliance

check_circle WCAG Requirements

4.5:1 — normal text (AA minimum)
3:1 — large text & UI components (AA)
7:1 — normal text (AAA enhanced)
4.5:1 — large text (AAA enhanced)

tips_and_updates Common Fixes

Darken the text color — most effective fix
Add a subtle tint to the background
Increase font size or weight (lower threshold)
Avoid #999 or lighter on white backgrounds