WEBSITE STUDIO · FREE

Colour Contrast Checker (WCAG)

Check that your text is readable on its background, against the WCAG accessibility rules.

Runs in your browser. Nothing you type is stored or sent.

Large heading text

Normal body text looks like this. Can everyone read it easily?

17.01 : 1
  • Normal text (AA) needs 4.5:1
  • Large text (AA) needs 3:1
  • Normal text (AAA) needs 7:1
  • Large text (AAA) needs 4.5:1
  • Buttons and icons needs 3:1

How it works

  1. 1Pick the text colour.
  2. 2Pick the background colour.
  3. 3Read the ratio and the pass or fail for each WCAG level.

Questions

What ratio do I need?

4.5:1 for normal text and 3:1 for large text and buttons meets WCAG AA, the usual legal and good-practice bar.

Is my data sent anywhere?

No. This runs in your browser, so what you type stays on your device.

Want a person to look at your result? Free, and no newsletter.

Need a website or app built?

We build business websites in 7 days and web apps in weeks, for a fixed price. Then we automate the busywork around them.

Book a free strategy call

About the Colour Contrast

The Colour Contrast Checker tests a text colour against its background and tells you whether it passes WCAG AA and AAA. Good contrast makes a site readable for everyone, including people with low vision.

When to use it

Tips for a better result

What a healthy website needs

Search engines and visitors reward the same things: pages that load in under about 2.5 seconds, a clear title and description, working links, HTTPS, and a layout that works on a phone. These checks show where your site stands. If you would rather have it done for you, we build and fix business websites, usually in 7 working days.

More free tools: see every tool.

Read next