WCAG Contrast Checker
Test any foreground/background color pair against WCAG 2.2 contrast rules. Shows the ratio, live preview, and pass/fail for normal text, large text, and UI components.
Runs 100% in your browser — nothing is uploaded.
The quick brown fox jumps over the lazy dog
Small text sample — 16px normal weight, the WCAG "normal text" baseline.
19.53:1contrast ratio
Normal text: AAALarge text (18pt+): AAAUI component: AA
WCAG 2.2 requires 4.5:1 for normal text (AA), 7:1 for AAA. Large text (18pt+ or 14pt bold) needs 3:1 (AA) or 4.5:1 (AAA).
Frequently asked
What contrast ratio do I need?
WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively. UI components (icons, form borders) need at least 3:1.
Is WCAG the right standard?
WCAG 2.2 AA is the legal baseline in most jurisdictions (US, EU, UK). WCAG 3 will introduce APCA, which is more perceptually accurate but not yet the compliance target.
Why does my beautiful design fail contrast?
Perceptual contrast between light greys and white, or between blues and purples, is often much lower than it looks. Always test — trust the numbers, not the eye.