WCAG
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.