Zoom and reflow: making pages work at 200 percent and 400 percent zoom

The criteria

• 1.4.4 Resize Text (AA): text can be resized up to 200 percent without assistive technology and without losing content or function.
• 1.4.10 Reflow (AA, from WCAG 2.1): content can be presented without loss of information or function and without scrolling in two dimensions at a width equivalent to 320 CSS pixels (400 percent zoom on a 1280 pixel window). Exceptions include content that needs two-dimensional layout, such as maps, large data tables and toolbars.
• 1.4.12 Text Spacing (AA, from WCAG 2.1): content must not break when users increase line height, paragraph spacing, letter spacing and word spacing.

Why it matters

People with low vision zoom in to read. If a layout forces them to scroll sideways on every line, or text overlaps and clips at larger sizes, the page becomes unusable. Phones are effectively zoomed-in screens, so fixing reflow also improves the mobile experience.

Test it in a minute

1. Open the page at a desktop width of about 1280 pixels.
2. Zoom to 400 percent (Ctrl or Command and +). The page should now be a single column about 320 CSS pixels wide.
3. Scroll down. There should be no sideways scrolling for text and images, and nothing cut off.
4. Check menus, forms and the cart still work.

Common fixes

/* Before: fixed pixel widths force sideways scrolling */
.container { width: 1100px; }
.card { width: 360px; height: 120px; overflow: hidden; }

/* After: fluid widths, content decides height */
.container { max-width: 1100px; width: 100%; padding-inline: 1rem; }
.card { width: min(100%, 360px); min-height: 120px; }

/* Never block pinch zoom */
<!-- Before (fails) -->
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
<!-- After -->
<meta name="viewport" content="width=device-width, initial-scale=1">

• Size fonts in rem or em, not fixed px, so browser text settings apply.
• Avoid fixed heights on text containers; use min-height.
• Let images and videos scale with max-width: 100%.
• Stack columns on narrow screens with flexbox wrap or CSS grid.
• For wide data tables, allow the table to scroll inside its own container rather than scrolling the whole page.

Clir's browser-based checks cover zoom reflow and text spacing; pair them with a quick zoom test of your own. The hand-testing steps include this check.

Tables, maps and other exceptions

WCAG recognizes that some content, such as large data tables, maps, diagrams and toolbars, needs two-dimensional layout. For those, let the element scroll inside its own container and keep the rest of the page in a single column. Do not let the exception swallow the whole page.

What the numbers mean

Why some people zoom, and why it breaks sites

People with low vision often enlarge a page to 200 or 400 percent. Others use a larger default font or a phone with a larger text setting. When a layout is built with fixed pixel widths, enlarging it makes text spill, overlap, vanish behind other elements or force sideways scrolling. A responsive layout that adapts to narrow widths solves most of this, because zooming a browser to 400 percent makes the viewport behave like a narrow screen.

Causes and fixes

<!-- Fails -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

Test on real content

Testing with a short, tidy page can hide problems. Try your longest product name, your biggest menu and the page with the most filters. Look at the cart, the checkout form and error messages, because messages often make a layout wider. Open any popups at 400 percent and confirm that you can reach the close button.

Orientation and small screens

WCAG 1.3.4 asks that content works in both portrait and landscape unless a particular orientation is essential. Some people mount a tablet in a fixed position and cannot rotate it, so locking an app to one orientation shuts them out. Test your site on a phone in both directions.

A worked example: a sticky header at high zoom

A store has a sticky header that contains a logo, a search box, a menu and a cart. At 100 percent zoom it takes up about 90 pixels. At 400 percent zoom on a laptop, the header takes up most of the screen, and the content scrolls beneath a thin slice. A visitor who zooms has almost no room to read.

The solution is to let the header scroll away on narrow widths, or collapse it into a compact bar with a menu button. The designer uses a media query to turn off sticky positioning below a certain width. The site now behaves well at 400 percent zoom, and phone users also gain screen space.

Text spacing test, step by step

1. Use a text spacing bookmarklet or browser extension that applies the WCAG values: line height 1.5 times the font size, paragraph spacing 2 times, letter spacing 0.12 times and word spacing 0.16 times.
2. Look at buttons, menus, cards and form labels. Is any text clipped, hidden or overlapping?
3. Fix fixed heights, overflow:hidden containers and absolute positioning.
4. Repeat on a phone-sized window.

