• Success Criterion 1.4.4
  • Conformance level AA
  • W3C reference F69

Text and Controls That Get Cut Off at 200% Zoom

1.4.4 — Resize Text

Scenario

Setting

A university's online course catalog

What’s wrong

When text is enlarged to 200%, some text or controls get cut off, overlap, or disappear — content is lost for users who need bigger text.

Example 

.catalog-card { height: 180px; overflow: hidden; }
<!-- at 200% browser zoom, the last two lines of the course description are clipped off -->

Why it matters

A prospective student zooming in for readability loses the last two lines of a course description without any indication it's cut off.

How to test

Set browser zoom to 200% and scan every page: any text or control that's cut off, overlapping, or hidden fails.

How to fix

Swap fixed height and overflow: hidden for min-height, letting the card grow to fit enlarged text.

.catalog-card { min-height: 180px; overflow: visible; }

Outcome

A student reads the full course description at 200% zoom and enrolls with a clear idea of what's included.

Who is affected

Low-vision users who rely on 200% zoom, who never learn whether a course covers labs, prerequisites, or credit hours.

Learn more

Related scenarios