WCAG 1.4.4: Resize Text

Who this helps

The primary audience is people with low vision who do not use screen magnification software. That group is enormous: it includes people with mild visual impairments, age-related presbyopia, and temporary conditions like eye strain or dilated pupils after an eye exam. For most of them, bumping the browser zoom to 150% or 200% is the entire coping strategy — they never install assistive technology, so the page itself has to survive the zoom.

Zoomed text also helps people with reading and cognitive disabilities such as dyslexia, who often find larger text easier to track line by line, and anyone reading in poor conditions — bright sunlight on a phone, a laptop across the room, a presentation projected to the back of a hall.

The failure mode is quiet but severe. A page that clips its navigation at 200% does not look broken to the developer at 100% — but for the user who needs the zoom, half the site simply disappears. That is why the criterion insists on no loss of content or functionality, not merely “still mostly readable.”

The requirement and its exceptions

The requirement applies to all text rendered on the page: body copy, headings, navigation, form labels, text inside form controls, button text, error messages, tooltips. Any user-agent mechanism may be used to reach 200% — full-page zoom, text-only scaling, or a resize control the page provides itself. The user must not need assistive technology, and at 200%:

• →No content may be lost — text must not be clipped by fixed-height containers, truncated with ellipses that hide meaning, or pushed behind other elements.
• →No functionality may be lost — every link, button, form field, and menu must remain visible, reachable, and operable.
• →Horizontal scrolling is permitted at 200% (unlike 1.4.10 Reflow at 400%), as long as scrolling actually reveals all the content.

The two exceptions

Pass and fail examples

• ✓Pass — Article zooms cleanly to 200%. A blog post uses rem-based type and min-height containers. At 200% browser zoom the text enlarges, containers grow with it, and every link and button remains visible and clickable.
• ✓Pass — On-page text size control. A news site offers an 'A / A+ / A++' widget that scales all page text up to at least 200%. Because a mechanism to reach 200% without loss exists, the criterion is satisfied.
• ✗Fail — Clipped navigation at 200%. A header sets height: 60px with overflow: hidden. At 200% zoom the enlarged menu labels are cut in half and the last two menu items disappear entirely — loss of content and functionality.
• ✗Fail — Zoom disabled on mobile. The viewport meta tag includes user-scalable=no. Users on phones cannot enlarge text at all, so text cannot be resized up to 200% by any user-agent mechanism.
• ✗Fail — Overlapping text in cards. Card titles are absolutely positioned over fixed-size images. At 200% the enlarged titles overlap the card body text, making both unreadable even though nothing is technically hidden.

Code examples

Never disable zoom in the viewport meta tag

The single most damaging anti-pattern is one line of HTML. user-scalable=no or maximum-scale=1 blocks pinch-zoom on mobile, so no user-agent mechanism can enlarge the text.

<!-- ✗ Failing: zoom disabled, text can never reach 200% on mobile -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<!-- ✓ Passing: users can zoom freely -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

Let containers grow with their text

Fixed pixel heights plus overflow: hidden is where zoomed text goes to die. Use relative units and min-height so boxes expand when the text does.

/* ✗ Failing: enlarged text is clipped at 200% */
.banner {
  height: 60px;
  overflow: hidden;
  font-size: 14px;
}

/* ✓ Passing: the container grows with its content */
.banner {
  min-height: 3.75rem;
  font-size: 0.875rem;   /* rem tracks the user's text-size setting too */
  line-height: 1.5;
}

Beware viewport-unit font sizes

Text sized purely in vw units does not respond to text scaling and can resist zoom — the documented failure F94. If you want fluid type, combine a viewport unit with a rem component inside clamp().

/* ✗ Failing: pure vw text ignores the user's text-size preference */
h1 {
  font-size: 4vw;
}

/* ✓ Passing: fluid, but anchored to rem so it still scales for the user */
h1 {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

Common failures

• ✗Disabling zoom with user-scalable=no or maximum-scale=1 in the viewport meta tag, blocking all text resizing on mobile.
• ✗Fixed-height containers with overflow: hidden that clip or swallow text once it grows (documented failure F69).
• ✗Text-based form controls that do not resize with the surrounding text, leaving labels large but input text tiny (failure F80).
• ✗Font sizes in viewport units (vw/vh) alone, which ignore both text scaling and, in some configurations, zoom (failure F94).
• ✗Absolutely positioned text blocks that overlap neighboring content at 200%, making both unreadable.
• ✗Truncating enlarged text with ellipses so that critical words — prices, dates, button labels — are cut off with no way to reveal them.
• ✗Testing only at desktop widths: a layout can pass at 1920px and fail at 1366px, where 200% zoom leaves half the columns off-screen with no scrollbar.

How to test for 1.4.4

1. 1

   Zoom the browser to 200%

   Press Ctrl/Cmd and + until the browser reports 200% (or set it directly in the browser menu). Walk through the page: read every block of text, open every menu, and confirm nothing is clipped, overlapped, or missing.

2. 2

   Exercise every interactive element at 200%

   Content surviving is only half the criterion. Submit the form, open the dropdown, dismiss the modal, use the search box — all while zoomed. A button pushed off-screen with no way to scroll to it is a loss of functionality.

3. 3

   Try text-only scaling

   In Firefox, enable View → Zoom → Zoom Text Only and scale to 200%. Text-only scaling stresses fixed-size containers much harder than full-page zoom and quickly exposes clipping and overlap that page zoom hides.

4. 4

   Check the viewport meta tag and pinch-zoom on mobile

   View source and look for user-scalable=no or maximum-scale in the viewport meta tag. Then actually pinch-zoom on a real phone — some in-app browsers ignore the tag, so verify the behavior, not just the markup.

5. 5

   Run automated checks, then verify manually

   Automated tools (axe, Lighthouse) reliably flag the zoom-blocking viewport meta tag, and Lighthouse flags maximum-scale below 5. But no tool can judge whether your layout loses content at 200% — that verdict requires human eyes at zoom.

Make the 200% pass part of every visual QA round, and work through the full WCAG 2.2 checklist for the neighboring criteria — 1.4.10 Reflow and 1.4.12 Text Spacing fail in the very same layouts.

Frequently asked questions