FREE TOOL · NO AI · INSTANT
WCAG Contrast Checker
Enter a foreground and background color. Get your exact contrast ratio and instant WCAG 2.1 pass/fail for AA and AAA — normal text, large text, and UI components.
WCAG Contrast Checker
Real-time AA/AAA contrast validation.
Normal text (16px)
Sample Text
Large text (24px bold)
Large Text
Normal AA
min 4.5:1
Normal AAA
min 7:1
Large Text AA
min 3:1
Large Text AAA
min 4.5:1
CSS output
/* WCAG contrast: 17.63:1 — AA ✓ AAA ✓ */ color: #15140f; background-color: #fafaf7;
What you get
Exact contrast ratio
Computed from the WCAG relative luminance formula — the same calculation used in certified audits.
AA / AAA pass/fail
Pass/fail for all 3 WCAG levels: normal text (4.5:1), large text (3:1), and UI components (3:1).
Live color preview
See your exact foreground text on your exact background color before you ship.
How it works
Enter two colors
Hex, RGB, or use the color picker. Paste directly from Figma or your CSS.
Get your ratio
Contrast ratio calculated instantly in-browser from the WCAG relative luminance formula.
Check compliance
See pass/fail for AA (4.5:1), AAA (7:1), large text (3:1), and UI components (3:1).
Why use this
Zero cost, zero API
Pure browser math. Runs instantly, works offline, no usage limits, no API dependency.
Built on the WCAG 2.1 spec
Same formula used by WCAG-certified auditors and automated accessibility scanners.