Responsive design is an accessibility feature

Sites built with responsive layouts are easier to make accessible, since the same flexibility that adapts to a phone adapts to zoom. If your site has a separate mobile version, check both. If you plan a redesign, test the layouts at 320 pixels and at 400 percent zoom while you design, not after launch. See the redesign checklist.

Your questions about zoom and reflow

• Does a responsive site automatically pass reflow? Usually most of it, but test. Fixed-width tables, wide images, long unbroken strings and some embedded widgets can still cause sideways scrolling.
• What about data tables? They are an exception, since a table may need two dimensions to make sense. You can still help by allowing the table to scroll inside its own container and keeping the rest of the page in one column.
• How do I test 320 pixel width without a small phone? Zoom your desktop browser to 400 percent on a window 1280 pixels wide, or use the responsive mode in developer tools.
• Does the text spacing criterion mean I must change my line height? No. It means your layout must still work when a user applies larger spacing with their own settings or extension.

A zoom-friendly build checklist

1. Use relative units such as rem and percentages for text and containers.
2. Use max-width on images and media.
3. Avoid fixed heights on text containers.
4. Let navigation collapse into a menu on narrow widths.
5. Avoid horizontal scrolling for ordinary content.
6. Test dialogs and menus at high zoom.
7. Do not disable pinch zoom on mobile.

These habits also make your site easier to maintain, since layouts that adapt to zoom adapt to new devices as well.

A worked example: a checkout page at 400 percent

A checkout page uses a two-column layout: a form at the left and an order summary at the right. At 400 percent zoom on a laptop, the page keeps both columns, so the viewport scrolls sideways and the order summary is cut off. A visitor who zooms must scroll horizontally for every field.

The fix is a media query that stacks the columns on narrow widths, with the order summary collapsing into an expandable section above the form. Fields are set to full width, the pay button is placed at the end and a total remains visible. At 400 percent, the page is a single column that scrolls down only. The same fix improves the phone layout, and no new features were needed.

Content that often breaks

In short

If someone can zoom your page to 400 percent and read it by scrolling down only, with nothing cut off, you have met the reflow requirement for most content. If they can also increase text spacing without losing anything, you have met the text spacing requirement. These are two of the quickest accessibility checks to run, and two of the most valuable.

In short, with related checks

Zoom and reflow come down to three tests: enlarge text to 200 percent, zoom to 400 percent and read in one column, and apply increased text spacing. If all three leave your content intact, you have met four WCAG criteria in a few minutes. Fix fixed widths, fixed heights, tall sticky headers and blocked zoom first.

• Check that colors still pass at any size. See color contrast.
• Check that controls remain large enough on small screens. See 24-pixel target rule.
• Check that checkout works at high zoom. See the ecommerce checklist.

Who to involve

Ask a person with low vision, or someone who zooms a great deal, to use your site for a few minutes. Their feedback often shows problems that testing at 200 and 400 percent does not, such as a layout that technically reflows but is hard to follow. Offer to pay for their time, and thank them for their help.

Zoom on phones and tablets

On phones, people zoom with a pinch gesture or increase the text size in the device settings. Both should work. Test your site with the phone's text size set to large or extra large, and check that menus, buttons and forms still fit. Avoid fixed-size containers that cut text off when it grows. If your site relies on a native app wrapper, make sure the wrapper does not lock the scale.

Printing and other viewing modes

Some readers print a page or use a reading mode in the browser to get a simpler layout. A page that is built with real headings, lists and text works well in those modes. Pages built from images of text and layered boxes do not. It is an informal test, but a useful one: if your page makes sense in a reading mode, its structure is probably sound.

More questions about zoom and reflow

• Do I need a separate mobile site? No. A responsive site is usually easier to keep accessible.
• What if my page has a map or a wide table? Place it in a container that scrolls within the page, and give a text alternative, like an address.
• Is it OK to set a maximum width for text? Yes, a comfortable measure of around 60 to 80 characters is good, so long as the text can still reflow.
• Will zooming break my fixed footer? It can. Test it, and consider making fixed bars non-sticky at narrow widths.

Test text spacing

WCAG 1.4.12 sets the values to test with: line height 1.5 times the font size, paragraph spacing 2 times, letter spacing 0.12 times and word spacing 0.16 times. Apply them with a text-spacing bookmarklet or your browser's developer tools and check that nothing is clipped or overlaps.