Touch targets beyond 44px

Why the standard exists — and what it misses

The 44×44px recommendation (Apple HIG and WCAG 2.5.5/2.5.8 land near here) comes from thumb-ergonomics research: the average thumb pad covers roughly that area, and smaller targets accumulate misses. But the standard models a calm thumb. The real user is on a bus, one-handed, with a bag in the other hand, possibly with reduced dexterity or a tremor, possibly wearing gloves. A target sized for the calm thumb is a target that fails the tired one.

Size for the miss, not the hit: adjacent targets under 44px create the double-tap problem — the user hits the wrong one, then has to undo. Spacing between targets is part of the target; 40px targets with 8px gaps pass where 44px targets touching fail.
The visual can be smaller than the target: an 18px icon button with 44px of padding and an invisible hit-slot is both pretty and hittable — the affordance and the target are different boxes and both matter.
Watch the edges: targets at the screen edge benefit from edge-squeeze ergonomics (the thumb rests there) — but targets flush against the edge can be half-covered by phone cases and gestures; inset critical controls 8px.
Test the real conditions: a target that passes the design-file check at 48px can fail the 2×-density reality check if the CSS is in logical pixels but the hit area is eaten by padding on a parent with overflow.

hit-slot.css

.icon-button {
  width: 24px; height: 24px;          /* the visual */
  padding: 10px;                       /* grows the hit area */
  background-clip: content-box;        /* keep the icon visual 24px */
}
/* effective target: 44px, visual: 24px, gap between
   neighbours respected by the padding box. */
@media (pointer: coarse) {
  .tight-row > * + * { margin-left: 8px; }  /* space is part of the target */
}

The targets people actually miss

The audit list is short and predictable: icon-only buttons in table rows (the most missed control on the web), close buttons on banners, the little 'x' on chips and tags, checkbox labels that only toggle when you hit the box itself, and pagination's next/prev arrows. Each has the same fix pattern — enlarge the hit area, keep the visual — and each is a two-line change that shows up in every usability test as 'that button is too small'.

Testing with one hand →