- Success Criterion 1.4.4
- Conformance level AA
- W3C reference F94
Font Size Set in Viewport Units That Ignores Browser Zoom
1.4.4 — Resize Text
Scenario
Setting
A fitness app's workout tracker
What’s wrong
Font size is set in viewport (vw) units, so browser zoom / text-size settings don't enlarge the text at all.
Example
.set-counter { font-size: 2vw; }
<!-- on a wide monitor, browser zoom and OS text-size settings do nothing to enlarge this counter --> Why it matters
Someone tracking reps mid-workout glances at the counter and can't make it any bigger no matter how far they zoom in.
How to test
Inspect font-size values in DevTools: if set in vw (viewport width) units, browser/OS text-size settings won't enlarge them at all.
How to fix
Use rem or em units for text sizing; reserve viewport units for layout, not for anything a user needs to read.
.set-counter { font-size: 1.5rem; } Outcome
The user zooms their browser once and the rep counter grows right along with the rest of the page.
Who is affected
Low-vision users, since viewport-unit font sizes ignore both browser zoom and OS-level text scaling entirely.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Text and Controls That Get Cut Off at 200% Zoom
- Form Fields That Don’t Grow When Text Is Enlarged
- 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