v138 · css · accessibility
Touch Target Checker
Simulate the OS accessibility font-scale setting (0.85×–2.0×) and watch a component library audit fail and pass in real time. Fixed-size buttons shrink below WCAG 2.5.8's 24×24 px minimum at high zoom; buttons that multiply their padding and minimum size by env(preferred-text-scale) stay compliant at every setting.
—
fixed targets failing
—
fixed targets passing
—
scaled targets passing
Fixed sizes (no env() scaling)
WCAG 2.5.8 minimum: 24×24 px
| Button | Height | Width | WCAG 2.5.8 |
|---|
env(preferred-text-scale) scaled
Minimum multiplied by OS scale factor
| Button | Height | Width | WCAG 2.5.8 |
|---|
Why scale touch targets? When a user sets a large OS font size, text inside
buttons grows — but if padding and
min-height/min-width are in fixed
units, the tap target can actually shrink relative to the text. WCAG 2.5.8 requires
at least 24×24 CSS pixels. Multiplying all size tokens by
env(preferred-text-scale) keeps targets proportional to the user's preference
while satisfying the hard pixel floor at every setting.