Text needs a contrast ratio of at least 4.5:1 against its background. Large text - 24px or 18.5px bold and above - can drop to 3:1.

That's the rule. Two numbers to remember.

What counts as large text

Large text is 18pt (24px) or 14pt bold (18.5px) and above. Bold means font weight 700 or higher. Anything lighter uses the 18pt threshold.

A common mistake: assuming 20px headings qualify. 20px is about 15pt, which is below 18pt. Unless it's bold at 14pt+ (18.5px+), it needs 4.5:1.

The conversion is 1pt = 1.333px.

What gets tested

Everything someone needs to read to use your design. Body copy, headings, labels, button text, navigation links, form labels, placeholder text, error messages.

Not tested: decorative text, text in photographs or screenshots, inactive UI elements, and logotypes.

Placeholder text trips people up. If your placeholder tells users what to type (like "DD/MM/YYYY" or "Search products"), it needs 4.5:1. Light grey placeholders on white backgrounds almost never pass.

Where the numbers come from

The 4.5:1 ratio is based on research into how contrast sensitivity changes with vision loss. ISO 9241-3 set 3:1 as the baseline for normal vision. People with 20/40 acuity - common from your 60s onward - lose roughly 1.5x contrast sensitivity. 3 x 1.5 = 4.5.

20/40 is the threshold for a restricted driving licence in most countries. So this isn't designed for extreme cases. It's designed for a level of vision loss that's very common.

Large text gets the lower 3:1 ratio because bigger characters have thicker strokes, making them easier to perceive at lower contrast.

Things to watch for

Gradients and image backgrounds. Contrast can vary across the element. If your text sits on a gradient or photo, you need to check the worst-case area, not just the centre. The W3C lists this as a common failure (technique F83).

Anti-aliasing on thin fonts. Thin and light-weight fonts render fainter than their specified colour because the browser blends text edges with the background. A ratio that technically passes can look lower on screen. For thin fonts, aim above the minimum rather than sitting right on the line.

Colour blindness. 4.5% of the population is colour-blind (8% of men). Contrast ratios are based on luminance, not hue, so they protect colour-blind users too. But if you're relying on colour alone to distinguish text from its background - like red error text on a dark background - check the ratio, because the hue difference won't help everyone.

Dark mode. Don't assume white text on dark backgrounds automatically passes. Light grey text (#AAAAAA) on a dark grey background (#333333) is only 3.9:1. Check both themes.

In Perception

When you run a scan, Perception checks every text element against 4.5:1 (AA) and 7:1 (AAA) automatically. Large text is detected by size and tested against the lower thresholds.

For complex backgrounds - gradients, images, blending modes, opacity - Perception uses dominant colour detection to test against what users actually see, not the first solid fill in the layer stack.

If a result fails, click it to jump to that node, fix the colour, and re-test that specific element without re-running the full scan.

Related

• 1.4.6 Contrast (Enhanced) - The AAA version. 7:1 for normal text, 4.5:1 for large.

• 1.4.11 Non-text Contrast - 3:1 for icons, input borders, focus indicators, and other non-text elements.

• Text size - Why font size affects readability and when Perception flags small text.