WCAG 1.4.10 Reflow requires that your content works at high zoom without forcing the user to scroll in two directions at once. Specifically, content must reflow into a single column with no loss of information or function when the space is narrowed to 320 CSS pixels wide — the width you get when a 1280px browser window is zoomed to 400%.

What WCAG 1.4.10 actually requires

The normative wording is precise. Content must be presentable “without loss of information or functionality, and without requiring scrolling in two dimensions” for vertical-scrolling content at a width equivalent to 320 CSS pixels, and for horizontal-scrolling content at a height equivalent to 256 CSS pixels. The only carve-out is for “parts of the content which require two-dimensional layout for usage or meaning” (W3C Understanding 1.4.10).

The two numbers map to two reading directions. 320px is the width target for languages that scroll vertically (English and most others). 256px is the height target for vertically-written languages. For nearly every site you’ll build, 320px is the number that matters.

Where does 320 come from? Take a standard 1280 CSS pixel desktop viewport and zoom the browser to 400%. Four times magnification divides the usable width by four: 1280 ÷ 4 = 320. That’s roughly the width of a small phone held in portrait. So the practical test is simple — a sighted developer can reproduce a low-vision user’s experience just by zooming in.

Who 1.4.10 affects

Reflow is a low-vision criterion. It primarily helps people who enlarge text with browser zoom because they cannot comfortably read it at default size — a large group that includes older adults with age-related vision loss, people with conditions like macular degeneration or glaucoma, and anyone who simply needs bigger type.

These users are not screen-reader users. They see the screen, but only a small portion of it at a time when magnified. When a layout forces horizontal scrolling, every single line of text requires panning right to finish reading and back left to start the next line. As the Deque summary of real user feedback puts it: “It’s nearly impossible to read text if I have to scroll right and left to read each line. It’s disorienting and I lose my place.” Reflow is what makes magnification usable instead of exhausting. It also benefits people on small screens, split-screen multitasking, and anyone with a low-resolution display.

Concrete failures (and the fix)

Most reflow failures come from the same handful of CSS patterns. Here are the ones we fix most often during remediation.

Fixed-pixel widths. A container hard-coded to a desktop width can’t shrink, so it spills past 320px and triggers horizontal scrolling.

/* Fails: 960px never fits a 320px viewport */
.container { width: 960px; }

/* Passes: shrinks down, capped on large screens */
.container { width: 100%; max-width: 960px; }

Content that disappears after reflow. This is the named failure F102 — content that was visible at full width becomes unavailable at 320px instead of being repositioned or wrapped. The W3C is explicit that content may move, but it cannot vanish: it must still be reachable in a single column, behind a disclosure widget, or via a link to an alternative view. Set widths in flexible units and let text wrap; never overflow: hidden your way out of a layout problem.

Long unbreakable strings. A long URL, email, or code token in a narrow column pushes the whole line wider than 320px.

.content { overflow-wrap: break-word; }

Wide data tables. A table itself can require two-dimensional layout — that’s allowed. But you can’t hide a page layout behind that exception, and individual cells must still reflow. The accessible pattern is to let the table scroll horizontally inside its own region while the rest of the page reflows:

.table-wrap { overflow-x: auto; }

Sticky and fixed elements eating the viewport. A large fixed header or cookie banner that occupies a big share of a 400%-zoomed screen can leave almost no room for content, or can overlap and obscure focusable elements. Keep fixed regions small at high zoom, or release them with a media query.

Multi-column layouts that don’t collapse. Side-by-side columns built with fixed widths or floats stay side-by-side at 400%. The fix is media queries that stack them — the same responsive technique mobile design already uses (W3C):

@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
}

How to test 1.4.10 Reflow

You can verify this criterion by hand in a couple of minutes — automated scanners catch some of it, but zoom behavior is best confirmed visually.

  1. Set the window to 1280px wide. A maximized desktop browser is usually wider, so resize it or use responsive dev tools to get a 1280px viewport.
  2. Zoom the browser to 400%. Use Ctrl/Cmd and + four or five times until the zoom indicator reads 400%. This is page zoom, not text-only zoom.
  3. Look for a horizontal scrollbar. If one appears for normal page content, you have a failure. Vertical scrolling is expected and fine — it’s the second direction that fails.
  4. Check that nothing vanished. Confirm menus, buttons, and text are all still present and reachable, not clipped or hidden — content that simply disappears at 320px is failure F102.
  5. Test interactive states. Open the navigation menu, trigger a modal, expand an accordion — make sure they reflow too, not just the static page.
  6. Allow the real exceptions. A data table or embedded map may scroll within its own box. That’s permitted; a whole-page sideways scroll is not.

Browser zoom is the single most revealing test, and it needs a human eye to judge whether content that wrapped is still usable. That’s why thorough conformance work pairs scanners with manual testing rather than trusting a widget.

Reflow matters legally because it sits at Level AA of WCAG 2.1 AA — the conformance level the Department of Justice and the overwhelming majority of ADA settlements treat as the working standard for an accessible website. The DOJ’s own web accessibility guidance explicitly flags the problem this criterion solves: “People with vision disabilities may need to be able to use a browser’s zoom capabilities to increase the size of the font so they can see things more clearly.” A site that breaks at 400% zoom directly contradicts that expectation.

Practically, reflow failures are easy for a plaintiff’s tester to document — they just zoom in and screenshot the horizontal scrollbar. That ease feeds the broader litigation volume: UsableNet tracked over 4,000 ADA-related digital lawsuits in 2024 (UsableNet 2024 year-end report), and demand letters in those ADA website cases typically bundle a list of WCAG 2.1 AA failures rather than naming a single one. It’s worth being clear: the DOJ has not issued a binding technical regulation for private businesses, and this page is general information, not legal advice — for your specific exposure, consult a qualified attorney.

Importantly, an overlay widget cannot fix this. Reflow is a property of your CSS layout; a bolt-on “zoom” or “bigger text” button doesn’t make your real grid collapse at 400%, and may even fight the browser’s native zoom. Genuine conformance means fixing the layout itself, which is why Curbcut works as hands-on code remediation and is deliberately anti-overlay.

Where Reflow fits with the other zoom criteria

Reflow rarely fails alone. It is the layout half of a small cluster of low-vision criteria that all assume the user has magnified the page, and the same 400%-zoom test session usually surfaces all of them at once. Text resizing covers whether the text itself scales without being clipped; 1.4.10 then asks whether the page survives the narrower column that zoom produces. 1.4.12 Text Spacing is the close cousin — both fail when a fixed-height or overflow: hidden container refuses to grow, so a card that clips its label under F104 is often the same card that drops content under F102 at 320px. And because magnified users also read low-contrast type a few inches from the glass, color contrast almost always rides along in the same audit. You can see how all of these slot together in the full set of success criteria.

The practical payoff is that reflow is one of the cheapest wins in the whole bundle. Where text-spacing or contrast fixes can mean touching dozens of components, a failing reflow page often comes down to one max-width: 960px swap, one overflow-wrap: break-word, and a grid-template-columns: 1fr media query — changes that leave your desktop design untouched. If you’d rather not resize a window to 1280px and zoom through every template by hand, start with a free scan and we’ll screenshot exactly which elements force a horizontal scrollbar at 400% — then collapse them for you.