WCAG

Text size

Text size

There's no WCAG success criterion that says "text must be at least X pixels." But text size directly affects readability and contrast perception, and WCAG references size thresholds in several places.

There's no WCAG success criterion that says "text must be at least X pixels." But text size directly affects readability and contrast perception, and WCAG references size thresholds in several places.

There's no WCAG success criterion that says "text must be at least X pixels." But text size directly affects readability and contrast perception, and WCAG references size thresholds in several places.

Perception flags text at 12px or below with a small-text warning. Here's why.

Why size matters for contrast

A contrast ratio of 4.5:1 at 16px is readable for most people. The same 4.5:1 at 10px is much harder to read, even though it technically passes SC 1.4.3. The ratio doesn't change, but the physical size of the letterforms does - and smaller strokes are harder to perceive.

Anti-aliasing makes this worse. The browser blends text edges with the background, and smaller text is affected more. Thin, small fonts can render noticeably fainter than their specified colour.

Why 12px

Below 12px (roughly 9pt), things start to break down on standard screens:

  • Anti-aliasing heavily affects perceived contrast

  • Similar characters become hard to distinguish (l, 1, I or 0, O)

  • Reading speed drops

  • Users with even mild uncorrected vision loss can't read the text

High-DPI screens (Retina, 2x, 3x) render small text more crisply. But you can't assume all your users have high-DPI screens. The threshold needs to work for the lowest common denominator.

12px isn't a rule. It's the practical point where readability problems become common enough to flag.

What Perception flags

When you run a scan, any text element at 12px or below gets a small-text warning alongside its contrast result. This isn't a pass/fail - it's a heads-up that the text might be hard to read regardless of its contrast ratio.

Common patterns it catches:

  • Footnotes and legal text set at 10px or 11px

  • Labels and captions in data-heavy layouts that have been shrunk to fit

  • Placeholder text in form fields at small sizes

  • Mobile designs where body text has been scaled down

Practical guidelines

16px minimum for body text. This has been the browser default since the early web and it's the most widely tested size for readability across populations.

Don't go below 12px for anything someone needs to read. Decorative text and watermarks are different. But if the text carries information, 12px is the floor.

Think about your audience. Healthcare, government, financial, and education products often have older users. For those audiences, 14px is a better body text minimum, and 12px is too small for secondary content.

Test on real screens. What looks readable on your 5K display might not work on a 1080p laptop in a bright office.

How this connects to WCAG

WCAG doesn't set a minimum font size, but it uses size as a threshold in several places:

  • 1.4.3 and 1.4.6 define "large text" as 18pt (24px) or 14pt bold (18.5px), giving it lower contrast requirements

  • 1.4.4 Resize Text (AA) says text must be resizable up to 200% without breaking

  • 1.4.12 Text Spacing (AA) says adjusting line height, letter spacing, and word spacing shouldn't break layout

The conversion: 1pt = 1.333px. So 12pt = 16px, and 18pt = 24px.

Related

  • 1.4.3 Contrast (Minimum) - 4.5:1 for text at Level AA. Defines the large text threshold.

  • 1.4.6 Contrast (Enhanced) - 7:1 for text at Level AAA.

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