WCAG Font Size Requirements 2026:
The Complete Guide to Accessible Typography
Live Font Size Tester
Adjust the slider to see how different font sizes affect readability. The red zone shows sizes that fail WCAG recommendations.
The quick brown fox jumps over the lazy dog. This is what your body text looks like at this size. Can you read it comfortably without squinting?
The Email That Changed How I Code
In 2023, I launched a website for a client — clean, modern, minimal. Body text set at 13px because it looked "sophisticated."
Three days later, I got an email from a woman named Margaret. She was 67, a loyal customer of the client, and she couldn't read the site. "I have to zoom in to 200% and then scroll sideways for every paragraph," she wrote. "I used to love this brand. Now I feel like they don't want me as a customer."
That email sits in a folder called "Lessons." I look at it every time I'm tempted to use small text for "aesthetic reasons." Since then, I've made it my mission to understand WCAG requirements — not as a checklist, but as a way to include people like Margaret.
This guide is what I wish I'd read before that launch.
1. WCAG Font Size: What the Guidelines Actually Say
Here's the surprising truth: WCAG doesn't specify a minimum font size in pixels. Not 16px, not 14px, not any number.
Why? Because accessibility depends on so many factors — font design (x-height matters more than point size), viewing distance, user vision, and device resolution. A 14px font with a large x-height can be more readable than a 16px font with a tiny x-height.
However, WCAG has clear requirements about resizability:
This means your layout must accommodate users who set their browser zoom to 200% or set a default font size of 24px in their browser settings. If your design breaks at 200% zoom, you fail WCAG.
2. The 16px Rule (And Why It's Not Arbitrary)
So if WCAG doesn't mandate 16px, why does everyone recommend it?
Because 16px is the default browser font size. When users don't change their settings, 1rem = 16px. When users do change their settings (for accessibility), 1rem scales proportionally.
Here's the breakdown:
- 16px (1rem): The accessibility gold standard. Respects user preferences. Readable by most people.
- 14px (0.875rem): Acceptable for secondary text if x-height is large. Pushing it for main body text.
- 12px (0.75rem): Too small for body text. Only use for captions, footnotes, or legal disclaimers.
- Below 12px: Fails WCAG for anything other than non-essential decorative text.
3. WCAG Font Size Chart by Element
4. px vs rem vs em: What WCAG Requires
This is where most accessibility failures happen — not because designers don't care, but because they don't understand the difference between CSS units.
Pixels (Absolute)
Fixed size. Does NOT respect user browser font settings.
"I set body text to 14px. User sets default to 20px. Text stays at 14px. Margaret can't read it."
Root EM (Relative)
Relative to root (<html>) font size. Respects user settings.
"I set body text to 1rem. User sets default to 20px. Text scales to 20px. Margaret reads comfortably."
EM (Relative)
Relative to parent element. Can cascade unpredictably.
"em compounds — a nested element's size multiplies by each parent. Use rem for predictable scaling."
/* ACCESSIBLE CSS — ALWAYS USE REM FOR TEXT */
html {
font-size: 100%; /* 16px default, respects user settings */
}
body {
font-size: 1rem; /* 16px — accessible default */
line-height: 1.6;
}
h1 {
font-size: 2.5rem; /* 40px — scales with user settings */
}
/* For responsive text that respects accessibility */
.responsive-text {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
/* minimum 16px, scales smoothly, maximum 20px */
}5. Responsive Font Sizing That Respects Users
Mobile users have different needs than desktop users. But WCAG applies regardless of device. Here's how to handle responsive typography accessibly:
Test on your phone:
clamp() for fluid typography that never goes below accessible minimums. Example: font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem); This ensures text never falls below 16px on mobile, scales smoothly, and never exceeds 20px on large screens.
6. How to Test Font Size Accessibility (The Margaret Test)
I call this the "Margaret Test" — because she's the reason I started doing it.
Set browser zoom to 200%
Chrome: Cmd/Ctrl + (plus). If text overlaps, cuts off, or requires horizontal scrolling — you fail.
Change default font size in browser settings
Chrome → Settings → Appearance → Font size → Large (20px). Check that your site uses rem and respects this setting.
Test on an actual phone
Emulators lie. Put your phone in bright sunlight and try to read. If you squint, your users will too.
Use automated testing tools
Our Typography QA Lab includes a legibility tester that flags font sizes below 14px and checks WCAG compliance.
7. Common Font Size Accessibility Mistakes
❌ Mistake 1 — Using px for text sizes
"I set body text to 14px." That's 14px forever. User sets default to 20px. Your text stays at 14px. They can't read it. Use rem instead.
❌ Mistake 2 — Mobile text smaller than 16px
Mobile users often read in bright sunlight, on trains, while walking. 14px on mobile is a readability disaster. Always use 16px minimum for mobile body text.
❌ Mistake 3 — Fixed containers that don't scale
Your text might be 16px, but if it's in a fixed-width container that doesn't expand at 200% zoom, text will overflow or get cut off. Use max-width with relative units.
❌ Mistake 4 — Assuming users can zoom
Not all users know how to zoom. Many don't know browser settings exist. Design for default accessibility, not as a fallback.
WCAG Font Size Checklist
Frequently Asked Questions
What is the minimum WCAG compliant font size?
WCAG doesn't specify a hard minimum, but the industry standard is 16px for body text, 14px for secondary text, and 12px for captions. Text must be resizable to 200% without breaking the layout.
Is 12px font size WCAG compliant?
12px is generally too small for body text under WCAG. It may be acceptable for captions, footnotes, or legal disclaimers if contrast is high (7:1 minimum) and users can zoom. For main content, use at least 16px.
What is the best unit for accessible font sizes?
rem. It's relative to the root font size and respects user browser settings. Avoid px for text. Use em sparingly (it compounds unpredictably).
Does WCAG require different font sizes for mobile?
WCAG doesn't distinguish between devices — the same 200% zoom requirement applies everywhere. However, best practice recommends 16px minimum for mobile body text due to smaller screens and varied lighting conditions.
How do I test if my font size is accessible?
Set your browser zoom to 200%. If text overflows, gets cut off, or requires horizontal scrolling, you fail WCAG. Also test by changing your browser's default font size to Large (20px) — if your site uses rem, it will scale correctly.