Zoom to 200%: What Breaks When Text Gets Bigger

Low-vision users zoom their browsers to 300 or 400 percent to read, and the page has to survive it. WCAG requires text to resize to 200 percent without loss of content, and the page to reflow at a width of 320 CSS pixels without forcing two-dimensional scrolling. Most storefronts fail both, and the cause is usually a fixed height set years ago.

The three criteria, and what each one asks

Success Criterion 1.4.4, Resize Text, is the oldest of the three. Text must be resizable up to 200 percent without loss of content or functionality, except for captions and images of text. It is about whether zooming is possible at all, and it fails most often on text inside fixed-height containers that clip when the text grows.

Success Criterion 1.4.10, Reflow, added in WCAG 2.1, goes further. Content must be presentable without loss of information or functionality, and without requiring scrolling in two dimensions, at a width equivalent to 320 CSS pixels, or a height of 256 CSS pixels for horizontally scrolling content. A width of 320 CSS pixels is equivalent to a 1280 pixel wide browser window zoomed to 400 percent. Vertical scrolling is fine and expected. Horizontal scrolling is generally not.

Success Criterion 1.4.12, Text Spacing, covers the case where a user overrides the site's CSS with their own spacing: line height to at least 1.5 times the font size, paragraph spacing to at least 2 times, letter spacing to at least 0.12 times, and word spacing to at least 0.16 times. When that override is applied, no content may be clipped, cut off, or overlapped. The three criteria together say the same thing from three directions: the layout must bend, not break, when the text gets bigger.

Where it breaks on a storefront

Fixed-width and fixed-height containers are the cause in nearly every case. A cart line-item row sized just tightly enough to fit the default text. A sticky add-to-cart bar with a fixed height. A promo badge with a set width. At default zoom they look fine. At 200 percent the text overflows the box, and at 400 percent it disappears behind the next element or slides off the edge of the viewport, requiring horizontal scrolling to read a line that should have wrapped. Related reading: Watching Breadcrumb Navigation for Landmarks, Labels, and Keyboard Use.

The exceptions are narrow and specific. Content that requires a two-dimensional layout for usage or meaning, data tables, maps, diagrams, video, games, and toolbars that must stay in view, may scroll in two directions. But the exception applies only to that section. The text around a data table must still reflow, and a table that is the only element on the page does not make the whole page exempt.

The fix is the responsive toolkit the site should already have: flexible layouts, relative units, max-width instead of fixed widths, and media queries that collapse multi-column layouts into a single column at narrow widths. Technique C32, using media queries and grid CSS, and technique C31, using CSS Flexbox, are the documented paths. A layout built on flexbox and grid reflows by default. A layout built on fixed pixel widths does not, and no amount of testing fixes a layout that was built rigid.

How to test it

Set the browser viewport to 1280 pixels wide and zoom to 400 percent, which is equivalent to a 320 CSS pixel viewport, or use DevTools to set the viewport directly to 320 pixels wide. Then scroll through the page and check that everything is viewable by scrolling vertically only, with no horizontal scrollbar present on anything other than a genuine data table. Check the same pages at 200 percent zoom for clipped text in fixed-height containers.

Test the templates that carry the money: the homepage, a product page, the cart, and the checkout. A promo badge that clips at 400 percent is a cosmetic defect. A checkout button that disappears behind a sticky bar at 400 percent is a lost sale and a conformance failure, and it is the kind of failure a low-vision shopper hits on the exact page where the store can least afford it. More on this: 3,117 Federal Filings in 2025, and Ecommerce Took the Biggest Share.

Frequently asked questions

What is the difference between 1.4.4 and 1.4.10?

1.4.4 requires text to resize to 200 percent without loss. 1.4.10 requires the whole page to reflow at 320 pixels wide, equivalent to 400 percent zoom, without two-dimensional scrolling.

Are data tables exempt from reflow?

Yes, in part. Content that needs a two-dimensional layout for usage or meaning, including data tables, may scroll in two directions. The exception applies only to that section, not the whole page.

How do I test reflow?

Set the viewport to 1280 pixels wide and zoom to 400 percent, or set DevTools to 320 pixels wide. Everything should be viewable by vertical scrolling only.

What is the most common cause of reflow failure?

Fixed-width and fixed-height containers: a cart row, a sticky bar, or a promo badge sized just tightly enough for the default text, which clips or overflows when the text grows.