Resize Text

Why it matters

Zoom is the accessibility feature almost everyone ends up using, because presbyopia, the gradual loss of close-up focus that comes with age, catches up with nearly everyone who lives long enough. A layout that falls apart at 200% tells older shoppers the site was never built with them in mind, and they are a growing share of who buys online. The half people forget is that the steps on the way up count too. If your zoom offers 125% and 150% before it reaches 200%, nothing may be lost at any of them. Testing only the endpoint can walk straight past the break.

Who this rule protects

Low-vision users who browse at 200% or higher every single day meet the failure before anyone else does. Older users run into it gradually as close focus goes. Anyone on a high-density screen with scaled text, and anyone pinch-zooming a phone, hits the same wall when a page blocks the zoom.

How to check it yourself

1. 1Set the browser zoom to 200% on key pages and complete a real task, such as reading a product page in full or filling out checkout from start to finish.
2. 2Watch for clipped text, elements that overlap each other, and controls that vanish or become impossible to reach once the zoom is applied.
3. 3Step through the zoom levels on the way up rather than only checking the endpoint, because nothing may be lost at 125% or 150% either.
4. 4Check the meta viewport tag. A user-scalable value of no fails, and so does a maximum-scale below 2. What you want to see is neither of them present.
5. 5Look for containers with a fixed height and overflow hidden, absolutely positioned content, and popups sized to their content at the original font size. Those are the three named causes of clipped text.
6. 6Check text-based form controls specifically, meaning inputs, textareas and buttons. Their text can stay put while everything around it grows.
7. 7Text may truncate in a genuinely constrained space, such as a table column or a mail-style list. That is allowed on two conditions. The full text is reachable on focus or activation, and something other than the truncation itself tells the user it is there.

Failures we see most often

• A meta viewport tag carries user-scalable=no, so pinch-zoom is blocked outright on a phone.
• A button with a fixed height clips its own label once the text enlarges at 200% zoom.
• Navigation overlaps the logo at 200% zoom and stops being clickable.
• Text is sized in viewport units as the main way the size is set, so it is tied to the window rather than to the reader's setting and browser zoom does nothing to it. Media queries that step the size up, or an on-page text-size control, can rescue it. Nothing else will.
• A form input keeps its original text size while the page around it enlarges.
• A popup is sized to its content at the default font size, so at 200% the content spills out of the box.
• A heading is clipped by an overflow hidden set on the container it sits in.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

• Low visionpeople who can see the screen but not easily

How this one is tested

We list 2 ACT rules against 1.4.4. Each one defines exactly what a checker looks at, which is how automated tools decide what to flag. Each one also checks a slice, so passing every rule here is not the same as meeting the criterion, and a rule can be proposed rather than approved or need a person to finish it. The note beside each says which.

• Meta viewport allows for zoomA tool can check this
• Zoomed text node is not clipped with CSS overflowA tool finds candidates, you decide

How to fix it

• Delete user-scalable=no and any maximum-scale below 2 from your viewport tag. One line, and one documented failure gone.
• Use a minimum height rather than a fixed height, so a container grows along with the text inside it.
• Size text in relative units, meaning em, rem or percentages, and keep viewport units for layout rather than for type.
• Reserve overflow hidden for decoration, and never put it on a box holding words somebody needs to read.
• Add 200% zoom to the release checklist, next to the mobile layout check it most resembles.
• Where a column genuinely cannot grow, truncate deliberately, reveal the full text on focus or activation, and show a visible sign that there is more to see.

Passes vs. fails