1.4.4 Resize Text

Who it helps

People with mild to moderate low vision enlarge text with browser zoom, text-only zoom or pinch zoom instead of a screen magnifier. If text overlaps, gets cut off or a page blocks zoom, they cannot read or use it.

How to meet it

• Do not block zoom: remove user-scalable=no and any maximum-scale below 2 from the viewport meta tag.
• Set font sizes in relative units such as rem or em, so text also grows when users change the browser's default font size.
• Avoid fixed heights on elements that contain text; use min-height or let the content set the height.
• Avoid overflow: hidden on text containers, which clips text as it grows.
• Use real text instead of images of text, since text in images blurs and cannot reflow when enlarged.
• Test at 200% browser zoom and with a larger default font size, and check that nothing overlaps, truncates or disappears.

Examples

<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

.card {
  height: 120px;
  overflow: hidden;
  font-size: 14px;
}

<meta name="viewport" content="width=device-width, initial-scale=1">

.card {
  min-height: 120px;
  font-size: 0.875rem;
}

Common mistakes

• Copying a viewport tag with maximum-scale=1 from an old template to stop iOS from zooming into form fields.
• Setting font sizes in px everywhere, which ignores the user's default font size setting in some browsers.
• Truncating text with text-overflow: ellipsis on one line, so enlarged labels are cut off with no way to read them.
• Using fixed-height buttons or navigation bars, so enlarged text spills out and overlaps nearby content.

Related criteria

• 1.4.10 Reflow
• 1.4.12 Text Spacing
• 1.4.5 Images of Text

Official W3C explanation of 1.4.4