Font size and accessibility

No success criterion in WCAG 2.1 or 2.2 specifies a minimum size for body text. You can build a conformant page with 14px type. This surprises people, and it is worth understanding why the guidelines are written that way.

A fixed minimum would be meaningless across devices, viewing distances and typefaces. 16px in one typeface reads larger than 16px in another, and a phone held at arm's length is a different problem from a monitor. So WCAG regulates the behaviour that actually matters: whether a user who needs bigger text can get it without your layout falling apart.

Three criteria carry the real obligations for text size.

• 1.4.4 Resize Text (AA) requires text to scale to 200% without loss of content or functionality. If someone doubles the text size and your navigation overlaps the content or a button becomes unreachable, that is a failure.
• 1.4.10 Reflow (AA) requires content to work at a viewport equivalent to 320 CSS pixels wide without two-dimensional scrolling. In practice this is the same discipline as responsive design, and it is what stops zoomed text forcing horizontal scroll.
• 1.4.12 Text Spacing (AA) requires no loss of content when users override line height to 1.5x, paragraph spacing to 2x, letter spacing to 0.12em and word spacing to 0.16em. Fixed-height containers are the usual thing that breaks here.

Notice that all three are about resilience rather than a starting number. Your design can be whatever you want, provided it survives the user changing it.

One place in WCAG genuinely depends on size: the contrast requirement. 1.4.3 Contrast (Minimum) demands a ratio of 4.5:1 for normal text but only 3:1 for large text, and it defines large text as at least 24px, or 18.66px when bold.

This matters more than it sounds. Text sitting just under the large-text boundary is held to the stricter ratio, so a heading at 23px bold and a heading at 24px bold can pass or fail on the same colours. If a contrast check flags something surprising, check the computed font size and weight before changing your palette.

The practical rule that follows from 1.4.4 is to size text in rem or em rather than px. Users who set a larger default font size in their browser get it honoured, and your layout scales with them.

Two things to avoid. Do not set a percentage or fixed size on html that overrides the user's browser default, because that quietly cancels the setting they deliberately chose. And do not use user-scalable=no or a locked maximum-scale in your viewport meta tag, which blocks pinch-zoom on mobile and is a straightforward failure.

<!-- blocks zoom, do not do this -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<!-- correct -->
<meta name="viewport" content="width=device-width, initial-scale=1">

WCAG will not tell you, but usability research and practice converge on 16px (1rem) as a sensible floor for body text, which is also the default in every major browser. Smaller than that is legal and often uncomfortable, particularly for older readers and anyone with low vision.

Treat 16px as a design decision rather than a compliance one. Going below it is not a WCAG failure, it is a usability cost you are choosing to accept. Going above it costs you nothing.

Automated tools settle the contrast half of this reliably, since font size, weight and colour are all computable. A scan will tell you which text fails 4.5:1 or 3:1 and at what measured ratio, which removes the guesswork about where the large-text boundary falls.

The resize, reflow and spacing criteria need a person, and take about two minutes each:

• Zoom the browser to 200% and read the page. Look for overlap, clipping and anything that has become unreachable.
• Narrow the window to 320px wide and check nothing requires horizontal scrolling.
• Apply the 1.4.12 spacing overrides with a bookmarklet or devtools and look for clipped text in fixed-height boxes.