Designers
ToolsDocsProAll the Possibles

All 141 tools / Accessibility checks

Find what breaks at 400 percent zoom or 320px wide: blocked zoom, fixed widths and clipped boxes.

Reflow and resize checkFreeFor developers and designers

30/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You give it a page address.

html: <html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></head><body><div class="wrap"><h1>Pricing</h1><table><tr><th>Plan</th><th>Seats</th><th>Support</th><th>Price</th></tr></table></div></body></html>
css:
  html { font-size: 14px; }
  .wrap { width: 960px; }
  .sidebar { min-width: 420px; }
  .note { height: 80px; overflow: hidden; line-height: 1.2 !important; }
  .title { font-size: 6vw; white-space: nowrap; }
  @media (orientation: portrait) { .app { display: none; } }
  .menu:hover .sub { display: block; }

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Reflow check of pasted markup: 11 findings (4 high, 7 medium, 0 low, 0 note).
Read 7 CSS rules, 0 width media queries, 1 pixel and 0 relative font sizes.

[HIGH] WCAG 1.4.4 Resize Text (AA) and 1.4.10 Reflow: The viewport blocks pinch zoom
  The viewport meta contains user-scalable=no and maximum-scale=1. Low-vision users rely on zoom to reach 200 percent. Some browsers ignore these values, others honour them, so the page fails on the ones that do.
  Seen in: content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
  Fix: Remove user-scalable and maximum-scale: <meta name="viewport" content="width=device-width, initial-scale=1">.

[HIGH] WCAG 1.4.10 Reflow (AA): 2 fixed pixel widths above 320px
  Content must fit a 320 CSS pixel viewport (a 1280px window at 400 percent zoom) without sideways scrolling. A width or min-width over 320px on a layout container forces horizontal scroll at that size. 1 is a min-width, which cannot shrink at all. Rules inside a (min-width) media query above 320px are skipped, and images, icons and controls are skipped.
  Seen in: .wrap { width: 960px } | .sidebar { min-width: 420px }
... full output on the tool page

What you get

Findings with WCAG criterion, severity and fix for zoom, reflow, text spacing and orientation

What it cannot do

Reads source only and lays nothing out, so confirm at 320px width and 400 percent zoom in a browser.

Who it is for

  • Developers
  • Designers

Free and Pro

Free30 runs a day per IP address, up to 200,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called check_reflow. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/reflow-check -H 'content-type: application/json' -d '{"html":"<html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"></head><body><div class=\"wrap\"><h1>Pricing</h1><table><tr><th>Plan</th><th>Seats</th><th>Support</th><th>Price</th></tr></table></div></body></html>","css":"html { font-size: 14px; }\n.wrap { width: 960px; }\n.sidebar { min-width: 420px; }\n.note { height: 80px; overflow: hidden; line-height: 1.2 !important; }\n.title { font-size: 6vw; white-space: nowrap; }\n@media (orientation: portrait) { .app { display: none; } }\n.menu:hover .sub { display: block; }"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in accessibility checks

All accessibility checks tools