Touch Target Test

When to use Touch Target Test

• Auditing mobile navigation menus: Mobile menu items are frequently too small for users with large fingers or motor impairments. Audit all nav items against the 44 x 44 px recommended target.
• Checking icon-only buttons: Icon buttons (close, share, like, delete) are often designed at 16-20 px icon size without accounting for the required touch target around them. Verify each has a 24 x 24 minimum clickable area.
• Reviewing form controls on mobile: Checkboxes and radio buttons rendered at their browser default size often fall below 24 x 24 px. Test form pages at mobile viewport widths before release.
• Verifying accessibility compliance for WCAG 2.2: WCAG 2.5.8 is a new Level AA requirement in WCAG 2.2 that was not present in WCAG 2.1. Sites claiming WCAG 2.2 AA conformance must pass this criterion across all interactive elements.

How touch target size requirements work under WCAG 2.5.8

The Touch Target Test checks whether interactive elements in your UI meet the minimum size requirements defined in WCAG 2.2 Success Criterion 2.5.8 (Minimum Target Size), which was introduced in WCAG 2.2 as a Level AA criterion. The criterion requires that the size of the target for pointer inputs is at least 24 x 24 CSS pixels, with an important nuance: if the target itself is smaller than 24 x 24 px, there must be sufficient spacing around it so that a 24 x 24 px circle centred on the target does not intersect another target or its spacing offset. This offset approach means a small icon can technically pass if it has adequate spacing from neighbouring elements.

The 24 x 24 CSS pixel minimum is a floor, not a recommendation. Apple's Human Interface Guidelines recommend a minimum touch target of 44 x 44 points; Google's Material Design guidelines specify 48 x 48 dp for touch targets. These figures are based on research into average adult fingertip size (approximately 10 mm) and the acceptable error rate for touch input. On a 2x density display, a 44 CSS-pixel target renders as 88 physical pixels - large enough for reliable tap accuracy even with slightly imprecise touch input.

The tool takes a URL or HTML snippet, measures the rendered dimensions and spacing of interactive elements (buttons, links, form inputs, checkboxes, radio buttons, and custom components with role="button") using the getBoundingClientRect() API, and flags any that fall below the 24 x 24 px threshold or that have insufficient spacing to satisfy the offset rule.