What the AA, AAA, Large Text and Normal Text Results Mean in Colour Contrast Checker

Colour Contrast Checker (colourcontrast.cc) shows four pass/fail results for each foreground/background pair: AA Large, AAA Large, AA Normal and AAA Normal. They come from the WCAG contrast rules, which set a lower bar for large text than for normal text, and a lower bar for AA than for AAA. A combination can therefore pass AA Large while failing AA Normal — that is expected, not a bug.

The four thresholds

Two things vary across the labels: the conformance level (AA is the baseline, AAA is the stricter level) and the text size category. Large text gets a lower requirement because bigger glyphs are easier to read at lower contrast.

What counts as large text

The tool states the sizes directly next to the sample copy:

• Large Text — 18pt / 24px
• Normal Text — 16px

So in this checker, text at 18pt (24px) or above is judged as large text, and 16px text is judged as normal text. If your real content sits between those sizes, decide which category it belongs to before you rely on a result.

Reading a result

The page shows a live example: foreground #222222 on background #ffe66d produces a contrast ratio of 12.72, and all four labels report Pass. That tells you the pair clears even the strictest requirement (AAA Normal, 7:1), so it is safe for body copy as well as headings.

A pair with a ratio between 3:1 and 4.5:1 would instead show:

• AA Large: Pass
• AAA Large: Fail
• AA Normal: Fail
• AAA Normal: Fail

That combination is only acceptable where the text is genuinely large.

How to use the results when choosing colours

1. Enter or pick a foreground colour and a background colour. The tool displays the hex value and lets you copy it to the clipboard, alongside RGB and HSL values.
2. Read the contrast ratio and the four labels.
3. Match the label to your content:
   • Body copy, labels, captions at normal size → you need AA Normal (4.5:1) at minimum.
   • Headings and other large text → AA Large (3:1) is the minimum.
   • If you are targeting AAA, use AAA Normal (7:1) for body text and AAA Large (4.5:1) for large text.
4. If a pair fails the level you need, adjust the foreground or background and re-check. The Reverse colours control swaps the two, which is useful when only one direction of the pairing is failing.
5. Use Save colours to keep a combination you want to reuse, and the typeface selector with the "Example copy" preview to see how the pairing reads in an actual font rather than as flat swatches.

Common points of confusion

• Passing AA Large does not mean the colour is accessible for all text. It only covers large text. Small text in the same colours may still fail.
• AAA is not required by every project. AA is the commonly cited baseline; AAA is a stricter target. Check which level your project or client actually needs before rejecting a colour.
• The ratio is a property of the pair, not of one colour. Changing either the foreground or the background changes all four results.
• The labels are pass/fail, not scores. A ratio of 12.72 and a ratio of 7.1 both read as Pass for AAA Normal; the tool is not ranking them.