Touch Target Standards

Touch targets affect mobile usability constantly — interactive targets should be large enough to activate reliably.

01 — Purpose

Targets you can hit

Touch targets affect usability constantly on mobile — interactive targets should remain large enough to activate reliably.

Tiny links, packed icon rows, and overlapping tap zones cause missed taps, frustration, and accidental activation. WCAG recommends at least 44×44 CSS pixels for pointer targets — interaction should feel reliable, not delicate.

See mobile navigation and responsive strategy.

02 — Principles

Reliable interaction zones

Interaction should feel reliable — not delicate.

  • adequate spacing — gap between adjacent targets, not edge-to-edge icons
  • comfortable target size — minimum 44×44px or equivalent padding hit area
  • predictable interaction zones — whole row tappable where users expect it

03 — Practice

Good touch target standards

Touch usability affects motor-impaired users, mobile users, and temporary impairments.

  • expand hit area with padding — visual icon can be smaller if tap zone is sufficient
  • size primary actions generously — submit, add to cart, menu toggle
  • avoid nested tappable elements — button inside link causes mis-taps
  • test on real devices — thumb reach and one-handed use on narrow viewports
  • pair with visible focus for keyboard — see keyboard navigation

04 — Avoid

Tiny, packed controls

Accidental activation and missed taps erode trust on mobile.

  • tiny buttons — 24px icons with no padding in toolbars
  • tightly packed controls — delete next to edit with no spacing
  • accidental activation risk — destructive action too close to primary tap
  • hover-sized desktop targets shipped unchanged on mobile
  • text links in dense paragraphs with no line-height or padding relief

05 — Close

Measure the tap zone, not just the icon

If you struggle to hit it on a phone, your users struggle too.

Audit navigation, forms, and data tables on a phone. Flag controls under 44px or with less than 8px separation. Fix in design tokens and component defaults — not page by page.

See mobile navigation, zoom and reflow, and accessibility QA checklist.