Skip to content

Plain guides to WCAG, alt text and screen readers

Contrast checker

Success criteria

WCAG reflow (1.4.10): content that fits at 400 percent zoom

WCAG 1.4.10 Reflow: content must fit 320 CSS px wide with no sideways scrolling.

  • Level AA
  • WCAG 2.1
  • Perceivable
  • Checked 5 Nov 2026

The WCAG reflow rule, success criterion 1.4.10, says content must work in a viewport 320 CSS pixels wide without scrolling in two directions, the space left when a 1280 pixel window is zoomed to 400 percent. For content that scrolls sideways, such as a horizontal ticker, the matching limit is 256 CSS pixels tall. It is level AA and was added in WCAG 2.1.

In plain terms: zoom right in, and the page should turn into one tidy column that you read by scrolling down only, with nothing chopped off.

Quick facts

  • Level

    AA

  • Added in

    WCAG 2.1

  • Width

    320 CSS px for content that scrolls vertically

  • Height

    256 CSS px for content that scrolls horizontally

  • Same as

    A 1280 px wide window at 400 percent zoom

  • Exempt

    Parts that need two dimensions: data tables, maps, diagrams, video, games

WCAG reflow in plain words

Someone with low vision zooms a desktop page to 400 percent. Without reflow, each line of text is wider than the screen, and they must scroll right to read the end of the line, back left for the start of the next, and down, over and over. That is tiring and easy to get lost in. Reflow means the layout rearranges itself instead, like a phone view, so lines wrap within the screen.

The rule does not say content can never scroll sideways. It says a person should not need to scroll in two directions to read. A normal article scrolls down only. A horizontal ticker or a sideways carousel scrolls across only, and then the limit is a viewport height of 256 CSS pixels.

CSS pixels are the units written in stylesheets, not physical dots on the screen. Zooming to 400 percent makes each CSS pixel four times wider, so 1280 physical width holds only 320 CSS pixels of layout.

Where the 320 pixel figure comes from

320 CSS pixels is the width of many small phones in portrait mode. Picking it ties together two groups who need the same thing: people on small screens, and people who zoom a desktop page. A typical desktop window is 1280 pixels wide, and 1280 divided by 4 is 320, hence the 400 percent test. For sideways scrolling content, 1024 divided by 4 gives the 256 pixel height.

Reflow numbers at a glance
Content directionViewport to testDesktop equivalent
Scrolls vertically (most pages)320 CSS px wide1280 px wide window at 400 percent
Scrolls horizontally (tickers, some carousels)256 CSS px tall1024 px tall window at 400 percent

Content that may still scroll both ways

Some content only makes sense in two dimensions, and squashing it into a column would destroy its meaning. These parts are exempt:

  • Data tables with many columns, where each row must line up
  • Maps and floor plans
  • Diagrams, flowcharts and large images that people pan around
  • Video and games
  • Interfaces where a toolbar must stay in view while you edit, such as a spreadsheet or image editor

The exception is for that part only. A wide data table may scroll sideways inside its own box, but the page around it, including the heading, the paragraph above it and the menu, must still reflow.

How to test reflow

  1. Make the browser window 1280 px wide. Many developer tools show the size when you resize the window.
  2. Zoom to 400 percent with Ctrl++ (or Command++ on a Mac).
  3. Alternatively, open responsive design mode in the developer tools and set the width to 320.
  4. Scroll down the full page. Is there a horizontal scrollbar on the whole page? Is anything cut off at the right edge?
  5. Open the menu, a dialog, a form with errors and any sticky banners. Do they fit, and can you still see enough of the page?
  6. Repeat on your main templates: home, article, product, checkout, account.

Sticky headers and footers are a hidden risk. At 400 percent, a header that takes 20 percent of a normal screen can fill most of the view, and it can hide focused items, which also touches the rule on hidden focus, number 2.4.11.

Layout bugs that break reflow

Reflow failures and fixes
BugWhat you see at 320 pxFix
Fixed width container, such as width: 960pxWhole page scrolls sidewaysUse max-width with a percentage or fluid width
Columns that never stackThree squeezed columns, text overflowingStack columns with a media query, flexbox wrap or a grid
Images with a set pixel widthImage sticks out past the edgemax-width: 100% and height: auto
Long words, emails or web addressesOne line runs off screenoverflow-wrap: anywhere on text blocks
Dialog with fixed width and heightButtons sit off screen and cannot be reachedSize dialogs to the viewport and let them scroll
Content hidden at small sizesFeatures missing on narrow screensMove it into a menu or accordion rather than removing it

CSS that reflows

Fails: a fixed width forces sideways scrolling.

.page { width: 960px; }
.cols { display: flex; }

Passes: fluid width, wrapping columns, flexible media.

.page { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
.cols { display: flex; flex-wrap: wrap; gap: 1rem; }
.cols > * { flex: 1 1 18rem; }
img { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; }

The last line lets a wide data table scroll inside its own box, which is the exempt case, while the rest of the page reflows. Give that box a label and make it reachable by keyboard so people can scroll it.

People who rely on reflow

Low vision users who zoom a desktop browser are the main group. Reflow also helps people who use a phone in portrait mode, people who split their screen between two windows, and people with reading difficulties who find long lines hard to track. It overlaps with responsive design: a site built mobile first with fluid layouts usually passes with little extra work.

Questions people ask

What is WCAG 1.4.10 reflow?

It sits at level AA and arrived with version 2.1. Content must be usable in a 320 CSS px wide viewport without scrolling both down and across, except parts like data tables and maps that need two dimensions.

Why 400 percent zoom for the reflow test?

A 1280 px wide window at 400 percent zoom leaves 320 CSS px for the layout. That matches a small phone screen, so one responsive layout can serve both groups.

Do data tables fail reflow?

No. Tables whose rows must line up are an allowed exception and may scroll sideways inside their own box. The rest of the page around the table must still reflow.

Is a separate mobile site enough for reflow?

Only if desktop users who zoom in actually get that layout. Responsive CSS that reacts to the viewport width handles both cases at once.

Does reflow mean I need a mobile friendly design?

In practice, yes. A layout that adapts to a 320 px phone screen will usually pass the 400 percent zoom test too, provided nothing is hidden or cut off.