Skip to main content
Perceivable WCAG 1.4.4

1.4.4 Resize Text

Text can be resized up to 200% without loss of content or functionality, without requiring assistive technology.

Level AA Serious WCAG 2.0 (new) WCAG 2.1 WCAG 2.2
meta-viewport meta-viewport-large

What This Rule Means

WCAG 1.4.4 requires that text can be scaled up to 200% of its original size using standard browser mechanisms without losing content or functionality. Users must be able to zoom in or adjust text size in their browser settings and still have the page work properly — no clipped text, no overlapping elements, no hidden controls.

This criterion specifically focuses on browser-level zoom and text-size adjustments, not assistive technology magnification. The page must remain functional when a user uses Ctrl+Plus (or Cmd+Plus) to zoom to 200%. Content should reflow rather than require horizontal scrolling.

Why It Matters

Many users with low vision rely on browser zoom as their primary accommodation. Unlike screen magnifiers, browser zoom is free, built-in, and requires no installation. If a website prevents zoom or breaks at 200%, these users lose the ability to read content. Approximately one in six people over 70 have visual acuity that benefits from enlarged text.

Mobile users with visual impairments are especially affected when viewport meta tags disable pinch-to-zoom. This is a common pattern in responsive design that directly conflicts with accessibility requirements.

Related axe-core Rules

  • meta-viewport — Flags pages where the viewport meta tag sets maximum-scale to a value less than 2 or sets user-scalable=no, preventing users from zooming.
  • meta-viewport-large — Flags pages where maximum-scale is set to a value less than 5, which while not a direct WCAG failure, limits users who need more than 200% zoom.

How to Test

  1. Open the page in a desktop browser and zoom to 200% using Ctrl+Plus (Cmd+Plus on Mac).
  2. Verify that all text content is still visible and no text is clipped or hidden behind other elements.
  3. Ensure all interactive controls are still usable and no functionality is lost.
  4. Check that the page reflows content rather than requiring horizontal scrolling.
  5. Inspect the <meta name="viewport"> tag. It must not contain user-scalable=no or maximum-scale less than 2.

How to Fix

Start with a proper viewport meta tag that permits zooming:

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

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

Use relative units for font sizes so text scales with browser settings:

/* Use rem for consistent scaling */
body {
  font-size: 1rem; /* 16px default, scales with browser */
}

h1 { font-size: 2rem; }    /* 32px at default */
h2 { font-size: 1.5rem; }  /* 24px at default */
p  { font-size: 1rem; }    /* 16px at default */

/* Avoid fixed pixel sizes for text */
/* Bad: p { font-size: 14px; } */

/* Use em for component-relative sizing */
.card-title {
  font-size: 1.25em;
}

Ensure containers expand to accommodate larger text:

.content-box {
  /* Use min-height instead of fixed height */
  min-height: 200px;
  /* height: 200px; <-- This clips text at larger sizes */

  /* Avoid overflow: hidden on text containers */
  overflow: visible;
}

.nav-item {
  /* Allow wrapping instead of fixed width */
  white-space: normal;
  /* white-space: nowrap; <-- This causes clipping */
}

Common Mistakes

  • Setting user-scalable=no or maximum-scale=1 in the viewport meta tag to prevent pinch-to-zoom on mobile.
  • Using fixed-pixel heights on containers that hold text, causing overflow clipping at larger text sizes.
  • Setting font sizes in px instead of rem or em, preventing text from scaling with browser settings.
  • Navigation bars that overflow or break when text is enlarged, hiding menu items.
  • Absolutely positioned text elements that overlap other content when text size increases.

Resources