WCAG Font Size Requirements 2026:
The Complete Guide to Accessible Typography

1. WCAG Font Size: What the Guidelines Actually Say

Here's something that surprised me when I first read the WCAG guidelines: WCAG 2.1 doesn't specify a minimum font size. Not 12px. Not 14px. Not 16px. Nothing.

Instead, WCAG requires that text can be resized up to 200% without loss of content or functionality. This means:

• Your layout must not break when users zoom to 200%
• You should use relative units (rem, em) instead of absolute pixels when possible
• Text should not be set in viewport units (vw) that prevent resizing

But here's the catch: while WCAG doesn't specify a minimum, real-world usability does. 16px has become the de facto standard for body text, and for good reason.

2. The 16px Rule (And Why It's Not Arbitrary)

The 16px rule comes from a combination of factors: browser defaults, readability research, and user behavior. Most browsers default to 16px body text. When you set font-size: 100% on the html element, that's exactly what you get.

3. WCAG 2.2 Updates: What's New for Typography

WCAG 2.2 introduced some important updates that affect typography:

• Focus Appearance (2.4.13): Focus indicators must have a contrast ratio of at least 3:1 against adjacent colors.
• Target Size (2.5.8): Interactive elements must be at least 24x24px (with some exceptions).
• Dragging Movements (2.5.7): Any drag operation should have a simpler alternative.

While these aren't specifically about font size, they affect how your typography interacts with UI elements. Larger text requires larger touch targets, and focus indicators need to be visible against your text backgrounds.

4. How to Test Font Size Compliance

5. Responsive Typography & WCAG

Responsive typography is about more than just adjusting sizes for different screens. Here's what the WCAG guidelines mean for responsive text:

/* WCAG-compliant responsive typography */\nhtml {\n  font-size: 100%; /* 16px default */\n}\n\nbody {\n  font-size: 1rem; /* 16px */\n  line-height: 1.6;\n}\n\n/* Allow users to resize text */\n@media (max-width: 768px) {\n  body {\n    font-size: 1rem; /* Still 16px - don't go below! */\n  }\n}\n\n/* Use clamp for fluid sizing */\nh1 {\n  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);\n}\n\n/* Never use viewport units alone for text */\n/* ❌ font-size: 2vw; */\n/* ✅ font-size: clamp(1rem, 2vw, 1.5rem); */

6. Tools I Use to Test Font Sizes