Zoom and Reflow

Users must be able to zoom content without losing usability — interfaces should work at high zoom levels.

01 — Purpose

Usable at high zoom

Users must be able to zoom content without losing usability — interfaces should remain usable at high zoom levels.

Low-vision users rely on browser zoom and text scaling. WCAG expects content to reflow without horizontal scrolling at 400% zoom. Fixed layouts, clipped controls, and overlapping UI fail that bar quickly.

See responsive strategy and colour and contrast systems.

02 — Principles

Content should remain usable at 400% zoom

Zoom support is critical for many low-vision users.

  • responsive layouts — reflow to single column; no fixed viewport traps
  • flexible containers — min-width and max-width that adapt, not rigid grids
  • readable typography — relative units; text scales with user settings
  • preserved functionality — controls stay reachable and operable when enlarged

03 — Practice

Good zoom and reflow

Test at 200% and 400% browser zoom on real pages — not only at default scale.

  • use relative units — rem, em, % — for type and spacing; see typography systems
  • allow text wrapping — no truncation that hides meaning at large sizes
  • stack navigation and toolbars — avoid horizontal toolbars that clip when zoomed
  • respect user text sizing — avoid disabling zoom via viewport meta
  • test modals and sticky headers — they should not cover primary content at high zoom

04 — Avoid

Zoom failures

Clipped content and scroll traps block low-vision users from completing tasks.

  • clipped content — overflow hidden on containers that cut off text or controls
  • horizontal scrolling traps — wide tables or layouts with no reflow path
  • overlapping UI — fixed headers, FABs, or toasts covering focused fields
  • hidden controls — icon-only actions that disappear or overlap when scaled
  • maximum-scale=1 or user-scalable=no in viewport — never disable zoom

05 — Close

Zoom to 400% and complete the task

If the critical path breaks when enlarged, the layout is not accessible.

Pick your busiest template — checkout, settings, or article. Zoom to 400%. Complete the main task without horizontal scrolling. Fix reflow before debating pixel-perfect design.

See responsive strategy, reading order, and the accessibility QA checklist.