GoWebTools

Colour Contrast Checker

Check colour contrast against WCAG AA and AAA, see the pair on real text, and get the nearest colour that passes without losing the hue.

Text colour

Background colour

Contrast ratio

4.54:1

How it looks

Large text, 24 pixels and up

Bold text from 18.66 pixels counts as large

Body text at the normal size. This is the sentence that decides whether a page is comfortable to read for an hour or merely legible for a minute.

Small print, captions and footnotes.

Verdicts

AA, body textneeds 4.5:1passes
AA, large textneeds 3:1passes
AAA, body textneeds 7:1fails
AAA, large textneeds 4.5:1passes
Interface elements and focus ringsneeds 3:1passes

This pair is fine

This combination clears the AA threshold for body text. Nothing to fix.

Try these

What this tool is for

Enter two colours and see the contrast ratio, the verdict for every WCAG threshold, and the pair rendered on real text at four sizes. When a combination fails, the tool does the part most checkers leave to you: it works out the nearest shade that passes, changing only lightness so a brand colour stays recognisable.

How to use it

  1. Set the text colour and the background colour, by picker or by typing any notation.
  2. Read the ratio and the verdicts for body text, large text and interface elements.
  3. Look at the preview: numbers are one thing, reading the sentence is another.
  4. If it fails, take the suggested colour or press "use it" to try it straight away.

Frequently asked questions

What ratio do I actually need?

WCAG AA asks for 4.5 to 1 on body text and 3 to 1 on large text, which is 24 pixels, or 18.66 pixels when bold. AAA raises those to 7 and 4.5. Interface elements such as borders, icons and focus rings need at least 3 to 1.

Why does my grey text fail when it looks fine to me?

Because you are probably looking at a good screen in a good room. The thresholds are set for people with moderately low vision, and for everyone else in sunlight or on a cheap laptop panel. #767676 is the lightest grey that clears AA on white, and it is lighter than most people expect.

Does contrast apply to disabled buttons and placeholders?

Disabled controls are exempt from the requirement, but placeholder text is not: it is real content and has to meet the same 4.5 to 1. That single rule fails more forms than anything else.

How is the suggested colour chosen?

It moves the colour toward black or white, whichever direction increases contrast against your background, and stops at the first shade that passes. Hue and saturation are left alone, so the result still reads as the same colour.