Perceivable · Level AA · 1.4.4
Resize Text
Text needs to be resizable up to 200% using nothing but the browser's native zoom, without losing content or breaking functionality. This is the sibling requirement to 1.4.10 Reflow — that one is about the layout surviving the zoom, this one is about the text itself being allowed to scale at all.
- Low vision
How to recognize it
Zoom the browser to 200% and check two things: does the text actually get bigger, and does anything break or vanish once it does? A text container with a fixed height and overflow: hidden is a common failure — at 200% the enlarged text gets clipped off instead of the container growing to fit it. A button or form field with a fixed pixel height that doesn't grow with its label fails the same way, with text overlapping or getting cut. The most severe version blocks zooming outright: a viewport meta tag with user-scalable=no or maximum-scale=1 disables the browser's native pinch-zoom and Ctrl+/Ctrl- zoom entirely, regardless of what the rest of the CSS would otherwise allow — a leftover from an old mobile-web pattern that directly fails this criterion for every zoom-dependent user at once.
How to fix it
Never disable the browser's native zoom — drop user-scalable=no and maximum-scale=1 from the viewport meta tag; they block this criterion outright, not just make it harder. Use relative units (rem, em, %) for font sizes and container dimensions instead of fixed pixel heights, so containers grow along with the text inside them rather than clipping it. Avoid replacing real text with an image of text purely for a font effect a stylesheet could achieve — images of text are technically exempt from this criterion, but they also pixelate badly under zoom, which is exactly why real text is almost always the better choice regardless.
Example
Avoid
<meta name="viewport" content="width=device-width, user-scalable=no">.card-title {
height: 20px;
font-size: 14px;
overflow: hidden;
}.btn {
height: 32px;
font-size: 14px;
padding: 0;
overflow: hidden;
}Prefer
<meta name="viewport" content="width=device-width, initial-scale=1">.card-title {
min-height: 20px;
font-size: 0.875rem;
}.btn {
min-height: 2rem;
padding: 0.5rem 1rem;
}