ToolKit logoToolKit

Color tools

Contrast Checker

Check WCAG color contrast and preview accessible text combinations.

Contrast checker

Contrast ratio

17.74:1

The quick brown fox jumps over the lazy dog.

How to use the Contrast Checker

The Contrast Checker measures the contrast ratio between a text colour and its background and tells you whether the pairing meets the WCAG AA and AAA accessibility thresholds. A live preview renders the text on the chosen background, so you can judge real legibility rather than relying on the numbers alone, and adjust either colour until it passes.

It is essential for designers and developers building accessible interfaces, where normal text needs a ratio of at least 4.5:1 for AA compliance and 7:1 for the stricter AAA level. Checking combinations early in the design process prevents accessibility failures from reaching production, where they are far more expensive and disruptive to fix.

The ratio is calculated locally in your browser with no upload involved, so the result is instant and private. With nothing to install and no account to create, it slots neatly into any design review or quick accessibility check without interrupting your flow.

Frequently asked questions

What is WCAG contrast ratio?

WCAG requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for AAA compliance.