Mobile Touch Target Design Guide: Size, Spacing, and Placement in 2026

# Mobile Touch Target Design Guide: Size, Spacing, and Placement in 2026

There's a moment every mobile user knows: you tap a link, miss by two pixels, and trigger something you didn't want. Close a tab by accident. Hit "Cancel" instead of "Submit." The frustration is instant and cumulative. Each missed tap erodes confidence in your interface.

Touch targets are one of the most discussed yet consistently mishandled aspects of mobile design. The guidelines exist. The research is clear. Yet audit after audit shows the same problems: buttons too small, links too close together, and interactive elements placed where thumbs can't reach them.

This guide covers what you need to get touch targets right — not just for compliance, but for actual usability.

Three sets of guidelines govern touch targets. Here's how they compare:

**WCAG 2.2 Success Criterion 2.5.8 (Level AA):** The minimum touch target size is **24×24 CSS pixels**, except when there's an equivalent link with a larger target on the same page. This was new in 2.2 and fills a longstanding gap — previous WCAG versions had no minimum touch target requirement.

**WCAG 2.2 Success Criterion 2.5.5 (Level AAA):** For AAA compliance, targets must be at least **44×44 CSS pixels**. This aligns closely with platform guidelines.

**Apple Human Interface Guidelines:** Recommends a minimum of **44×44pt** for all interactive elements. This has been the iOS standard since the original iPhone and hasn't changed.

**Google Material Design:** Recommends a minimum of **48×48dp** for touch targets, with 8dp spacing between adjacent targets.

**The practical takeaway:** Design for 48×48dp as your baseline. That satisfies every guideline across platforms and accessibility levels. The 24px WCAG minimum is a floor, not a target.

A 48×48px button that's crammed between two other buttons isn't usable. Size matters, but so does spacing.

MIT's Touch Lab research found that the average adult fingertip is about 10mm wide, translating to roughly 40-45px on most screens. But accuracy varies significantly:

Spacing between targets is equally critical. A 2018 study by the Nielsen Norman Group found that adding 8-10px of padding between adjacent touch targets reduced error rates by 30% compared to same-size targets without spacing.

This is where most sites fail. Paragraph text with linked phrases often has tap targets of 16-20px height.

Phone screens average 6.1-6.7 inches in 2026. Most users hold their phone in one hand and reach with their thumb. Steven Hoober's research found three primary grip patterns:

**Design implication:** Place primary actions in the bottom third of the screen. Navigation bars at the bottom. CTAs within thumb reach. Secondary and destructive actions can go higher since they require more deliberate interaction.

**What to avoid placing at the top of the screen on mobile:** logout buttons, delete actions, "cancel order" — anything that a casual thumb swipe could trigger.

**1. Dense product grids with no spacing.** E-commerce sites often pack product cards tightly. When "Add to Cart" buttons on adjacent cards are less than 8px apart, mis-taps are inevitable. Fix: add 12-16px gutters between cards.

**2. Cookie banners with tiny close buttons.** A 24px "×" in the corner of a full-width banner fails every guideline. Fix: make the close target at least 44×44px.

**3. Accordions with narrow tap zones.** FAQ and product detail accordions often have tap regions limited to the text width. Fix: extend the tap target full-width with `display: block` and padding.

**4. Carousels with tiny navigation dots.** Pagination dots of 8-10px are decorative, not interactive. If they're tappable, they need to be in a 44×44px region. Better solution: add swipe support and make the dots visual-only indicators.

**5. Fixed headers eating tap targets.** When a fixed nav bar overlaps content, the top portion of the page becomes a dead zone for taps. Ensure sufficient padding on the body to account for fixed header height.

Manual testing catches obvious issues, but automated tools and user testing reveal the full picture:

Beyond accessibility compliance, there's a direct business case:

Touch targets are a solved problem. The guidelines are clear, the tools exist, and the patterns are well-documented. The challenge isn't knowing what to do — it's prioritizing it against more visible design work. But invisible design problems have the most impact on real users. Fix them first.