Join Postly
Start free trial
DeveloperFree · no sign-up Runs in your browser

Colour contrast checker (WCAG 2.2)

Check whether your text and background colours are readable for everyone. Enter two colours to see the contrast ratio and pass or fail for WCAG 2.2 AA and AAA, for normal and large text and for icons, with a live preview. If a pair fails, get the closest colour that passes.

Loading the tool…

How to use the Colour Contrast Checker

  1. 1Enter the text colour and the background colour as HEX, RGB or HSL, or use the colour pickers.
  2. 2Read the contrast ratio and the pass or fail for each WCAG level.
  3. 3Check the live preview at normal and large sizes, and in bold.
  4. 4If a check fails, tap the suggested colour to use the nearest one that passes.

Frequently asked questions

What contrast ratio does WCAG 2.2 require?

Level AA needs 4.5:1 for normal text and 3:1 for large text and for icons and form borders. Level AAA needs 7:1 for normal text and 4.5:1 for large text.

What counts as large text in WCAG?

Text at least 24 px (18 pt) in regular weight, or at least 18.66 px (14 pt) in bold. Everything smaller must meet the normal-text ratio.

Why does 4.49:1 fail when it rounds to 4.5?

WCAG thresholds are exact, so a ratio just below 4.5 fails AA. This checker never rounds up: it shows the ratio cut to two decimals.

How does the passing colour suggestion work?

It keeps your colour's hue and saturation and changes only its lightness, darker or lighter, by the smallest step that reaches the ratio you need, so the colour still looks like yours.

How is a see-through text colour checked?

When the text colour has transparency, it's blended over the background first, because that blended colour is what readers actually see.

Related free tools

All tools

Then schedule it with Join Postly

Plan, publish and track your posts on every network from one calendar. Free plan, no credit card.

Start for free View pricing
No credit card required Free forever plan Cancel anytime