WCAG 1.4.4 Resize Text

This page demonstrates how to meet and how to fail the WCAG 2.1 criterion 1.4.4: Resize Text (Level AA).

Goal: Text must be resizable up to 200% without loss of content or functionality.
What to do: Use relative units (em, rem, %, etc.) for text and layout. Avoid fixed containers that clip or hide text.
Why it's important: Many users need to increase text size for readability. Content should remain usable and readable at larger sizes.

What to Avoid: Text That Can't Be Resized

This text is inside a container that hides overflow and uses fixed units, so when you zoom or increase font size, some of the text may be cut off or hidden.

Why this fails: Users who increase text size may lose access to important information if it is clipped or hidden.

Example: Resizable Text

This text is inside a flexible container. When you zoom or increase font size, all content remains visible and usable.

Why this works: The container and text use relative units and do not clip or hide content, so resizing works as expected.

Best Practices Summary

Use relative units (em, rem, %, vw) for text and layout
Avoid fixed heights/widths and overflow: hidden for text containers
Test your site by zooming in or increasing browser text size up to 200%
Ensure all content and functionality remain accessible when text is resized