WCAG 1.4.10: Reflow
A person with low vision may zoom a page to 400% just to read it. At that magnification, a fixed-width layout forces them to scroll left and right on every single line — a maddening, error-prone way to read. This Level AA criterion requires that content reflow into a single column at a 320 CSS pixel width (the equivalent of 400% zoom on a 1280px screen) without two-dimensional scrolling or any loss of information.
The success criterion, in full
Content can be presented 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; horizontal scrolling content at a height equivalent to 256 CSS pixels. Except for parts of the content which require two-dimensional layout for usage or meaning.
Why reflow matters
People with low vision routinely enlarge web content — through browser zoom, operating-system magnification, or larger default font sizes — so they can read it at all. Someone might run a page at 200%, 300%, or a full 400% zoom. At high magnification, the viewport becomes, in effect, a small window onto the page.
If the layout does not adapt, that small window shows only a slice of each line. To read one sentence, the user must scroll right to the end of the line, then all the way back left to start the next line, then right again — line after line, paragraph after paragraph. Reading becomes a two-dimensional slog that is exhausting and easy to lose your place in. Reflow removes that second dimension: content collapses into a single readable column so the user scrolls in one direction only.
The same discipline that satisfies Reflow — flexible, content-first layouts that adapt to the available space — is exactly what makes a site work well on small phones and in split-screen multitasking. Meet 1.4.10 and you have largely solved small-viewport usability at the same time. Because WCAG 2.2 AA is the reference standard for the DOJ Title II rule and the European Accessibility Act, Reflow is also a compliance target.
What 320px and 256px actually mean
The criterion names two thresholds. Which one applies depends on the direction your content scrolls.
320 CSS pixels wide
Applies to normal, vertically-scrolling pages (the vast majority of the web). It equals a 1280px viewport at 400% zoom (1280 ÷ 4 = 320) and is close to the width of a small phone in portrait. Your content must fit this width without horizontal scrolling.
256 CSS pixels tall
Applies to content designed to scroll horizontally — a rarer case, such as a slide deck or a horizontal timeline. It equals a 1024px-tall viewport at 400% zoom (1024 ÷ 4 = 256). Here the content must fit vertically without a second scroll direction.
For almost every project the number that matters is 320 CSS pixels wide. The practical test is: at 400% browser zoom on a 1280px window (or in a 320px-wide window), can the user read and operate everything by scrolling only up and down? Note the criterion is written in CSS pixels and zoom, not device pixels — a high-DPI phone still reasons in CSS pixels.
What is exempt from Reflow
The criterion allows an exception for "parts of the content which require two-dimensional layout for usage or meaning." The exception is scoped to that specific part — everything around it must still reflow. A wide data table may scroll sideways inside its own container, but the article that contains it may not.
Data tables
Tables with many columns need their two-dimensional grid to preserve the relationships between headers and cells. Let the table scroll horizontally inside its own container — the page around it must still reflow.
Maps and complex diagrams
An interactive map, a large architectural diagram, or a detailed chart relies on spatial layout. These may retain a two-dimensional scroll; the surrounding page content must not.
Code samples and pre-formatted text
Source code and ASCII art depend on preserved line breaks and spacing. A <pre> block that scrolls horizontally inside its own container is acceptable, while body text is not.
Toolbars and editing surfaces
A drawing canvas, a spreadsheet grid, or a toolbar that must stay adjacent to the content it operates on can require two-dimensional layout to remain usable.
Treat the exception as a last resort, not a loophole. Before allowing a part to scroll two-dimensionally, ask whether it could be redesigned to reflow — a data table can often become stacked cards on narrow screens, and a complex dashboard can reorganize into sections.
Code examples
Fluid layout with a responsive grid
The foundation of reflow is a layout defined in flexible units that collapse to one column when space runs out. A CSS grid with auto-fit and minmax() reflows to a single column automatically — no media query needed.
.cards {
display: grid;
/* Columns are at least 16rem; when the viewport is too
narrow for even one, the grid drops to a single column. */
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
/* Never lock a container to a pixel width wider than 320px. */
.container {
max-width: 70rem; /* a cap, not a fixed width */
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
}Prevent the viewport-lock anti-pattern
A common cause of reflow failure is a viewport meta tag that disables zoom. Never set maximum-scale or user-scalable=no — they block the very magnification Reflow exists to support (and also fail 1.4.4 Resize Text).
<!-- Correct: allows the user to zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- WRONG: blocks zoom, fails Reflow and Resize Text -->
<meta name="viewport"
content="width=device-width, maximum-scale=1, user-scalable=no" />Let an exempt table scroll inside its own container
When a data table genuinely needs its columns, wrap it so only the table scrolls horizontally — the page around it still reflows. Make the wrapper keyboard-focusable and label it so scroll users can reach it.
<div
class="table-scroll"
role="region"
aria-label="Pricing comparison"
tabindex="0"
>
<table> ... many columns ... </table>
</div>
<style>
.table-scroll { overflow-x: auto; }
</style>Use logical units so text and spacing scale with zoom
Sizing text, padding, and breakpoints in rem/em rather than pxmeans a user's zoom or larger default font reflows the layout instead of clipping it.
/* Breakpoints in em respond to zoom and font-size, not just
device width — helping the layout reflow under zoom. */
@media (max-width: 40em) {
.sidebar { display: none; }
.layout { grid-template-columns: 1fr; }
}
body { font-size: 100%; } /* respect the user's default */
.prose { max-width: 65ch; } /* character-based, reflows cleanly */Common mistakes
- Setting user-scalable=no or maximum-scale=1 in the viewport meta tag, which blocks the zoom that Reflow depends on.
- Fixed pixel widths on containers, cards, or grids that are wider than 320px and never collapse to a single column.
- Testing only by narrowing the browser window, not by zooming — zoom does not always fire the same media queries a small device does.
- Off-canvas sidebars or navigation that overlap the main content at high zoom instead of collapsing or stacking.
- Multi-column layouts (CSS columns, floated columns) that keep two or more columns side by side at 320px.
- Absolutely-positioned or negatively-margined elements that overflow the viewport and get clipped when space shrinks.
- Whitespace: nowrap or large min-width values on text blocks that force horizontal scrolling of ordinary content.
- Treating the two-dimensional-layout exception as a blanket excuse, letting whole pages scroll sideways instead of scoping it to a real table or diagram.
How to test for 1.4.10
- 1
Set the window to 1280px, then zoom to 400%
On a desktop browser, size the window to 1280 CSS pixels wide, then zoom to 400% (press Ctrl/Cmd and + repeatedly, or set the zoom level explicitly). This produces the 320px effective width the criterion targets. Chrome, Firefox, Safari, and Edge all support 400% zoom.
- 2
Scroll the whole page and look for a horizontal scrollbar
Scroll from top to bottom. If a horizontal scrollbar appears on the page as a whole, or you must scroll right to read normal lines of text, it fails. A horizontal scrollbar that belongs only to an exempt table or diagram inside its own container is acceptable.
- 3
Check nothing is clipped, hidden, or overlapping
Confirm no text is cut off at the edge, no controls disappear off-screen, and elements do not overlap. Every piece of information and functionality available at 100% must still be present and usable at 400%.
- 4
Test the key templates, not just the home page
Repeat on your highest-traffic and highest-stakes templates: article, product, form, checkout, dashboard, and any page with a data table or map. Reflow failures often hide in complex templates, not the marketing home page.
- 5
Verify zoom itself is not blocked
Inspect the viewport meta tag. If it contains user-scalable=no or maximum-scale below 2, the page fails before you even test layout — remove those so users can zoom.
Reflow is primarily a manual, visual check — automated tools can flag a disabled viewport or obvious overflow but cannot judge whether reading still works. Pair the manual zoom test with a scan from the URL Accessibility Auditor and confirm small-viewport behavior with the Mobile Accessibility Checker.
Related success criteria
1.4.4 Resize Text — AA
The sibling requirement: text must be resizable to 200% without loss of content. Reflow (1.4.10) is the stronger, zoom-to-400% cousin that reflows the whole layout, not just text.
1.4.12 Text Spacing — AA
Content must not break when users increase line height and letter spacing — the same fluid, non-clipping layouts that pass Reflow tend to pass Text Spacing.
1.4.11 Non-text Contrast — AA
Another 1.4 Distinguishable criterion for low-vision users, ensuring UI components and graphics stay perceivable — often audited alongside Reflow.
2.5.8 Target Size (Minimum) — AA
A mobile-focused WCAG 2.2 criterion that pairs naturally with Reflow: once content collapses to a single column, targets must still be large enough to tap.
Browse every criterion in the WCAG Success Criteria hub or work through the full WCAG 2.2 checklist.
Frequently asked questions
What does WCAG 1.4.10 Reflow require?
WCAG 1.4.10 Reflow (Level AA) requires that content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions, at a viewport width equivalent to 320 CSS pixels for vertically-scrolling content, or a height of 256 CSS pixels for horizontally-scrolling content. In practice this means a user can zoom a page to 400% on a 1280px-wide screen and still read and use everything with only vertical scrolling — no need to scroll left and right on every line. Exceptions are allowed for parts of content that require a two-dimensional layout for usage or meaning, such as data tables, complex images, maps, and toolbars.
Why is the magic number 320 CSS pixels?
320 CSS pixels corresponds to 1280px displayed at 400% zoom (1280 ÷ 4 = 320). It also approximates the width of a small mobile device in portrait, so meeting 1.4.10 tends to make your content work on small phones too. The success criterion is written in terms of CSS pixels and zoom rather than a specific device, but the practical target most teams use is: does the page work in a 320px-wide window, or at 400% browser zoom on a 1280px viewport?
How is Reflow different from Resize Text (1.4.4)?
1.4.4 Resize Text requires that text can be resized up to 200% without loss of content or functionality, and is typically satisfied by scaling text. 1.4.10 Reflow goes further: at 400% zoom the entire page — not just text — must reflow into a single column so there is no two-dimensional scrolling. A layout can pass 1.4.4 (text scales) yet fail 1.4.10 (fixed-width columns force horizontal scrolling). Reflow is the stronger, more modern requirement and is what responsive design naturally supports.
Does Reflow ban all horizontal scrolling?
No. It bans scrolling in two dimensions to read a block of content. Horizontal scrolling is still allowed for the parts of content that genuinely need a two-dimensional layout — a wide data table, a large diagram or map, a code sample, or a horizontal toolbar. The rule is that the user should not have to scroll horizontally to read normal lines of text; a table that scrolls horizontally inside its own container is acceptable because tables are an explicit exception.
What content is exempt from Reflow?
The criterion exempts 'parts of the content which require two-dimensional layout for usage or meaning.' That includes data tables, images such as maps and diagrams, interfaces where moving controls while operating them is essential (like a drawing canvas), video with controls, and toolbars grouped with the content they act on. The exception is scoped to the specific part that needs the layout — the rest of the page must still reflow. So a data table may scroll horizontally, but the page around it must not.
How do I test for Reflow?
The quickest test: set your browser window to 1280px wide, then zoom to 400% (Ctrl/Cmd and + repeatedly, or set zoom to 400% in browser settings). Scroll down the page. If you can read and use everything with only vertical scrolling — no horizontal scrollbar on the whole page, no clipped content, no overlapping elements — it passes. Alternatively, resize the browser window to 320px wide. Repeat for key templates: home, article, form, checkout, and dashboard.
Does responsive design automatically satisfy 1.4.10?
Usually, but not always. A well-built responsive site with a mobile breakpoint that collapses to a single column typically passes. But Reflow is tested by zoom on a desktop viewport, not by device width — and zoom does not always trigger the same media queries a narrow device does. Fixed widths in px, min-width containers, off-screen sidebars that don't collapse, and content pinned with absolute positioning can all fail at 400% zoom even on a 'responsive' site. Always test with actual zoom, not just by narrowing the window.