Accessibility·free · no signup

WCAG Validator

Validate a whole set of text colors against a single background at once — see which clear AA and AAA for normal and large text.

Background
#
Aa
4.55
AA
✕AAA
AA
Aa
18.17
AA
AAA
AA
Aa
9.21
AA
AAA
AA
Aa
3.93
✕AA
✕AAA
AA

How to use the WCAG Validator

The validator takes your full set of colors and computes the WCAG contrast ratio for each foreground-on-background combination, then checks every result against the AA and AAA thresholds for normal and large text. The output is a matrix that flags which pairings are safe to use together and which fall short.

  1. 1
    Enter your color system

    Add all the colors in your palette or design tokens (text, surfaces, accents).

  2. 2
    Review the grid

    See a pass/fail matrix of every pair with its exact ratio and AA/AAA status.

  3. 3
    Resolve failures

    Adjust the colors that fail, or note which pairings should be avoided in your usage guidelines.

Frequently asked

How is this different from the contrast checker?
The contrast checker compares one pair at a time; the validator tests an entire palette of pairings at once and reports them as a grid.
What WCAG levels does it check?
It evaluates AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) for each color pair.
Why do some pairs pass for large text but fail for normal text?
Large text has a lower required ratio (3:1 for AA), so a pair between 3:1 and 4.5:1 is fine for headings but not body copy.
Should every color in my palette pass against every other?
No — only the pairs you actually place together (like text on a surface) need to pass. Decorative-only colors that never carry text are exempt.

More accessibility

Contrast Checker
Check WCAG AA/AAA contrast ratios between any two colors for accessibility.
Color Blindness Simulator
See how your colors look to colorblind users (deuteranopia, protanopia and more).