WCAG Color Contrast Studio

Analyze foreground and background color combinations against WCAG 2.1 Level AA and AAA standards. Use the 1-click Auto-Adjust fixer to compute the closest compliant shade.

Color Inputs

Test foreground and background pairings for WCAG 2.1 Level AA and AAA.

Text / Foreground Color

Background Color

Quick Brand Presets:

Calculated Contrast Ratio

7.70:1

WCAG AA Normal

Pass (4.5:1)

WCAG AA Large

Pass (3.0:1)

WCAG AAA Normal

Pass (7.0:1)

WCAG AAA Large

Pass (4.5:1)

Display Heading Example (24px Bold)

This is standard body paragraph text rendered at 14px. Ensuring sufficient contrast allows users with low vision, color blindness, or situational impairments (like glare on mobile screens) to comfortably read your content.

Interactive link text

📖 WCAG Success Criterion 1.4.3: Contrast (Minimum) requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt / 24px or 14pt / 18.66px bold).