What is the minimum font size for accessibility?

There is no official minimum font size for accessibility in WCAG. The guidelines require that text can be resized to 200% without breaking the page and that it has enough contrast, but they don't name a pixel value. In practice, 16 CSS pixels (the default in every major browser) is the accepted baseline for body text, and most accessibility specialists advise against going below about 14 pixels for any text people need to read, such as captions, labels and help text. What matters as much as the number is that sizes are set in relative units, so people who need larger text can get it.

Font size is one of the first things people with low vision, presbyopia or reading difficulties notice, and small text is a frequent complaint on otherwise well-designed sites. In this article you'll learn what WCAG actually says about text size, why 16 pixels became the norm, sensible minimums for different kinds of text, how the font itself changes what "16 pixels" means, and how to set and test sizes so they work for everyone.

What WCAG Says About Font Size

WCAG 2.2 has no success criterion that sets a minimum size. Instead, size comes up in three places:

• 1.4.4 Resize Text (AA): Text, except captions and images of text, can be resized without assistive technology up to 200% without loss of content or functionality.
• 1.4.3 Contrast (Minimum) (AA): The required contrast ratio depends on size. Normal text needs 4.5:1, while "large text" needs only 3:1.
• 1.4.8 Visual Presentation (AAA): Users can resize text up to 200% without needing to scroll horizontally to read a line.

The definition of large text is the closest WCAG gets to naming sizes. Large text is at least 18 point, or at least 14 point if bold. WCAG notes that, for web content, 1 point is treated as 1.333 CSS pixels, which gives these equivalents:

Text	Points	CSS pixels	rem at default
Large text	18pt	24px	1.5rem
Large bold text	14pt bold	about 18.66px	about 1.167rem

These thresholds exist only to decide which contrast ratio applies. They're not a recommendation for body text size.

Why There's No Fixed Minimum

The apparent size of text depends on the typeface, the screen's pixel density, viewing distance and the reader's eyesight. A fixed pixel minimum would be too large for some contexts and too small for others. WCAG takes the more flexible approach of requiring that users can make text bigger, and it leaves the starting size to designers.

Why 16 Pixels Is the Usual Baseline

Browsers set the default font-size of the root element to 16 pixels. That value has been stable for decades and is what users get unless they change it. Using it for body text has several practical advantages:

• It's what browsers and operating systems are tuned for: Text at the default size renders as the platform intends.
• It respects user settings: If someone sets their browser's default to 20 pixels, a site using 1rem for body text gives them 20 pixels.
• It avoids iOS form zoom: Safari on iPhone zooms into form fields whose text is smaller than 16 pixels when they receive focus, which disorients many users.
• It's comfortable on phones: Phones are held closer than laptops, so 16 pixels on a phone appears similar to a slightly larger size on a desktop screen.

Many sites now go larger for long-form reading, often 17 to 20 pixels on wide screens. That's a design choice, not a requirement, and it can work well with a font that has a modest x-height.

Sensible Minimums for Different Kinds of Text

Different text roles tolerate different sizes. These are widely used guidelines rather than rules from a standard:

Text role	Suggested size	Notes
Body text	16px (1rem) or larger	The main reading size
Form inputs	16px (1rem) or larger	Avoids iOS zoom on focus
Buttons and navigation	14 to 16px	Short labels; make the target large
Captions, metadata, footnotes	14px (0.875rem) minimum	Raise contrast to compensate
Legal small print	14px minimum	Small print still has to be readable
Badges and tags	12px absolute minimum	Use bold or uppercase sparingly, test carefully

Text below 12 pixels is very hard to justify for anything meaningful. If you find yourself reaching for 10 or 11 pixels to fit something in, the layout or the copy needs rethinking rather than the font size.

Platform Guidance

Native platforms publish their own guidance, which is useful for comparison. Apple's Human Interface Guidelines use 17 points as the default body size on iOS, with smaller styles for footnotes and captions. Google's Material Design type scale includes body styles of 14 and 16. Both platforms also support dynamic or scalable text, so users can enlarge everything system-wide, which is the same principle WCAG applies to the web.

The Font Changes What a Size Means

A font size in CSS sets the height of the em box, not the height of the visible letters. Two fonts at 16 pixels can look very different because of their x-height, the height of lowercase letters such as x, a and e.

