EZUD Touch Target Sizes and Mobile Accessibility
Touch Target Sizes and Mobile Accessibility
Small touch targets are one of the most pervasive usability problems on mobile devices. Fingers are imprecise instruments — the average adult fingertip covers roughly 10mm (about 40px on a typical phone display). When targets are too small or too close together, every user suffers, but users with motor impairments, tremors, or limited dexterity are affected most severely.
WCAG 2.2 introduced a dedicated success criterion for this problem: 2.5.8 Target Size (Minimum), at Level AA.
The WCAG 2.2 Requirements
SC 2.5.8 Target Size (Minimum) — Level AA
Interactive targets must be at least 24x24 CSS pixels in size. If a target is smaller than 24x24 CSS pixels, it must have enough surrounding spacing so that a 24px-diameter circle centered on the target does not overlap any other target’s circle.
SC 2.5.5 Target Size (Enhanced) — Level AAA
Targets must be at least 44x44 CSS pixels. This was introduced in WCAG 2.1 and remains the enhanced-level recommendation.
Exceptions
Five scenarios are exempt from the 24x24 minimum:
- Spacing exception: Small targets are allowed if sufficiently spaced apart.
- Equivalent exception: An alternative control exists that meets the size requirement.
- Inline exception: Targets within a sentence or block of text (inline links) are exempt.
- User agent control: Browser-default controls not modified by the author are exempt.
- Essential exception: The exact size and position is necessary for conveying information (map pins, for example).
Platform Guidelines Beyond WCAG
Apple, Google, and Microsoft set their own minimum target sizes:
| Platform | Minimum Size | Recommended Size |
|---|---|---|
| WCAG 2.2 AA | 24x24 CSS px | 44x44 CSS px (AAA) |
| Apple (iOS HIG) | 44x44 points | — |
| Google (Material Design) | 48x48 dp | — |
| Microsoft (Fluent) | 32x32 effective px | 40x40 effective px |
Google’s 48dp recommendation exceeds both the WCAG AA and AAA thresholds. Designing to 48dp satisfies all standards simultaneously.
Common Target Size Failures
Icon-only buttons without padding
A 16x16 icon used as a close button, bookmark toggle, or menu trigger has a visual target far below the 24px minimum. The fix: add padding so the clickable area reaches at least 44x44, even if the visible icon remains small.
.icon-button {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px;
}Closely packed action links
Lists of text links (footer navigation, tag clouds, settings panels) often place targets within a few pixels of each other. When targets overlap within the 24px-circle rule, users with imprecise input hit the wrong target. Add vertical and horizontal spacing with gap, padding, or margin.
Form checkboxes and radio buttons
Native checkboxes and radio buttons render at roughly 13x13 pixels in most browsers. These fall under the “user agent control” exception only if you have not restyled them. Once you apply custom styling, you own the target size. Ensure custom checkboxes and radios meet the 24px minimum, preferably 44px.
Compact table rows
Tables with clickable rows or inline action buttons frequently pack targets into 30-pixel-tall rows. On touch devices, row height should be at least 44px to provide a comfortable touch area.
Designing for Comfortable Touch
Size the target, not just the icon. The interactive hit area should extend beyond the visual element. Padding is your tool.
Space targets apart. Even if each target is 24px, placing them 2px apart forces precision. Aim for at least 8px spacing between adjacent targets.
Use consistent sizing. Mixing 24px and 48px targets on the same screen creates a jarring interaction pattern. Standardize on one comfortable size in your design system.
Test on actual devices. Emulators simulate viewport dimensions but not finger precision. Test on physical phones with different screen sizes and with accessibility settings (increased touch accommodation, assistive touch) enabled.
Consider assistive touch modes. Both iOS and Android offer touch accommodation settings that adjust how taps are registered. Your targets should work with these settings active, which means generous sizing and spacing.
Relationship to Other Accessibility Requirements
Touch target sizing intersects with several other UX accessibility concerns:
- Keyboard navigation — Focus indicators should be visible around the full target area, not just the icon.
- Form design — Label elements increase the clickable area of form controls, which counts toward target size.
- Motor impairment design — Large targets are a foundational accommodation for users with tremors, limited range of motion, or switch-device input.
Key Takeaways
- WCAG 2.2 AA requires 24x24 CSS pixel targets (SC 2.5.8); AAA requires 44x44 (SC 2.5.5).
- Google Material Design recommends 48dp, which exceeds all WCAG thresholds.
- Pad small icons to expand the interactive area beyond the visible element.
- Space adjacent targets at least 8px apart to prevent accidental activation.
- Test on physical devices with accessibility touch settings enabled.
Next Steps
- Review the WCAG 2.2 guidelines overview for the full set of AA requirements.
- Apply target sizing principles to mobile app design on iOS and Android.
- Design forms with appropriately sized inputs and labels.
Sources
- WCAG 2.2 SC 2.5.8 Target Size (Minimum) — The Level AA requirement for interactive target sizing.
- Understanding SC 2.5.8 — W3C explanation of target size requirements and exceptions.
- WebAIM: Motor Disabilities — Assistive technology context for target sizing decisions.
- Deque University Target Size — axe rule documentation for automated target size checks.
Target size requirements referenced from WCAG 2.2 Success Criteria 2.5.5 and 2.5.8. Platform guidelines from Apple Human Interface Guidelines, Google Material Design 3, and Microsoft Fluent Design System.