WCAG 1.4.4: Resize Text
Text must be resizable up to 200% without assistive technology and without loss of content or functionality. Users with low vision commonly zoom their browser, and the page must remain usable.
What is WCAG 1.4.4 Resize Text?
WCAG 1.4.4 Resize Text is a Level AA web accessibility success criterion under the Perceivable principle. Text must be resizable up to 200% without assistive technology and without loss of content or functionality. Users with low vision commonly zoom their browser, and the page must remain usable. Common failures include using fixed pixel sizes for containers that clip text when zoomed and text that overlaps when browser zoom reaches 200%. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Zoom the browser to 200% and check that all text is still readable
- ✓ Verify no content is cut off or hidden behind other elements when zoomed
- ✓ Check that horizontal scrolling is not required for single-column layouts at 200%
- ✓ Test that interactive elements (buttons, links, form fields) remain usable when zoomed
- ✓ Verify that text does not overlap other content when zoomed
Common Failures
- ✗ Using fixed pixel sizes for containers that clip text when zoomed
- ✗ Text that overlaps when browser zoom reaches 200%
- ✗ Navigation menus that break or become unusable at 200% zoom
- ✗ Using viewport units (vw) for font sizes that do not respond to browser zoom
- ✗ Fixed-height containers that hide overflowing text
✓ Good Example
<!-- Responsive container -->
<div style="max-width: 65ch; padding: 1rem;">
<p style="font-size: 1rem; line-height: 1.6;">
This text will reflow naturally when zoomed.
</p>
</div>
<!-- Flexible button -->
<button style="padding: 0.75em 1.5em; font-size: 1rem;">
Submit
</button> Using relative units (rem, em, ch) and max-width allows content to reflow naturally when zoomed. The button uses em-based padding that scales with font size.
✗ Bad Example
<!-- Fixed container -->
<div style="width: 400px; height: 200px; overflow: hidden;">
<p style="font-size: 14px;">
This text may be clipped when zoomed.
</p>
</div> The fixed width and height with overflow:hidden will clip text content when the user zooms. Fixed pixel font sizes do not respond to browser text-size settings.
Test Your Site for 1.4.4 Compliance
Use our free accessibility tools to check your website against WCAG 1.4.4.
Open Testing Tool