The average adult fingertip covers approximately 44-48 square pixels on a modern smartphone screen. When interactive elements are smaller than this, users miss. They tap the wrong link, trigger the wrong action, or — most commonly — they simply give up and leave.
Touch target failures are among the most measurable usability problems in mobile UX. MIT's Touch Lab found that the average finger pad is 10-14mm wide, and error rates increase exponentially as targets shrink below this threshold. A 25% reduction in target size can cause a 200-300% increase in tap errors.
WCAG 2.2 addresses this directly with two success criteria. Understanding and implementing them is essential for any mobile-first product. For developers and designers building touch interfaces, this is not optional — it is fundamental to usability.
WCAG 2.5.5 and 2.5.8: The Two Touch Target Rules
WCAG 2.5.8 — Target Size Minimum (Level AA)
This criterion, new in WCAG 2.2, requires that interactive targets are at least 24x24 CSS pixels, or have sufficient spacing from adjacent targets to create an equivalent clickable area.
This is the minimum legal compliance threshold. Any interactive element below 24x24px that does not have adequate surrounding spacing is a WCAG 2.2 AA violation.
There are specific exceptions:
- Inline links: Text links within sentences or paragraphs are exempt
- User-agent controlled: Elements whose size is determined by the browser (native checkboxes, for example)
- Essential: When the target's size is essential to the information being conveyed
- Equivalent: When another control for the same function meets the target size
WCAG 2.5.5 — Target Size Enhanced (Level AAA)
The enhanced criterion requires interactive targets to be at least 44x44 CSS pixels. This is the recommended best practice — the size that most closely matches the physical dimensions of a human fingertip.
While AAA compliance is not legally required in most jurisdictions, the 44x44px standard is the threshold below which error rates increase meaningfully. Apple's Human Interface Guidelines and Google's Material Design specifications both align with this recommendation.
The Error Rate Data: Why Size Matters
The relationship between target size and error rates is well-documented and consistent across studies:
- 44x44px targets: ~1.6% error rate (baseline — acceptable for most interactions)
- 34x34px targets: ~3.2% error rate (double the baseline)
- 24x24px targets: ~5.8% error rate (minimum AA threshold — functional but not comfortable)
- 16x16px targets: ~12.4% error rate (common in footer links, icon-only buttons)
- 10x10px targets: ~26% error rate (close buttons on modals, inline icons)
These error rates compound. A checkout flow with 5 small-target interactions and a 12% per-tap error rate means 48% of users will experience at least one mis-tap. Each mis-tap is a friction point that reduces conversion probability.
Beyond error rates, small targets create motor load — users must slow down, aim more carefully, and sometimes use a second hand or a fingernail. This increases task completion time by 25-40% compared to adequately sized targets. The relationship between interaction friction and cognitive effort is explored further in our cognitive load guide.
Spacing Strategies: When You Cannot Make Targets Bigger
Sometimes design constraints prevent enlarging the target itself. In these cases, WCAG 2.5.8 allows you to meet compliance through spacing — ensuring the combined target and surrounding inactive space reaches the minimum threshold.
The Spacing Formula
For a target of size T, the minimum spacing S from adjacent interactive elements is:
S = (24 - T) / 2 (for AA compliance)
So a 16x16px icon button needs at least 4px of spacing on all sides from any other interactive element. A 20x20px target needs at least 2px. Note that this spacing must be to other interactive elements — non-interactive content does not count.
Practical Spacing Patterns
- Navigation bars: Minimum 8px between tab items. For bottom navigation with 5 items, this typically means the icon + label area fills each 1/5 of the screen width — usually well above 44px
- List items: Minimum 8px vertical gap between tappable list items. On a 16px line-height with 8px padding, items naturally exceed 44px height
- Toolbars: Icon-only toolbars need at least 12px between 24px icons to meet AA. For AAA, use 44px hit areas with no gap required
- Form elements: Radio buttons and checkboxes should have their tap area extended to include the label text. A 16px checkbox with a text label creates a combined target well above 44px
- Cards: When cards contain multiple interactive elements (title link, action button, overflow menu), ensure 8px minimum between each
For proper implementation, the CSS padding and min-height/min-width properties extend the touchable area without changing visual size. This is the most common technique for meeting target requirements without redesigning the visual layout.
The Worst Offenders: Common Touch Target Failures
Close Buttons on Modals and Overlays
The most universally frustrating touch target failure. Modal close buttons are typically 16-20px icons positioned in the corner — precisely where they are hardest to reach and hardest to tap. Users who fail to close a modal often become trapped (especially if the background overlay does not dismiss it), creating a "roach motel" interaction pattern.
Fix: Minimum 44x44px close button. Allow dismissal by tapping outside the modal. On iOS, support swipe-down to dismiss. Consider placing the close button at the bottom of the modal where thumbs can reach it.
Footer Navigation Links
Footer links are often 12-14px text with minimal spacing, creating targets as small as 10x16px. Footer links may be used less frequently, but they are still interactive — and they often contain legally required links (privacy policy, terms of service).
Fix: Increase line-height to 44px or add padding to create 44px minimum touch areas. Group links into columns with adequate spacing.
Inline Text Links in Paragraphs
While WCAG 2.5.8 exempts inline links, they remain a practical usability concern. Links in body text are difficult to tap accurately, especially when adjacent lines also contain links.
Fix: When possible, extract important links from inline text and present them as distinct, larger interactive elements (buttons, cards, or list items). For inline links that must remain, increase line-height to at least 1.5 to create more vertical space between tappable lines.
Social Media Icon Rows
Social sharing buttons are frequently implemented as 24-32px icons with 4-8px spacing — creating a row of tiny, closely packed targets. Users frequently tap the wrong platform, and the frustration is disproportionate to the action's importance.
Fix: Use at least 44x44px hit areas (padding around the icon) with 8px minimum spacing. Consider reducing the number of social options to the 3-4 most relevant for your audience.
Data Tables on Mobile
Interactive elements within mobile tables — sorting controls, row actions, edit icons — routinely fail touch target requirements. Tables are inherently challenging on small screens.
Fix: Use card-based layouts instead of tables on mobile. If tables are necessary, ensure action buttons are in dedicated columns with 44px minimum height per row.
How to Audit Your Mobile Touch Targets
A systematic touch target audit follows this process:
Step 1: Identify All Interactive Elements
Map every element a user can tap on each screen: buttons, links, form inputs, toggles, checkboxes, tabs, sliders, accordions, icons, and any element with an onclick handler or anchor tag.
Step 2: Measure Target Sizes
Use browser DevTools in responsive mode. Select each element and check its computed width and height. Remember that the clickable area (including padding) matters, not just the visual element size. A 16px icon with 14px padding on all sides has a 44x44px touch target.
Step 3: Check Spacing Between Adjacent Targets
For any target below 24px, measure the distance to its nearest interactive neighbor. Apply the spacing formula. Ensure spacing is calculated edge-to-edge between clickable areas, not between visual elements.
Step 4: Test on Real Devices
Emulators are useful for measurement but do not replicate the physical experience. Test on at least:
- A current-generation iPhone (representing typical iOS users)
- A mid-range Android device (smaller screens, different touch calibration)
- A larger phone/phablet (where one-handed use changes the thumb's reach zone)
Test with both thumbs and index fingers. Test in motion (walking, standing on public transit). Test with one hand.
Step 5: Prioritize Fixes by User Impact
Not all touch target failures are equal. Prioritize:
- Critical path elements: Navigation, primary CTAs, checkout buttons, form submits
- High-frequency interactions: Elements tapped repeatedly in a single session
- Error-prone elements: Close buttons, tightly packed controls, toggle switches
Use a heuristic analysis to evaluate touch targets in the context of the full interaction flow — size failures that occur at conversion points have outsized business impact.
Implementing Touch Target Fixes in CSS
Most touch target issues can be resolved with CSS alone, without changing visual design:
Extending clickable area with padding:
Add padding to the interactive element (not a wrapper) to extend its tap zone. A 24px icon with padding: 10px becomes a 44x44px target while visually remaining 24px. Use box-sizing: border-box or adjust layout accordingly.
Minimum dimensions:
Set min-width: 44px and min-height: 44px on all interactive elements. This is a single global rule that prevents most touch target failures before they occur.
Spacing with gap:
Use CSS gap in flex and grid layouts to maintain consistent spacing between interactive elements. gap: 8px between interactive children handles most spacing requirements.
Touch-action for precision areas:
On elements where precision matters (sliders, small controls), use touch-action: manipulation to disable double-tap zoom and reduce the 300ms click delay, making the target feel more responsive even at smaller sizes.
Touch Targets and Inclusive Design
Touch target requirements exist because human fingers vary. But the variation is wider than most designers realize:
- People with motor impairments (Parkinson's, arthritis, limited hand mobility) have reduced precision
- Elderly users have reduced fine motor control — and they are the fastest-growing smartphone demographic
- Users with large fingers (correlating with hand size, not ability) consistently struggle with small targets
- Situational impairments — cold hands, gloves, wet fingers, one-handed carrying — affect everyone
Designing for 44px targets is not designing for edge cases. It is designing for the real distribution of human motor capability in real usage contexts. This is why proper touch targets connect to broader accessibility compliance.
Testing with Heurilens
Manual touch target audits are thorough but time-consuming, especially across multi-screen applications with different layouts per breakpoint. The Heurilens touch target tester automates the measurement process — scanning every interactive element on a page, measuring its computed size and spacing, and flagging violations against WCAG 2.5.5 (44px AAA) and 2.5.8 (24px AA) thresholds.
Combined with the contrast checker and heading hierarchy analyzer, you get a comprehensive mobile accessibility audit without writing a single line of test code.
Make Every Tap Count
Touch target sizing is one of the most concrete, measurable, and fixable aspects of mobile UX. The rules are clear (24px minimum, 44px recommended), the error rate data is unambiguous, and the CSS fixes are straightforward. There is no reason for any mobile interface to ship with undersized touch targets in 2026.
Yet the WebAIM Million study found that 31% of mobile homepages have critical touch target violations on their primary conversion paths. Every one of those violations is a quantifiable source of lost taps, lost conversions, and lost revenue.
Heurilens identifies touch target violations across your entire mobile interface — with specific measurements, WCAG level assessments, and CSS fix suggestions for each element. Explore our plans and find out how many taps your users are missing.
Was this article helpful?
