WCAG Color Contrast Checker

Check the contrast ratio between text and background colours against WCAG AA and AAA, with clear pass/fail results.

Private — processed on your device

Interactive workspace

Use WCAG Color Contrast Checker

◆ Private on-device

Colours

Text colour

Background colour

WCAG 2 formula, calculated on your device

Result

Contrast ratio

14.68:1

Sample normal text — the quick brown fox.

Large text sample

AA normal text (4.5:1)✓ PASS
AA large text (3:1)✓ PASS
AAA normal text (7:1)✓ PASS
AAA large text (4.5:1)✓ PASS
UI components and graphics (3:1)✓ PASS

Which WCAG levels are checked?: AA and AAA for normal and large text, plus the 3:1 minimum for UI components.
What counts as large text?: 24px regular or about 18.7px bold and above.
How is the ratio calculated?: With the WCAG 2 relative-luminance formula, rounded to 2 decimals.

Convert color values seamlessly between HEX, RGB, HSL, and print CMYK with live color preview.

Design linear, radial and conic CSS gradients with up to 8 colour stops, then copy the CSS or save a PNG.