Free · No signup

WCAG Contrast Checker

Real WCAG 2.2 luminance maths. Instant AA and AAA pass-fail for normal and large text. The same engine that powers the full audit inside UX Companion.

Try it

Paste two colours, get an instant ratio. Computes the WCAG relative luminance ratio between text and background, grading for AA and AAA on normal (≥14px) and large (≥18px or 14px bold) text.

WCAG 2.2 · 1.4.3
Foreground · Text L: —
Background L: —
The quick brown fox
jumps over the lazy dog (14px body)
Pack my box with five dozen liquor jugs (12px small)
Contrast ratio
15.32:1
AA
Normal text
≥ 4.5:1 required
Pass
AA
Large text
≥ 3:1 required
Pass
AAA
Normal text
≥ 7:1 required
Pass
AAA
Large text
≥ 4.5:1 required
Pass
Want this paired with AI rationale across an entire page? Open the full audit →

What the numbers mean

WCAG defines contrast as a ratio between the relative luminance of two colours, on a scale from 1:1 (no contrast) to 21:1 (white on black). The minimum required ratio depends on the text size and the conformance level you're targeting:

Conformance & size
Min ratio
WCAG ref
AA · Normal text (under 18px)
4.5:1
1.4.3
AA · Large text (≥18px or 14px bold)
3:1
1.4.3
AAA · Normal text
7:1
1.4.6
AAA · Large text
4.5:1
1.4.6
UI components & graphical objects
3:1
1.4.11

What gets missed in real audits

Three patterns we see again and again across the audits run inside UX Companion:

Hover and active states

The default state passes; the hover state fails. Buttons that lighten on hover are particularly susceptible — designers often use a +10% lightness token, which can drop a 4.6:1 button to 3.2:1.

Placeholder text

Placeholders are usually styled as low-contrast grey on white. WCAG only requires 4.5:1 for the placeholder if it's conveying information not available elsewhere — but a lot of forms do convey field meaning through placeholder alone, which fails on a separate count (Labels or Instructions).

Text on imagery

Hero text on photographs. The contrast ratio against the dominant pixel may pass, but the text overlaps darker and lighter regions. Either add a scrim, restrict text to a single-tone area, or use a solid background.

Beyond contrast

Contrast is one of around 50 WCAG 2.2 success criteria. The full UX Companion accessibility audit also checks tap-target sizing (2.5.8), focus visibility (2.4.7), labelling (3.3.2), heading hierarchy (1.3.1), and reading age — paired with AI-written rationale and suggested fixes for each finding.

Advertisement

Want this across an entire page?

See how the full UX Companion accessibility audit pairs eleven WCAG checks with AI-written rationale per finding.

See the demo
Copied