• 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

Related scenarios