Skip to main content
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

Touch target size and spacing

Small touch targets and insufficient spacing between interactive elements can make it difficult for users to activate the intended control. This is particularly challenging for users with motor impairments, low vision, or those using small screens, or using devices in bright conditions. The Touch target size and spacing rule ensures that interactive elements have a minimum touch target size or are spaced adequately to support accurate interaction.

  • Rule Category : Touch Target
  • WCAG 2.2 SC : 2.5.5(AAA), 2.5.8 (AA)
  • Rule Severity : Serious
  • Supported Platforms : Android, iOS

Success criteria

The specific criteria for success are:

  • Each interactive element must have a minimum touch target size of 24dp x 24dp on Android and 24 points x 24 points on iOS.
  • If an element is smaller than the minimum touch target size, it must be spaced so that minimum touch target size circle around it does not overlap with adjacent elements.
  • Touch targets must remain operable across screen sizes, orientations, and zoom levels.

How to fix

To ensure compliance with touch target size and spacing:

  • Increase target size: Make interactive elements at least 24dp x 24dp on Android or 24 points x 24 points on iOS.
  • Adjust spacing: If increasing the element size is not possible, ensure sufficient spacing so that a 24dp or 24 points circle around the element does not intersect with other targets.
  • Verify responsiveness: Test on different screen sizes and zoom levels to confirm targets remain accessible.

Example

The following screenshot highlights a touch target size and spacing violation in an Android mobile app:

Touch target size and spacing violation

Errors

In this example, the observed size is 16dp (width) x 48dp (height) instead of the required minimum, 24dp x 24dp. This makes the targets too narrow, increasing the likelihood of missed or accidental taps.

Fix

To resolve this violation:

  • Increase the size of the target to 24dp x 24dp.
  • If increasing the element size is not possible, adjust spacing so that a 24dp circle around the element does not overlap with nearby elements.

References

  • 2.5.5 Target Size (Enhanced) (Level AAA): WCAG 2.2
  • 2.5.8 Target Size (Minimum) (Level AA): WCAG 2.2

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle