Colour Contrast Checker (WCAG)

How it works

Type your text colours into the left box, one per line; the format is detected on its own, so #777777, rgb(119, 119, 119) and hsl(0, 0%, 47%) are all read the same way. Put the background colour in the option field — leave it empty and white is assumed. Each colour comes back with a single ratio such as 4.48:1 plus a pass or fail against the AA and AAA thresholds for the text size you picked. A worked example: on white, the grey #777777 gives 4.48:1 and misses AA for normal text by a hair; darken it one step to #767676 and it reaches 4.54:1 and passes. Live swatches are drawn under the output so you can see the pair as well as read the number. To test a whole brand palette against the same background, paste every colour on its own line — the status line counts how many cleared the bar.

This tool is also known as color contrast checker, wcag contrast ratio, check text contrast against background, aa aaa contrast requirements, contrast ratio calculator hex.

What is Contrast ratio?

A contrast ratio compresses the brightness difference between two colours into one number, always written as "X:1". The lowest possible value is 1:1, which means the two colours are identical and the text is invisible against its background. The highest is 21:1, which black on white produces. The useful property of the measure is that it ignores which colour is which: swap the text and the background and you get the same figure, because the calculation always divides by the darker of the two.

What is WCAG level AA and AAA?

WCAG, the Web Content Accessibility Guidelines, defines two conformance levels for readable text. Level AA asks for 4.5:1 on normal text and 3:1 on large text; this is the baseline public bodies and most commercial products aim at, and in several countries it is written into law. Level AAA raises the bar to 7:1 and 4.5:1 respectively, which is hard to hold across a whole interface. Logos, disabled controls and purely decorative text are exempt from both.

What is Relative luminance?

Relative luminance describes how much light a colour puts out, on a scale from 0 for black to 1 for white. It is computed in two steps: each channel is linearised, which undoes the gamma encoding a display applies, and the linear channels are then summed with the weights 0.2126 red, 0.7152 green and 0.0722 blue. Those weights mirror the human eye, which is highly sensitive to green and barely sensitive to blue — which is why lightening the blue channel does almost nothing for contrast.

What is the difference between AA and AAA?

Both use the same contrast ratio; only the pass mark differs. For normal text AA asks for 4.5:1 and AAA for 7:1. That gap is wider than it sounds: on a white background the lightest grey clearing AA is #767676, while the lightest grey clearing AAA is #595959, so body text has to become visibly darker. In practice teams target AA everywhere and reserve AAA for long-form reading, outdoor screens and products aimed at older readers, where the extra darkness is worth the loss of visual softness.

Why a grey that looks readable still fails

The ratio comes from how much light each colour sends to your eye, and that is not the number in the HEX code. Each channel is linearised first — the screen's gamma curve is undone — and then green is weighted about three times heavier than red and ten times heavier than blue.

The practical result: two colours that look equally dark do not score the same. On white, pure blue #0000FF reaches 8.59:1 while the darker-looking green #008000 manages only 5.14:1. Judge with the number, not the eye; your screen brightness distorts the eye anyway.

Which threshold should you aim for?

AA is the floor expected of public-facing work. AAA is genuinely demanding and is rarely applied to every piece of body copy.

• Body text, form labels, error messages → AA for normal text (4.5:1) at minimum
• Large headings (18pt, or 14pt bold) → 3:1 is accepted
• Screens used outdoors or by older readers → aim for AAA (7:1)
• Faint grey helper text → the most common failure; keep it above 4.5:1

Frequently asked questions

How is the contrast ratio calculated?

The relative luminance of each colour is worked out separately, then the ratio (lighter + 0.05) / (darker + 0.05) is taken. The result runs from 1:1 for two identical colours up to 21:1 for black on white.

What exactly counts as large text?

WCAG defines large text as 18 point and above, or 14 point and above when bold. On the web that works out to roughly 24 pixels regular and 18.66 pixels bold.

Does it matter which colour is the text and which is the background?

No. The formula puts the lighter colour on top regardless, so swapping text and background leaves the ratio unchanged. Only your impression of readability changes.

Are my colours sent anywhere?

No. The whole calculation runs inside your browser; the colour codes you type never reach a server or a third party.