1.4.4 Resize text

Text can be enlarged to 200% without assistive technology, and nothing is lost.

Level AA

What the automated checks look for

The page stops people from zooming, which people with low vision rely on.

Who it affects. People with low vision can't pinch to zoom on a phone to read the text.

How to fix it. Remove user-scalable=no and any maximum-scale below 2 from the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

When text is enlarged to 200%, text here is cut off, so people who enlarge text lose it.

Who it affects. People with low vision who set larger text in the browser lose words at the edge of a box that can't grow.

How to fix it. Size text in rem, and let boxes that hold text grow: min-height instead of height, no overflow: hidden.

<style>.badge { font-size: 0.875rem; min-height: 1.5rem; }</style>

The viewport meta sets user-scalable or maximum-scale to a value a browser can't read, and an unreadable user-scalable counts as no.

Who it affects. People who zoom to read can find pinch zoom off on a phone, so small text stays small.

How to fix it. Remove user-scalable and maximum-scale from the viewport meta, or set them to values that allow zoom.

<meta name="viewport" content="width=device-width, initial-scale=1">