WCAG Touch Target Size Guidelines for Mobile

Designing accessible mobile interfaces requires interactive elements to be large enough for users to activate reliably, especially those with motor impairments, tremors, or large fingers. This guide breaks down the official Web Content Accessibility Guidelines (WCAG) requirements for touch target sizes, focusing on the differences between Level AA and Level AAA criteria, their exceptions, and practical implementation standards for mobile UI.

WCAG 2.2 Criterion 2.5.8: Target Size (Minimum) (Level AA)

Introduced in WCAG 2.2, Success Criterion 2.5.8 requires that interactive targets have a minimum size of 24 by 24 CSS pixels, or provide sufficient spacing around them.

This requirement is satisfied if:

  • Size: The target itself is at least 24 by 24 CSS pixels.
  • Spacing: If a target is smaller than 24 by 24 CSS pixels, an undersized target is acceptable if the perimeter of its touch area, combined with the distance to adjacent interactive targets, creates an unobstructed circle with a diameter of at least 24 CSS pixels centered on the target.

Exceptions to SC 2.5.8:

  • Inline Elements: The target is within a sentence or text block (such as an inline hyperlink).
  • User Agent Control: The target's size is determined strictly by the browser without author modification (such as default HTML form controls).
  • Essential: A particular presentation of the target is essential to the information being conveyed (such as pins on a digital map).
  • Equivalent: An alternative control on the same page achieves the exact same action and meets the target size requirement.

WCAG 2.1 Criterion 2.5.5: Target Size (Level AAA)

Success Criterion 2.5.5 is a stricter, Level AAA standard requiring targets to be at least 44 by 44 CSS pixels. Unlike Level AA, Level AAA does not permit spacing offsets to compensate for a target smaller than 44 by 44 pixels.

Exceptions to SC 2.5.5:

  • Equivalent: An alternative control on the same screen performs the same function and meets the 44 by 44 CSS pixel requirement.
  • Inline: The target is contained within a body of text.
  • User Agent Control: The target's visual appearance and size are controlled entirely by the platform or browser.
  • Essential: The specific size is legally required or critical to the function (e.g., standard piano keys on a mobile screen).

Platform Conventions vs. WCAG Standards

While WCAG defines baseline legal accessibility standards, major mobile operating system guidelines set higher design baselines:

  • Apple Human Interface Guidelines (iOS): Recommends minimum touch targets of 44 by 44 points.
  • Google Material Design (Android): Recommends touch targets of at least 48 by 48 density-independent pixels (dp).

Adhering to platform standards ensures automatic compliance with WCAG Level AA (24x24 px) and effectively meets or exceeds WCAG Level AAA (44x44 px).

Best Practices for Mobile Implementation

  • Expand Hit Areas with Padding: Visual icons can remain small (e.g., a 16px close icon) while using CSS padding or transparent tap areas to extend the clickable hit target to 44px or 48px.
  • Maintain Target Separation: Ensure adjacent interactive components (like list items, icons in toolbars, or pagination dots) have sufficient margins to prevent accidental activation.
  • Account for Viewport Scaling: Because CSS pixels are relative to the viewport, test touch targets across multiple physical screen densities to verify physical accessibility.