Touch Target · Reference
Touch Target
Minimum touch target sizes by platform and WCAG level, with pixel-density conversions. Click any row to copy. Runs in your browser — no server call, no tracking.
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 AA24×24
38
watchOS38×38
40
Windows40×40
44
iOS / WCAG AAA44×44
48
Android48×48
56
Comfortable56×56
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 |
Common Element Audit
Typical sizes — check if they meet platform minimums
Primary button48px
PASS
Nav link44px
PASS
Icon button40px
WARN
Chip / tag32px
WARN
Small icon24px
FAIL
Checkbox / radio20px
FAIL
Close button (×)16px
FAIL