Colour contrast checker

Pick a text and a background colour to see whether the text is readable by the WCAG accessibility standard - and how to fix the colour if it isn't.

Text colour

Background colour

–:1

A large heading

Normal paragraph text - this is what most content on a page looks like.

Button

AA · normal text
AA · large text
AAA · normal text
AAA · large text
AA · icons and borders

Everything happens in your browser - nothing you type here is sent to any server.

How it works

What AA and AAA mean

WCAG is the international guideline for accessible websites. Level AA requires a contrast of at least 4.5:1 for normal text and 3:1 for large text (24 px, or 19 px bold) - the standard the law requires of public sector websites and, since June 2025, of many online shops in the EU (micro-enterprises excepted). AAA is stricter: 7:1 and 4.5:1.

How to fix contrast without changing your brand

The “Fix to AA/AAA” buttons look for the nearest colour with the same hue - only lighter or darker - that passes. So the text stays in your brand colours while becoming readable for people with low vision and on a phone in bright sunlight.

Frequently asked questions

What contrast is enough?

At least 4.5:1 for normal text (WCAG AA). Black on white is 21:1, while light grey #999 on white is only 2.8:1 - too low.

Does contrast affect SEO?

Indirectly, yes: Google also looks at accessibility (e.g. in Lighthouse), and a readable page means longer visits and fewer people leaving.

Which colour formats can I enter?

HEX (#bc3b00 or short #fff) or rgb(188, 59, 0). You can also pick a colour with the picker.