IMAGES & DESIGN

Colour contrast checker

Check two colours against text contrast thresholds.

Getting the tool ready...

Inputs are processed in your browser. This build does not send them to a server.

How it works

Check two colours against text contrast thresholds. Fill in the form and choose Calculate. It opens with an example already filled in, so you can see how it works first.

What you need

Text colour
Background colour

What you get

Contrast ratio, AA normal text, AA large text
Copy or save the result

Example

The tool opens with Text colour: #202723; Background colour: #ffffff.

That gives: Contrast ratio: 15.263:1; AA normal text: Pass; AA large text: Pass.

Good to know

WCAG 2.2 text-contrast thresholds only, using unrounded ratios. Large text is at least 18pt, or 14pt bold. Does not establish overall WCAG conformance.

Your privacy

What you type is worked out in your browser and is not sent anywhere. There are no accounts, adverts or tracking scripts.