Colour contrast checker. Check WCAG in seconds.

What is colour contrast?

Colour contrast is the difference in lightness between text and the background behind it. WCAG, the international standard for web accessibility, measures it as a ratio from 1:1 (the same colour) to 21:1 (black on white).

Good contrast helps people with poor eyesight, but also everyone reading a phone in the sun. Light grey text on white looks elegant on a big screen and disappears on a small one.

How to check colour contrast

The checker above works in your browser and answers straight away.

1. Type the text colour as a hex code (like #1a1a1a or #fff), or pick it with the colour picker.
2. Type or pick the background colour the same way.
3. Read the contrast ratio and the table: pass or fail for normal text, large text, and icons and UI parts, at AA and AAA.
4. If the pair fails, the tool suggests the nearest text colour that passes AA (or AAA, once AA is met). Click “Use this colour” to try it.
5. Checking light text on a dark button? Click “Swap colours” to flip the pair.

WCAG contrast requirements: AA and AAA

WCAG 2 sets these minimum contrast ratios:

• Normal text, level AA: at least 4.5:1.
• Large text, level AA: at least 3:1.
• Normal text, level AAA: at least 7:1.
• Large text, level AAA: at least 4.5:1.
• Icons, input borders and other interface parts: 3:1 against whatever sits next to them.

What counts as large text?

Large text means at least 24px regular or about 18.7px bold (18pt and 14pt). Most body text on a website is 16–18px, so it has to meet the stricter 4.5:1.

Which level should a website meet?

AA is the level laws and public procurement point to. The European accessibility standard EN 301 549 builds on WCAG 2.1 AA, and the European Accessibility Act brings it to many businesses selling to consumers from June 2025. In Denmark, microenterprises (fewer than 10 employees and a turnover or balance sheet of no more than €2 million) are exempt from the rules for services. Readable text still wins you customers, so AA is worth meeting either way.

AAA is a good target for long reading text, but not required.

How the contrast ratio is calculated

Each colour becomes its relative luminance: the red, green and blue channels are linearised and weighted (0.2126, 0.7152, 0.0722), because the eye is most sensitive to green. The ratio is (lighter + 0.05) ÷ (darker + 0.05).

That’s why yellow on white fails badly, while blue on white passes easily, though both look “bright”. The checker truncates the ratio rather than rounding it, so 4.496 never shows as a passing 4.50.

Common contrast mistakes

• Light grey body text. It looks calm, but mid greys on white often fail AA.
• White text on a yellow, orange or light green button. Check it: these brand colours rarely reach 4.5:1.
• Text over photos. The contrast changes across the image, so check against the lightest part, or put a dark overlay behind the text.
• Placeholder text as the only label. Pale placeholder text is hard to read and disappears when people start typing.
• Colour alone for meaning. A red border on a form field needs a text message too, for people who can’t tell red from green.