web

WCAG contrast checker

Check color contrast ratios against WCAG AA and AAA thresholds.

Caches after visit

Colors

Enter CSS colors, use the native pickers, or swap foreground and background.

Foreground

Background

Readable text matters.

The preview uses the effective colors used for the contrast calculation.

Contrast ratio

color: #111827;
background-color: #ffffff;

WCAG 2.x AA and AAA thresholds.

AA normal text4.5:1Pass

AA large text3:1Pass

AAA normal text7:1Pass

AAA large text4.5:1Pass

UI components/non-text3:1Pass