1.4.3 Contrast (Minimum)
Published
0
min read
That's the rule. Two numbers to remember.
What counts as large text
Large text is 18pt, or 14pt bold, and above. The W3C converts these to about 24px and 18.5px. WCAG doesn’t define bold as a font weight, and “18 point” and “bold” can mean different things in different fonts.
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. The W3C explains that 20/40 vision comes with roughly 1.5 times less contrast sensitivity, so 3 x 1.5 = 4.5. It also notes that 20/40 is typical vision at about age 80.
So 4.5:1 isn't designed for extreme cases. It's designed for a level of vision loss that's common in later life.
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 (#8A8A8A) on a dark grey background (#333333) is only 3.66:1. Check both themes.
In Perception
When you run a scan, Perception checks every text element against the level you choose: AA (4.5:1) by default, or AAA (7:1). Large text is detected by size and weight 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.
Sources
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.