For people who need larger text, this isn’t just frustrating—it’s a barrier.
Resize Text makes sure users can enlarge text without ruining the experience, keeping everything readable and functional.
Who this impacts
- People with low vision: They need to increase text size to comfortably read content, without layout issues or content disappearing.
- People with cognitive impairments: Larger text can help improve focus and reduce cognitive load when reading content.
- Mobile users: On smaller screens, the ability to resize text without breaking the layout is crucial.
- Everyone: Readability is a key part of user experience, and flexible text sizing benefits all users.
How to meet Resize Text
- Allow text to be resized up to 200%: Ensure that text can be resized by up to 200% without breaking the layout, losing content, or requiring horizontal scrolling.
- Use responsive design: Ensure your page layout adapts smoothly as text size increases, so that nothing overlaps or becomes unreadable.
- Test with text zooming: Regularly check how your content behaves when users zoom in or change the text size, making sure the layout remains intact. (Warning: To test this properly, you must use Firefox, with Zoom, Text Only enabled.)
Practical example
Readers of the Catbook website can zoom in up to 200% to make the text larger without causing images or text to overlap, maintaining a clean and readable layout at all sizes. In the other example, the text zoom has caused the entire page layout to become unusable with text on top of other text, the layout breaking, and even the top navigation running together with no spaces between the menu options.
Exceptions
WCAG 1.4.4 does not apply to images of text or content that requires a fixed layout for functionality, such as certain graphic-heavy interfaces.
Top tips
- Use relative units for text size: Define text in ems or percentages so that it scales smoothly when users resize it.
- Avoid absolute sizing: Refrain from using pixels for text size, as this can prevent text from resizing properly in some browsers.
- Test across devices: Check 200% text resizing on multiple devices to catch any layout issues before users do.
What’s the difference between 1.4.4 Resize Text and 1.4.10 Reflow?
While both aim to help users with visual impairments, they target different aspects of readability and layout on a webpage.
WCAG 1.4.4: Resize Text focuses specifically on making text larger. It requires that users be able to zoom in on text up to 200% without needing assistive tools like screen magnifiers—and without the page layout going haywire. So, if you need that extra boost in text size to comfortably read, this guideline makes sure the content still looks good and stays functional at that larger scale.
WCAG 1.4.10: Reflow, on the other hand, is all about the layout. This criterion requires that content can be zoomed in up to 400% without needing horizontal scrolling. It ensures that everything—text, images, buttons—fits nicely within the screen’s width, especially on mobile devices or smaller screens where zooming in is common. The idea is to keep scrolling in one direction (usually up and down), so users aren’t stuck scrolling side to side to follow content.
In short, 1.4.4 focuses on scaling text, while 1.4.10 makes sure the whole page layout adapts smoothly to high levels of zoom without breaking usability.