- 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
A university's online course catalog is a good example: 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.
Why it matters
Low-vision people who enlarge text instead of using a screen reader. On a university's online course catalog, that means they miss information conveyed only by color.
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
Let containers grow with the text (min-height, no fixed clipping) so nothing is cut off at 200%.
Outcome
With the fix in place on a university's online course catalog, they tell the information apart without relying on color.
Who is affected
Low-vision people who enlarge text instead of using a screen reader.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Form Fields That Don’t Grow When Text Is Enlarged
- Font Size Set in Viewport Units That Ignores Browser Zoom
- Viewport Meta Tag That Disables Pinch-to-Zoom on Mobile
- Fixed-Height Containers That Clip Content at 200% Zoom
- Button or Nav Text That Overflows Its Fixed-Size Container
- Sticky Header That Grows Large Enough to Cover Content