/* Both are 16px, but Verdana's lowercase letters are noticeably taller. */
.sample-a { font-family: Verdana, sans-serif; font-size: 1rem; }
.sample-b { font-family: Garamond, "EB Garamond", serif; font-size: 1rem; }

A typeface with a small x-height, which is common in classic book serifs and some geometric sans-serifs, may need 18 pixels or more to read as comfortably as a typeface with a large x-height at 16 pixels. When you test a new font, compare it side by side with a familiar one at the same nominal size.

Normalising Size Across Fonts

The font-size-adjust property scales a font so that its x-height matches a chosen ratio. It's useful when a fallback font has very different proportions from your web font, and it's supported in all current major browsers:

body {
  font-family: "Lora", Georgia, serif;
  font-size: 1.0625rem;
  /* Scale so the x-height is 0.5 of the font size, whichever font is used */
  font-size-adjust: 0.5;
}

You can also use font-size-adjust: from-font to take the value from the primary font automatically, which then applies to the fallbacks.

Weight and Contrast Affect Small Text

Small text suffers first when other things are weak. A 14-pixel caption in a light weight and mid-grey can be unreadable even though each choice looks reasonable alone. If you must use small sizes:

• Keep the weight at 400 or above: Thin strokes break up at small sizes.
• Raise the contrast: Aim for 7:1 for very small text even though WCAG only requires 4.5:1.
• Add a little letter spacing: Small text often benefits from a slight increase, such as 0.01em to 0.02em.
• Keep lines short: Small text in long lines is particularly hard to track.

.caption {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: #374151; /* about 10.3:1 on white */
}

Set Sizes So Users Can Change Them

The most important accessibility rule for font size isn't a minimum; it's not getting in the way of users who need more.

Don't Override the Root Size in Pixels

This common pattern breaks users' default size preference:

/* Avoid: locks the base to 16px whatever the user has chosen */
html { font-size: 16px; }

/* Avoid: the "62.5% trick" makes 1rem equal 10px, so body text needs
   resetting everywhere and is easy to get wrong */
html { font-size: 62.5%; }

Leave the root alone, or use a percentage that keeps the user's default as the reference:

html { font-size: 100%; }
body { font-size: 1rem; }

Use rem for Text and em for Spacing Tied to Text

Set font sizes in rem so they all scale from the user's default. Use em for padding and margins that should grow with the text inside a component:

.button {
  font-size: 1rem;
  padding: 0.625em 1.25em;
  border-radius: 0.375em;
}

If a user's default is 20 pixels, the button's text and padding both grow in proportion.

Don't Block Pinch Zoom

On mobile, many people rely on pinch zoom. This viewport tag removes it and should never be used:

<!-- Avoid -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Use the standard version instead:

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

How to Test Font Sizes

A few quick checks show whether your sizes are working:

1. Inspect the computed size: In developer tools, select an element and look at the computed font-size. Check captions, labels and footers, not just paragraphs.
2. Change the browser's default size: In Chrome, go to Settings > Appearance > Font size and choose Very large. In Firefox, change the default size under Settings > General > Fonts. Text set in rem should grow.
3. Zoom to 200%: Press Ctrl and + (or Cmd and + on a Mac) until the zoom level reads 200%. Nothing should be cut off or overlap.
4. Test on a real phone: Hold it at a normal distance and read the smallest text on the page.
5. Find hard-coded pixel sizes: Search your stylesheets for pixel font sizes.

grep -rnE "font-size:\s*[0-9.]+px" src/styles/

src/styles/footer.css:12:  font-size: 11px;
src/styles/badge.css:4:  font-size: 10px;

Each match is a candidate for converting to rem and for checking whether the size is large enough.

---

FAQ: Minimum Font Size for Accessibility

---

Conclusion

WCAG deliberately avoids a fixed minimum font size. It asks that text can be enlarged to 200% and that smaller text meets a stricter contrast ratio, and it defines large text as 24 pixels, or about 18.66 pixels in bold, only for contrast purposes. The working baseline that most of the industry has settled on is 16 pixels for body text and form fields, with 14 pixels as a practical floor for secondary text.

Treat those numbers as a starting point, adjusted for the x-height and weight of your chosen font, and make sure they're expressed in rem so they follow the user's own settings. If you test with a larger browser default, 200% zoom and a real phone, you'll catch the small text that slips through and give every reader a size they can actually use.