Level AAWCAG 2.2

1.4.4 Resize Text

Text can be resized up to 200 percent without loss of content or functionality.

Why it matters

Low vision

Users with low vision enlarge text to read. If the layout breaks at 200%, they lose access to information.

Aging

With age, reading up close gets harder. Text enlargement is a feature many users rely on every day.

The problem with fixed sizes

Fixed px font sizes ignore the browser's zoom setting and take away the user's choice.

Responsive design

A flexible layout works not just for enlargement but also for a variety of screen sizes.

Live demo

Support for text resizing

Text size:100%

Fixed layout (px-based)

Announcements

ImportantSystem maintenance notice

We will perform system maintenance on March 15, 2024.Thank you for your patience...

Understand through a persona

Watanabe (75) — Presbyopia and mild cataracts

Her browser text size is always set to 150%. On sites where text overlaps or overflows, she cannot read the content. 'The school portal for my grandchild breaks when I zoom in, so I sometimes miss important notices.'

Checklist

Content is not cut off when text is enlarged to 200%Text does not overlap when enlargedNo horizontal scrolling is required when enlargedFont sizes are defined in relative units (rem, em, %)overflow: hidden is not used inappropriately on containers

References

→ Understanding SC 1.4.4 (W3C)

→ Related: 1.4.10 Reflow