Touch Target Size and Mobile Accessibility: WCAG, Apple & Google Guidelines

Why Touch Target Size Is a Core Mobile Accessibility Requirement

Inadequate touch target size is one of the most pervasive mobile accessibility failures, affecting users with motor impairments, tremors, arthritis, and situational limitations. Both Apple's Human Interface Guidelines and Google's Material Design have published minimum dimensions, and WCAG 2.2 now includes a Level AA criterion for touch targets.

WCAG 2.5.8 Target Size Minimum (Level AA) in WCAG 2.2

SC 2.5.8 requires targets are at least 24 by 24 CSS pixels, with an important nuance: if the target itself is smaller, there must be at least 24px of spacing offset between it and adjacent targets. This offset-based approach gives designers flexibility while protecting users from accidentally activating adjacent controls.

Apple HIG 44pt and Google Material 48dp

Apple's Human Interface Guidelines specify a minimum of 44 by 44 points for all interactive controls in iOS apps. Google's Material Design recommends 48 by 48 density-independent pixels for Android. In Jetpack Compose, use Modifier.minimumInteractiveComponentSize() — introduced in Compose 1.3 — to automatically enforce the 48dp minimum without affecting visual size.

Common Touch Target Failures in Mobile Apps

• Toolbar icon buttons smaller than 24x24px with insufficient spacing
• Password show/hide toggle icons with 16x16px tap area
• Social share icons crammed into a row with minimal gaps
• Checkbox indicator only tappable, not the associated label
• Close (X) buttons on modals under 24px with no offset spacing
• Stepper increment and decrement buttons sharing a border with zero gap

Practical Fixes for Touch Target Size Failures

The most efficient fix is padding expansion — add padding to increase the tappable area without altering visual design. In SwiftUI, use .padding() combined with .contentShape(Rectangle()). In React Native, use the hitSlop prop — for example, hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} on a small icon button — to expand the hit area beyond the component's rendered bounds.