WCAG 2.2 Touch Target Size and Spacing Guide

This article provides an overview of the Web Content Accessibility Guidelines (WCAG) 2.2 criteria for touch target size and spacing on mobile web interfaces. It details the Level AA requirement for minimum target size (Success Criterion 2.5.8), the Level AAA enhanced standard (Success Criterion 2.5.5), the mathematical rules governing spacing, and the permissible exceptions developers need to know when building accessible touch-friendly experiences.

Success 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 sufficient spacing around them to prevent accidental activation. This applies to buttons, links, form fields, and any interactive element operated by a pointer, such as a finger on a mobile screen.

The Spacing Alternative

If an interactive element is smaller than 24 by 24 CSS pixels, it can still pass the criterion if the space surrounding it compensates for the difference.

A 24-pixel diameter circle centered over the target must not intersect:

  • Any other target.
  • The 24-pixel diameter circle centered over any adjacent target.

In practice, this means that if a button is only 16 by 16 CSS pixels, it must have at least 4 pixels of empty space on all sides so that the total interactive footprint and its clearance create an unobstructed 24-pixel boundary.

Exceptions to SC 2.5.8

A target smaller than 24 by 24 CSS pixels is exempt from this requirement under the following conditions:

  • Spacing: The target offset is sufficient to ensure that a 24-pixel diameter circle centered on the target does not intersect another target or another target's circle.
  • Inline: The target is part of a sentence or block of text (such as an inline hyperlink).
  • User Agent Control: The target's presentation and size are determined entirely by the user agent without modification by author-supplied CSS or HTML.
  • Essential: A specific presentation of the target is essential to the information or functionality (such as digital map pins or complex data visualization points).
  • Equivalent: An alternative target on the same page performs the identical action and meets the 24 by 24 CSS pixel requirement.

Success Criterion 2.5.5: Target Size (Enhanced) - Level AAA

For higher-level accessibility compliance, WCAG 2.2 retains Success Criterion 2.5.5 at Level AAA.

This criterion requires that the size of the target for pointer inputs is at least 44 by 44 CSS pixels.

Exceptions to SC 2.5.5

Similar to the Level AA rule, exceptions include:

  • Equivalent: Another valid control on the same page performs the identical function and meets the 44 by 44 CSS pixel size.
  • Inline: The target is enclosed within a sentence or block of text.
  • User Agent Control: The appearance and size are managed entirely by the browser default styles.
  • Essential: A smaller presentation is legally or functionally necessary.

Mobile Web Implementation Best Practices

To meet these requirements without disrupting visual design layouts:

  1. Use CSS Padding Instead of Margins: Increase the interactive area of an element by applying padding rather than margin. Margin only adds blank space, whereas padding expands the clickable and tappable bounding box.
  2. Utilize Pseudo-elements for Visual Separation: If an icon must visually remain small (e.g., a 16px close icon), use an ::after or ::before pseudo-element with absolute positioning to expand the hit area to at least 24 by 24 pixels (or 44 by 44 pixels for AAA compliance).
  3. Verify Viewport Scaling: Ensure the HTML <meta name="viewport"> tag allows standard device pixel scaling (width=device-width, initial-scale=1) so CSS pixels map accurately to physical hardware touchpoints.