Mobile Touch Target Size: How Large Should Touch Targets Be?
How Large Should Mobile Touch Targets Be?
Mobile touch target size should generally be at least 24 × 24 CSS pixels to meet the WCAG 2.2 Target Size (Minimum) requirement, while larger targets improve usability.
For practical wcag for mobile accessibility, 48 × 48 dp is the recommended minimum on Android, while Apple recommends a 44 × 44 pt default control size for iOS and iPadOS.
When controls are visually smaller, designers can increase the clickable or tappable area with padding and maintain sufficient spacing between adjacent controls to reduce accidental activation.
What Is a Mobile Touch Target?
A touch target is the area of the screen that responds to a tap, such as a button, link, icon, or form control. It is not the same as the element’s visible size. A 24 dp icon can sit inside a 48 dp touch target, because padding extends the interactive area beyond what users see. That separation lets designers keep icons compact while giving users a target they can hit reliably, especially people with limited dexterity or users holding a phone in one hand.
How Large Should a Touch Target Be on Mobile?
Mobile touch targets should be at least 24 × 24 CSS pixels to meet WCAG 2.2 Level AA, but platform guidance goes further. Android recommends 48 × 48 dp, and Apple recommends 44 × 44 pt for iOS and iPadOS. When an icon looks smaller than that, padding can extend its tappable area without changing the design. Touch target size is one of the key criteria in WCAG for mobile apps.
What Does WCAG 2.2 Require for Touch Target Size?
WCAG 2.2 added Success Criterion 2.5.8 Target Size (Minimum) at Level AA. It requires pointer targets to be at least 24 × 24 CSS pixels, unless one of these exceptions applies:
- Spacing: A smaller target passes if a 24 CSS px circle centered on it does not overlap another target or another target’s circle.
- Equivalent: The same function is available through another control that meets the size requirement.
- Inline: The target is inside a sentence or block of text, such as a link in a paragraph.
- User agent control: The size is set by the browser or operating system, not the author.
- Essential: A particular size is essential to the information, such as pins on a map.
WCAG 2.1 introduced a stricter criterion, 2.5.5 Target Size (Enhanced), which requires 44 × 44 CSS pixels at Level AAA. Note that many laws, including ADA Title II and the current EN 301 549, still reference WCAG 2.1, which does not include 2.5.8. Even so, meeting it is the safest path as regulations move toward WCAG 2.2.
How Do CSS Pixels, dp, pt, and Physical Dimensions Compare?
Touch target guidance uses different units depending on the platform, but they describe similar sizes on a phone screen. CSS pixels, Android dp, and iOS points are all device-independent units. On mobile, one of each is roughly the same size, which makes it easy to compare WCAG and platform guidance side by side.
Why Does Touch Target Spacing Matter?
Spacing reduces the chance that a user taps the wrong control, especially when targets are small or grouped together. Android recommends at least 8 dp between 48 dp targets. Apple also emphasizes padding and spacing between interactive elements. Spacing matters most where a wrong tap has consequences, such as “Delete” next to “Edit” or a quantity control next to “Add to Cart.”
for example: : In a mobile shopping interface, closely positioned "Add to Cart" and quantity controls can lead to unintended actions. Giving each interactive area sufficient separation—and using padding to enlarge small controls—helps users tap the intended action confidently, especially when using a phone one-handed.
How Can You Design Accessible Tap Targets?
Make accessible tap targets large enough for reliable interaction; for mobile apps, 48 × 48dp is a practical benchmark, while WCAG 2.2 requires at least 24 × 24 CSS pixels for pointer targets unless an exception applies.
Keep the target area larger than the visible icon size when necessary by using padding, so a small visual icon can still have a sufficiently large interactive element.
Add spacing between nearby controls to prevent accessible touch targets from overlapping and reduce accidental taps; Android recommends at least 8dp between 48dp targets.
Give buttons clear visual boundaries and adequate surrounding space, while testing the complete touch target design on real touchscreen devices. Apple similarly recommends a 44 × 44pt hit region for buttons.
How Can You Make Small Icons Accessible Without Enlarging Their Visual Size?
Keep the icon size visually compact while expanding the tappable area with padding, so the small target remains easy to activate without changing its appearance.
The interactive area can extend beyond the visual bounds of an icon, allowing the touch target to be larger than the icon's visible dimensions. Android, for example, uses 24dp icons inside 48 × 48dp icon buttons.
Ensure the expanded area does not overlap nearby controls; Apple also emphasizes sufficient padding and spacing between interactive elements to reduce accidental taps.
How Does Touch Target Size Affect Mobile Usability?
Fingers are far less precise than a mouse pointer, especially when someone is walking, using one hand, or living with a tremor. Small or crowded targets lead to repeated mis-taps, sometimes called rage taps, and to accidental actions that users then have to undo. Larger targets reduce that friction for everyone, not just people with motor disabilities.
How Should Touch Targets Be Designed for Different Mobile Platforms?
- Android: Use touch targets of at least 48 × 48 dp, following Material Design accessibility guidance, with at least 8 dp between targets where practical.
- iOS and iPadOS: Use a hit region of at least 44 × 44 pt for buttons and other controls, with enough spacing for comfortable interaction.
- Across platforms: Keep the icon’s visual size separate from its interactive area. The same 24 dp/pt icon can appear on both platforms with platform-specific hit regions around it.
How Can You Test Mobile Touch Target Size?
Testing combines automated tools with real-device checks:
- Android: Run Accessibility Scanner, which flags touch targets below the recommended size.
- iOS: Run an audit in Xcode’s Accessibility Inspector, which reports small hit areas. Use Debug View Hierarchy to check an element’s exact frame and its distance from nearby controls.
- Web content: Measure targets against 24 × 24 CSS px, or apply the 24 px circle test for smaller targets.
- Real devices: Tap through key screens with a finger, checking that each control activates reliably and that nearby targets do not trigger by mistake.
What Common Touch Target Problems Should You Avoid?
Avoid small touch targets that make an interactive element difficult to activate accurately with a touch contact. WCAG 2.2 sets a minimum of 24 × 24 CSS pixels for pointer targets, with defined exceptions.
Prevent insufficient spacing between controls; when targets are too close, users are more likely to activate the wrong target.
Check that targets are overlapping, particularly when expanding the tappable area around small icons. Overlapping target regions can make individual controls difficult to activate reliably.
Do not rely only on the visible size of a clickable icon or button. Expand its interactive area with padding where appropriate, while maintaining clear separation from neighboring controls. Android recommends 48 × 48dp touch targets for interactive elements.
What Is the Difference Between Visual Size and Touch Target Size?
The visual bounds of an element describe what users can see, while the target area or interactive area defines where a tap is recognized. These dimensions do not have to be identical: a small icon can have a larger tappable area that extends beyond the visual bounds, improving usability without increasing its visible physical size. Android, for example, commonly uses a 24dp icon inside a 48 × 48dp touch target.
What Are the Most Important Mobile Touch Target Size Guidelines?
Follow WCAG 2.2 Target Size (Minimum): interactive targets should generally be at least 24 × 24 CSS pixels at Level AA, with specific exceptions.
For Android and Material Design, use a 48 × 48dp minimum touch target as a practical recommended target size for mobile interfaces.
For iOS and iPadOS, Apple recommends a 44 × 44pt default control size, while noting that spacing and surrounding padding are also important for comfortable interaction.
Keep enough space between neighboring touch targets so users can distinguish and activate the intended tap target without accidental taps.
FAQ
What is the recommended touch target size on mobile?
Android recommends 48 × 48 dp, and Apple recommends 44 × 44 pt for iOS and iPadOS. For web content, WCAG 2.2 sets a 24 × 24 CSS pixel minimum at Level AA, with specific exceptions.
What is the minimum touch target size under WCAG 2.2?
Success Criterion 2.5.8 Target Size (Minimum) requires pointer targets to be at least 24 × 24 CSS pixels. Exceptions cover spacing, equivalent controls, inline targets, user agent controls, and essential presentations.
Does WCAG 2.5.8 apply to native mobile apps?
WCAG was written for web content, but its criteria are widely applied to native apps. W3C’s draft WCAG2Mobile note explains how 2.5.8 maps to device-independent units in apps. In practice, following Android’s 48 dp and Apple’s 44 pt guidance comfortably exceeds the WCAG minimum.
