Anti-pattern · Accessibility · High
Sub-44px Touch Target
A sub-44px touch target is any tappable control smaller than 44 by 44 CSS pixels, which makes accurate tapping hard on a real phone.
The tell
Icon buttons, close buttons, checkboxes or pagination links with a hit area under 44px.
Why it happens
Compact controls look tidier in a generated layout, and the model optimises for the screenshot rather than the finger. Touch ergonomics are invisible in desktop previews.
The rule
Every tap target is at least 44 by 44px — expand with padding, not by scaling the glyph.
- Measure the hit box of every icon button, checkbox and pagination control.
- Add padding or a ::before overlay to reach 44px; keep the glyph its original size.
- Keep at least 8px between adjacent targets so a near-miss does not hit the neighbour.
What is a Sub-44px Touch Target?
A 16px icon in a 20px button is fine with a mouse and frustrating with a thumb. The WCAG minimum is 24px, Apple and Google both recommend 44-48px. Hit area does not have to mean visual size: keep the icon small and expand the target with padding, or a pseudo-element that extends the box past the visible glyph.
Paste this after your existing prompt to strip the pattern from the result.