🎨 WCAG 2.1 AA & AAA · Free · No signup

Free WCAG color contrast checker — AA & AAA compliance

Test a foreground against a background, in hex or RGB. See the live ratio, all five WCAG pass/fail badges (AA normal 4.5:1, AA large 3:1, AAA 7:1, AAA large 4.5:1, UI components 3:1), a real rendered preview, and a one-click suggested fix when a pair fails.

Accepts #rgb, #rrggbb, or rgb(r,g,b). Updates live.
Accepts #rgb, #rrggbb, or rgb(r,g,b). Updates live.
– : 1
Enter two colors above.
AA Normal text —
WCAG 1.4.3 · 4.5:1 minimum
AA Large text —
WCAG 1.4.3 · 3:1 minimum
AAA Normal text —
WCAG 1.4.6 · 7:1 minimum
AAA Large text —
WCAG 1.4.6 · 4.5:1 minimum
UI components —
WCAG 1.4.11 · 3:1 minimum
Live preview
Lorem ipsum dolor sit amet

Body text at the chosen foreground/background. This is roughly the size of paragraph copy — what the WCAG AA 4.5:1 rule exists to protect.

Suggested foreground: — · ratio —:1
Adjusted to clear AA normal text (4.5:1) against your current background.
Recent checks
Recent checks will appear here.

Getting into it? Run a full ADA scan — free, 60 seconds.

Run a free full-site scan →
From a single color to a whole-site audit
Contrast is one of 50+ things we check.
Run ADAflags on your live URL to surface contrast failures, missing alt text, unlabeled inputs, broken landmarks, and the rest — exact code fixes, ranked by ADA lawsuit risk.
Scan your whole site free →
No signup · 30-second scan · exact WCAG fix code
Other free tools
Alt-Text Checker — WCAG 1.1.1 image audit Statement Generator — DOJ-style statement
FAQ

Color contrast, in plain English

The five questions that decide whether your interface passes ADA Title III.

What is WCAG AA contrast?
WCAG AA requires body text to have at least a 4.5:1 contrast ratio against its background, and large text (18px+ or 14px+ bold) to have at least 3:1. It is the minimum legally-defensible target for ADA Title III web accessibility in the United States.
What's the difference between AA large text and normal text?
Large text under WCAG is 18 point (≈24px) regular weight, or 14 point (≈18.66px) bold and stronger. Large text gets a relaxed 3:1 threshold because heavier letterforms are perceptually easier to read at lower contrast.
How do I fix low contrast?
Either darken the foreground or lighten the background until the ratio climbs. Our suggest-fix button algorithmically nudges the foreground in HSL lightness until AA normal text (4.5:1) is met.
Does the 3:1 UI components rule apply to icons and form-field borders?
Yes. WCAG 1.4.11 requires 3:1 for UI components and graphical objects that convey state (icon buttons, active form-field borders, focus rings, chart keys). It does NOT apply to inactive/disabled controls or purely decorative graphics.
How is the ratio calculated?
Per the WCAG 2.x Relative Luminance spec: each sRGB channel is first linearized (the 0.03928 threshold split between c/12.92 and the ((c+0.055)/1.055)^2.4 curve), combined as L = 0.2126R + 0.7152G + 0.0722B, and the contrast ratio is (max(L1,L2)+0.05) / (min(L1,L2)+0.05). The math replicates what WebAIM's contrast checker outputs.