Perceivable Guideline 1.4 Distinguishable

1.4.4 Resize Text

Text must be enlargeable to 200 percent without breaking the page

Level AA 1 automated check

What it asks for, in plain English

People must be able to make the text twice as big and still read all of it and use every feature. Browser zoom is the usual way they do this, and letting it work is most of the job. Captions and text inside images are the exception; they do not have to scale, but images of text are discouraged anyway by 1.4.5.

The failures are things that stop zoom or hide the result: a viewport tag that disables pinch zoom on phones, boxes with a fixed height that clip the enlarged text, text that overlaps its neighbour, and buttons whose label disappears.

At 200 percent the layout may change, for example from three columns to one. That is fine. Losing words or controls is not.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.4.4 page has the full intent, techniques and definitions.

Who it affects

Someone with age-related sight loss zooms every page to 150 or 200 percent as a matter of course, and abandons sites where the menu then stops working.

A person with low vision on a phone pinches to zoom and nothing happens, because the page has switched zooming off.

Anyone on a high-resolution laptop finds 14px text uncomfortably small and zooms in.

Example

Broken
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
  .notice { height: 48px; overflow: hidden; font-size: 14px; }
</style>

Pinch zoom is blocked on phones, and the notice box clips anything that no longer fits in 48 pixels.

Fixed
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .notice { min-height: 3rem; font-size: 0.875rem; }
</style>

Zoom is allowed and the box grows with its contents. Sizes in rem follow the reader's own text size setting as well.

How to check it

  1. In a desktop browser press Ctrl and plus (Cmd and plus on a Mac) until the zoom reads 200 percent.
  2. Read the whole page. Look for clipped text, overlapping text, and controls whose labels have vanished.
  3. Try the main tasks: open the menu, fill a form, press the buttons.
  4. On a phone, try to pinch zoom. If nothing happens, check the viewport meta tag.

What Websight checks for 1.4.4

Websight runs this automated check for 1.4.4:

AA Do not block pinch zoom on phones meta-viewport The viewport meta tag tells phones how to scale the page.

Websight's viewport check flags a meta viewport tag that blocks pinch zoom or caps it below 200 percent. Whether the page still works at 200 percent, with nothing clipped or overlapping, needs a person; it is on the manual checklist.

Practical tips

  • Never set user-scalable=no or maximum-scale below 2. Nothing you gain is worth it.
  • Use min-height rather than height on anything that contains text.
  • Set font sizes in rem or em so the browser's text size preference works as well as zoom.

Scan your page and see where 1.4.4 stands

Websight gives a score out of 100, explains each automated finding in plain English, and lists the checks a person still needs to do.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.