Dev · 108 tools · nothing uploads

WCAG contrast checker

Compute the WCAG 2.1 contrast ratio between two colors and check it against the AA and AAA thresholds for normal and large text. Runs on your device.

Options

live

WCAG contrast checker parses two colors, hex or rgb(), as foreground and background, then computes their WCAG 2.1 relative luminance. The ratio is checked against four thresholds: AA normal 4.5, AA large 3, AAA normal 7, and AAA large 4.5 to 1. An unparseable color is refused by name. Color blindness and font weight still matter beyond contrast.

Questions

What color formats can I enter?

Hex, 3 or 6 digits with or without a leading #, or an rgb()/rgba() function.

What thresholds does it check?

WCAG AA normal text 4.5:1, AA large text 3:1, AAA normal text 7:1, and AAA large text 4.5:1, each reported PASS or FAIL.

What happens with an unparseable color?

The tool refuses, naming exactly which string it can not parse.

Does it check anything besides contrast ratio?

No, color blindness simulation and font weight, both of which affect real readability, are not checked here.

What formula computes the ratio?

The WCAG 2.1 relative luminance formula applied to both colors, then the standard (lighter + 0.05) / (darker + 0.05) ratio.

Related Dev tools