WCAG Color Checker

Check whether two colors meet WCAG 2.1 accessibility requirements. Enter a foreground and background to get an instant AA/AAA pass or fail.

Overview

WCAG Color Checker tells you whether a foreground/background pair meets WCAG 2.1's color-contrast success criteria — 1.4.3 (text), 1.4.6 (enhanced/AAA), and 1.4.11 (UI components) — with the exact ratio and a clear pass/fail for each level. It's the same engine as Contrast Checker, framed around compliance sign-off rather than general design exploration.

Key Features

  • Instant WCAG 2.1 AA and AAA pass/fail verdicts
  • Separate checks for normal text, large text, and UI components
  • Exact contrast ratio, not just a pass/fail badge
  • Screen-reader-friendly result announcements
  • Deeplinkable via ?fg= and ?bg= URL parameters

Common Use Cases

  • Accessibility sign-off — Confirm a specific color pair meets WCAG AA before a design ships or a compliance review.
  • Documenting compliance — Get the exact ratio to cite in an accessibility audit or VPAT.

How It Works
1

Enter your two colors

Pick or type the text color and the background it sits on.

2

See the WCAG verdict

Get a clear pass/fail for AA and AAA at once, with the exact ratio underneath.

3

Fix what fails

Apply a suggested readable color, or open the pair in the Color Editor to adjust it.

Frequently Asked Questions

What does WCAG require for color contrast?
WCAG 2.1 Success Criterion 1.4.3 requires 4.5:1 for normal text at AA (3:1 for large text), and 1.4.11 requires 3:1 for UI components and graphical objects. AAA (1.4.6) raises normal text to 7:1.

Does this check every WCAG accessibility requirement?
No — this checks color contrast only (SC 1.4.3, 1.4.6, and 1.4.11). WCAG compliance also covers things like keyboard navigation, alt text, and semantic structure, which this tool doesn't evaluate.

Is this the same as a contrast checker?
Yes — this page frames the same calculation around WCAG compliance specifically. See Contrast Checker for the same tool with a general-purpose framing.

Related Tools

Accessible Palette Generator Accessible Text Color Finder Brand Palette Accessibility Checker Color Blindness Simulator Color Converter Color Editor