REFERENCE · ACCESSIBILITY
Touch Target Guide
Minimum interactive sizes per platform — Android, iOS, Web (WCAG)
Android — Material Design
48
48 × 48 dp
density-independent pixels
Material Design 3
iOS — Human Interface
44
44 × 44 pt
points (@1x, @2x, @3x)
Apple HIG
Web — WCAG 2.2 AAA
44
44 × 44 px
CSS pixels (SC 2.5.8)
WCAG 2.2 Level AAA
Platform Requirements
| Platform | Min Size | Recommended | Spacing |
|---|---|---|---|
| Android | 48dp | 56dp | 8dp |
| iOS | 44pt | 48pt | 8pt |
| Web (AA) | 24×24px | 44×44px | — |
| Web (AAA) | 44×44px | 48×48px | — |
| Windows | 40×40px | 48×48px | 8px |
| watchOS | 38pt | 44pt | 6pt |
WCAG Success Criteria
SC 2.5.5 — Target Size (Enhanced)
Level AAA — at least 44×44 CSS pixels
SC 2.5.8 — Target Size (Minimum)
Level AA — at least 24×24 CSS pixels with offset spacing
Exceptions
Inline links in text, browser-default controls, legally required layouts, and essential fixed presentations are exempt
Visual Size Comparison
Rendered at actual pixel size — compare against your design
24
WCAG AA
24×24
24×24
38
watchOS
38×38
38×38
40
Windows
40×40
40×40
44
iOS / WCAG AAA
44×44
44×44
48
Android
48×48
48×48
56
Comfortable
56×56
56×56
Common Element Audit
Typical sizes — check if they meet platform minimums
Primary button
48px
PASS
Nav link
44px
PASS
Icon button
40px
WARN
Chip / tag
32px
WARN
Small icon
24px
FAIL
Checkbox / radio
20px
FAIL
Close button (×)
16px
FAIL
Best Practices
Use padding, not just the visual
A 24px icon can have a 48px tap area via padding. The touch target includes the entire clickable region.
Keep 8px minimum gap
Adjacent targets need spacing to prevent accidental taps. Material Design and iOS both recommend 8dp/pt gaps.
Center the visual inside the target
Users expect the tap zone to be centered on the visible element. Offset targets cause missed taps.
CSS Quick Fix
Expand small icons to meet the 48px target without changing visual size — click to copy
.icon-btn {
/* Visual size */
width: 24px;
height: 24px;
/* Expand touch target to 48px */
padding: 12px;
margin: -12px;
/* Or use ::before pseudo-element */
position: relative;
}
.icon-btn::before {
content: '';
position: absolute;
inset: -12px;
}
PRO TIP
Use min-height: 48px and min-width: 48px on interactive elements as a universal baseline.
Pixel Density Conversion
How 48dp/44pt maps to actual hardware pixels at different densities
| Density | Scale | Android 48dp | iOS 44pt | Example Devices |
|---|---|---|---|---|
| mdpi / @1x | 1× | 48px | 44px | Older phones, low-DPI tablets |
| hdpi | 1.5× | 72px | — | Nexus One era |
| xhdpi / @2x | 2× | 96px | 88px | iPhone SE, iPad, Pixel 4a |
| xxhdpi / @3x | 3× | 144px | 132px | iPhone 15, Pixel 8, Galaxy S24 |
| xxxhdpi | 4× | 192px | 176px | Galaxy S Ultra, Sony Xperia |