1.4.4 Resize Text

WCAG 2.2 · 1.4.4 AA Perceivable

What it requires

Except for captions and images of text, text must be able to be resized up to 200% without assistive technology and without loss of content or functionality. In practice the page must stay readable and usable when a user enlarges text — whether through browser zoom or a text-only size increase — so nothing is clipped, overlapped, or pushed off-screen, and no control becomes unreachable.

The browser already provides the resizing mechanism (zoom, or font-size scaling). The criterion is about your layout responding to it gracefully rather than breaking.

  • Low-vision users who enlarge text to read it without a screen magnifier.
  • Older users and anyone with mild visual impairment who bumps up the default font size.
  • People reading on small or high-density screens where default text is uncomfortably small.
  • Anyone relying on a browser or OS text-size preference that the page must honour.

How to detect it

Checks for Resize Text
Check How Catches it?
Browser zoom to 200% Press Ctrl/Cmd and + until zoom is 200%; read each page region. Manual — primary test.
Text clipping & overlap Look for cut-off words, overlapping blocks, or text trapped in fixed-height boxes. Manual / visual.
Functionality intact Confirm every link, button, and form control is still visible and operable at 200%. Manual / keyboard.
Relative units in CSS Check that font sizes and containers use rem/em/% rather than fixed px heights that trap text. Code review.
Automated tools Tools such as axe can flag a viewport that blocks zoom (e.g. user-scalable=no). Partial — cannot judge clipping/overlap.

How to fix it

  1. Never block zoom: remove maximum-scale and user-scalable=no from the viewport meta tag.
  2. Size text and spacing in relative units (rem, em) so it scales with the user’s preference.
  3. Avoid fixed pixel heights on text containers; let them grow with their content.
  4. Use responsive, reflowing layouts so enlarged text wraps instead of overflowing.
  5. Test at 200% zoom across breakpoints and fix any clipping, overlap, or hidden controls.
<!-- Allow zoom; size text relatively -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  body { font-size: 1rem; line-height: 1.5; }
  .card { padding: 1rem; }      /* grows with text, no fixed height */
</style>

Copy-paste tests

Automated coverage

The axe-core rule meta-viewport flags failures of this criterion by detecting a viewport that blocks zoom. Run it via the axe DevTools browser extension or axe-core in CI. Automated tools only catch some failures — they cannot judge clipping, overlap, or lost functionality at 200%.

Run this in the browser console

resize-text-audit.js 
// READ-ONLY: surfaces zoom-blocking and px-trapped text for review.
const vp = document.querySelector('meta[name="viewport"]');
console.log('viewport:', vp && vp.content);
if (vp && /user-scalable\s*=\s*no|maximum-scale\s*=\s*(1|0?\.\d+)\b/i.test(vp.content)) {
  console.warn('Viewport may block zoom — fails 1.4.4');
}
const trapped = [...document.querySelectorAll('body *')].filter(el => {
  const s = getComputedStyle(el);
  return el.textContent.trim() && s.height !== 'auto' &&
    /px$/.test(s.height) && s.overflow !== 'visible';
});
trapped.forEach(el => { el.style.outline = '2px solid red'; });
console.table(trapped.slice(0, 50).map(el => ({
  tag: el.tagName, height: getComputedStyle(el).height,
  overflow: getComputedStyle(el).overflow, text: el.textContent.trim().slice(0, 40)
})));

What to check manually: zoom the browser to 200% and confirm no text is clipped or overlapping; verify every link, button, and form control stays visible and operable at that size.