Font Size Accessibility — Minimum Sizes, User Zoom, and WCAG Requirements

WCAG 2.1 doesn’t set a minimum font size, but SC 1.4.4 requires text to be resizable up to 200% without loss of content. Using rem instead of px ensures text respects user browser preferences.

Convert font sizes between px and rem with the PX to REM Converter.

The core accessibility requirement

WCAG 2.1 Success Criterion 1.4.4 (Resize text, Level AA):

“Text can be resized without assistive technology up to 200 percent without loss of content or functionality.”

This means: if a user zooms to 200% in their browser, your text must remain readable and your layout must not break.

Why rem matters for accessibility

/* ❌ px: doesn't scale with user browser font size preferences */
body { font-size: 16px; }
p    { font-size: 14px; }
/* User sets browser to "larger text" → no change */

/* ✅ rem: scales with user's browser base font size */
body { font-size: 1rem; }   /* Inherits from browser (default: 16px) */
p    { font-size: 0.875rem; /* 14px at default, 17.5px if user sets 20px base */ }

/* User sets browser to 20px base → all rem values scale proportionally */

Most browsers let users set a preferred font size:

• Chrome: Settings → Appearance → Font size
• Firefox: Settings → Fonts → Default font size
• Safari: Preferences → Advanced → Accessibility font size

Minimum practical font sizes

For users with low vision: 18px+ body text is strongly recommended.

Don’t disable user zoom

<!-- ❌ Never do this — prevents zoom entirely: -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- ✅ Allow zoom: -->
<meta name="viewport" content="width=device-width, initial-scale=1">

The maximum-scale=1 and user-scalable=no directives violate WCAG 1.4.4. iOS Safari ignores these for accessibility reasons, but Android browsers may not.

Viewport units and accessibility

/* ❌ Pure vw font size: doesn't scale with user font preference */
h1 { font-size: 5vw; }

/* ✅ clamp() with rem: fluid but respects user base size */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/* At 16px base: clamps between 24px and 48px */
/* At 20px base (user preference): clamps between 30px and 60px */

Test your font sizes

// Test if text is visible at browser default sizes:
// 1. Open Chrome DevTools → Rendering → Emulate CSS media: prefers-reduced-motion
// 2. Zoom browser to 200% → does layout break?
// 3. Set browser font size to 24px → does text get too large?

// Check contrast + size combination:
// WCAG AA requires 4.5:1 contrast for normal text
// WCAG AA requires 3:1 contrast for large text (18px+ or 14px+ bold)

CSS reset for accessible typography

/* Accessible base typography */
html {
  font-size: 100%;    /* Respect user browser font size preference */
  text-size-adjust: 100%;   /* Prevent mobile auto-sizing */
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 1rem;    /* 16px at default browser settings */
  line-height: 1.5;   /* WCAG 1.4.12: line height ≥ 1.5x font size */
  font-family: system-ui, sans-serif;
}

/* WCAG 1.4.12 Text Spacing requirements: */
/* Users must be able to set: */
/* - Letter spacing ≥ 0.12em */
/* - Word spacing ≥ 0.16em */
/* - Line height ≥ 1.5 */
/* - Spacing after paragraphs ≥ 2em */
/* without loss of content. */

Responsive + accessible

/* Scale body font slightly for larger screens */
body {
  font-size: clamp(1rem, 1vw + 0.875rem, 1.125rem);
  /* min: 16px, preferred: scales with vw, max: 18px */
  /* But always respects the user's rem base! */
}

Related tools

• PX to REM Converter — convert px font sizes to rem
• Color Picker — check contrast with font sizes
• WCAG Contrast — contrast ratio requirements