WCAG Contrast Checker

Colour contrast ratio + AA / AAA pass-fail for normal and large text.

Nearest passing foreground
AA (4.5:1) passes at: —
Lightened / darkened along the HSL lightness axis
AAA (7:1) passes at: —
Contrast ratio
—:1
AA · normal text
—
≥ 4.5:1 required
AA · large text
—
≥ 3:1 (≥18pt or 14pt bold)
AAA · normal text
—
≥ 7:1 required
AAA · large text
—
≥ 4.5:1 required
AA · UI components & graphics
—
≥ 3:1 required for form borders, icons, focus indicators (WCAG 1.4.11)
Large heading text
Normal paragraph text. The quick brown fox jumps over the lazy dog — enough text to judge legibility in the real world.
Small caption text, used for meta information and footnotes.

Why this matters

Contrast ratio determines whether people with low vision, colour blindness or in bright sunlight can actually read your text. The WCAG 2.1 standard sets minimums: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold) at level AA; 7:1 and 4.5:1 at AAA. UI components like form borders and focus indicators need 3:1 against adjacent colours.

EU Accessibility Act compliance deadlines arrive in June 2025 for most public-facing products sold in Europe. UK Public Sector Bodies Regulations already require AA compliance. If you're designing a new brand, check every text-on-background combination here first.

Pairs with /colour-scheme — design a palette there, verify every combination passes here.