PartPriced Tools

Colours · free, in your browser

Check colour contrast against WCAG

Grey text on white looks elegant until nobody can read it. Type the two colours and Colours gives the WCAG ratio, which levels pass, and the nearest text colour that does.

Check contrast

How to do it

  1. Scroll to Contrast check (WCAG 2) and type the text colour and the background colour, as HEX, RGB, HSL or OKLCH.
  2. Read the ratio and the five results: AA and AAA for normal text, AA and AAA for large text, and UI parts and graphics.
  3. Look at the sample: large text and a paragraph in your two colours.
  4. If AA normal text fails, click Fix the text colour: the text colour keeps its hue and gets just light or dark enough to pass.
  5. Click Swap to check the colours the other way round.

Your files stay on this device: Colours runs in your browser, with no upload, no account and no watermark.

Questions

Which ratios does WCAG ask for?

Level AA asks for 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for UI parts and graphics. Level AAA asks for 7:1 and 4.5:1.

Why does it show 4.47 and not 4.48?

The ratio is rounded down, as WebAIM's checker shows it, so a pair at 4.499 is never shown as passing 4.5.

Can it check a colour from my screen?

In Chrome and Edge, Pick from screen picks any pixel on your screen. Then use it as the text colour or the background from the panel.

Is anything uploaded?

No. The colours are checked by the page in your browser; nothing is sent anywhere.

More with Colours