What is Colour Contrast Checker (colourcontrast.cc)?

Updated

Colour Contrast Checker is a free online tool that measures the contrast ratio between a foreground colour and a background colour, then tells you whether that pairing passes the WCAG (Web Content Accessibility Guidelines) thresholds for AA and AAA at both large and normal text sizes. It is aimed at designers, developers, and anyone choosing colours for text that needs to stay readable — for example, picking a button label colour against a brand background.

What it actually does

You give it two colours: a foreground (usually text) and a background. The tool calculates the contrast ratio between them and reports pass/fail results against four WCAG checkpoints:

  • AA Large — large text at the lower AA threshold
  • AAA Large — large text at the stricter AAA threshold
  • AA Normal — normal body text at the AA threshold
  • AAA Normal — normal body text at the stricter AAA threshold

The page also labels the text sizes it uses as reference: large text at 18pt/24px and normal text at 16px. So the "large" and "normal" results map to those two size categories rather than to any font you happen to be using.

How to use it

  1. Set the foreground colour. Enter or pick the colour of your text. The tool shows the value as a hex code (for example #222222) alongside its RGB and HSL breakdown.
  2. Set the background colour. Do the same for the surface the text sits on (for example #ffe66d).
  3. Read the results. Four pass/fail indicators update to show how the pair scores at each WCAG level and text size.
  4. Adjust until it passes. Change one or both colours and watch the results change. The goal is the combination that passes the level you need while staying close to your intended design.
  5. Copy the values. Each colour has a "Copy … to clipboard" action so you can paste the hex straight into your CSS or design file.

Two conveniences are worth knowing about:

  • Reverse colours swaps foreground and background in one click — useful when you are testing both a light-on-dark and dark-on-light version of the same palette.
  • Save colours keeps a combination so you can compare options or come back to a pairing later.

Reading the numbers

The tool displays a contrast ratio next to the sample text — in the example on the page, the pairing #222222 on #ffe66d shows a ratio of 12.72, and that combination passes all four checkpoints (AA Large, AAA Large, AA Normal, AAA Normal).

The practical takeaway: a higher ratio is more forgiving. A pairing that passes AAA Normal will also pass the looser checkpoints, so if you are unsure which level applies to your project, aim for the strictest one you can reach without wrecking the design.

Typeface and sample text

There is a typeface selector that lets you preview the sample copy in a Google font, plus an "Example copy" block so you can see how the colours read in something resembling real text rather than isolated swatches. This matters because contrast ratios are calculated from colour values alone — the tool cannot account for thin font weights, very small sizes, or low-quality displays, so previewing the actual typeface is a useful sanity check on top of the numeric result.

Who it is for

  • Designers choosing palette combinations for interfaces, marketing pages, or brand systems.
  • Developers verifying that a colour pair in a stylesheet meets an accessibility requirement before shipping.
  • Anyone auditing an existing site who needs a quick pass/fail answer for a specific text/background pair.

What it does not do

The tool checks one colour pair at a time against WCAG contrast thresholds. It does not scan a whole page, crawl a site, or evaluate other accessibility criteria such as keyboard navigation, alt text, or semantic markup. Treat it as a focused contrast calculator, not a full accessibility audit.

If you need to confirm a specific text-and-background combination meets AA or AAA, entering both hex values and reading the four indicators is the entire workflow — and the copy-to-clipboard buttons mean you can move the approved values straight into your code.