Resize Text (200% zoom).

Users with low vision need to zoom — content must remain usable at 200%

What does this check test?

This check verifies that text can be resized up to 200% without assistive technology, and that no content or functionality is lost when zoomed. At 200% browser zoom (or equivalent text-size increase), all text must remain readable, no content should be clipped or overlap, interactive elements must remain usable, and horizontal scrolling should not be introduced for vertically-scrolling content. This maps to WCAG 2.2 Success Criterion 1.4.4 (Level AA).

Why does it matter?

People with low vision (estimated at 246 million worldwide) routinely zoom their browser to 150%–200% or higher. If a layout breaks at zoom levels — text overflowing containers, buttons becoming unreachable, or content being clipped by `overflow: hidden` — these users cannot use the site. Browser zoom is the primary assistive strategy for low-vision users who do not use a full screen reader. Mobile browsers also have text-size settings that override page CSS, so layouts must be resilient to text scaling.

Who is affected?

Front-end developers building responsive layouts, CSS architects defining spacing and typography systems, QA engineers adding zoom testing to their test matrix, and designers who need to account for text reflow at larger sizes. Anyone using fixed-height containers or absolute positioning should be especially careful.

Where does this apply?

All text content across the entire site. Critical areas include navigation menus (which often break first at high zoom), modal dialogs, dropdown menus, form layouts, data tables with fixed column widths, tooltip text, sidebar panels, and sticky/fixed-position elements. Landing page hero sections with precise text positioning are frequent offenders.

How to fix it

/* Bad: fixed pixel values break at zoom */
.heading { font-size: 24px; height: 40px; overflow: hidden; }

/* Good: relative units that scale with zoom */
.heading {
  font-size: 1.5rem;
  font-size: clamp(1rem, 2vw, 1.5rem);
  min-height: 2.5rem; /* min-height, not height */
}

<!-- Bad: prevents mobile users from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- Good: allows zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">

References

• WCAG 2.2 — Success Criterion 1.4.4 Resize Text
• MDN — Viewport meta tag
• web.dev — Accessible responsive design