Contrast Matrix Checker

Check colour combinations against accessibility contrast standards, in a grid.

Colour that everyone can read

Text needs enough contrast against its background to be readable, and there are formal accessibility standards that set the minimum. This checks combinations of your colours against those standards in a grid, showing which text-and-background pairs pass and which fail, so you can build a palette that is legible rather than discovering a contrast problem after launch.

Enter your colours and see which combinations meet the standard.

Why the standards exist

Low-contrast text — light grey on white, a trendy but faint colour scheme — is one of the most common accessibility failures, and it excludes people with low vision, affects everyone in bright sunlight, and is simply harder to read. The contrast ratio between text and background is measurable, and the accessibility guidelines set thresholds that normal and large text must meet. Checking a whole palette at once, as a grid, catches the combinations to avoid before they end up on a page where real users struggle with them.

Frequently asked questions

What contrast is required?

Accessibility guidelines set minimum contrast ratios that text must meet against its background, with a lower bar for large text.

Why does contrast matter?

Low-contrast text excludes people with low vision and is harder for everyone to read, especially in bright light.

Is anything uploaded?

No. The check happens in your browser.

More Developer tools