Designing tappable interfaces is harder than it looks. A button that feels comfortable on a desktop mockup can become a frustrating mistarget on a phone held in one hand on a moving train. At Zach’s Web Designs, we audit dozens of mobile interfaces every year, and undersized tap zones remain one of the top three usability issues we find. This guide pulls together the official touch target size recommendations from Apple, Google, and the W3C, plus the spacing rules and pitfalls that rarely make it into the official docs.
What is a touch target?
A touch target is the interactive area a user can tap, click, or activate with a finger or stylus. It is not always the same as the visible element. A 16px icon can have a 48px invisible hit area around it, and that hit area is what counts for accessibility and usability.
Two things determine whether a touch target works:
- Size: how large the tappable region is.
- Spacing: how much room separates it from the next target.
Official touch target size recommendations
Different organizations publish different minimums. Here is the consolidated reference designers and developers should keep on hand.
| Source | Minimum size | Unit | Notes |
|---|---|---|---|
| Apple Human Interface Guidelines | 44 x 44 | pt | Applies to iOS, iPadOS, watchOS controls. |
| Google Material Design 3 | 48 x 48 | dp | Roughly 9 mm physical size on any Android screen. |
| WCAG 2.2 AA (SC 2.5.8) | 24 x 24 | CSS px | Minimum, with spacing exceptions allowed. |
| WCAG 2.1 AAA (SC 2.5.5) | 44 x 44 | CSS px | Stricter target for high accessibility conformance. |
| Nielsen Norman Group | 1 cm x 1 cm | physical | Roughly 0.4 in x 0.4 in to avoid fat-finger errors. |
| Automotive (Design for Driving) | 76 x 76 | dp | Larger so controls are glanceable while driving. |
Why the numbers differ
Apple measures in points, Google in density-independent pixels, and WCAG in CSS pixels. On a typical mobile screen, a CSS pixel, a point, and a dp are very close in physical size, so 44pt, 48dp, and 44 CSS px all land near 9 mm in the real world. The WCAG 2.2 AA value of 24 CSS px is intentionally smaller because it is a floor, not a target you should aim for in normal product design.
Which minimum should you actually use?
For production mobile and responsive interfaces in 2026, we recommend the following:
- Default to 48 x 48 CSS pixels for primary interactive elements. This satisfies Apple, Material, and WCAG AAA at once.
- Never go below 24 x 24 CSS pixels, the WCAG 2.2 AA floor, and only when proper spacing is provided.
- Use 44 x 44 CSS pixels as a safe baseline for icon buttons, close buttons, and inline links inside content.
- Increase to 56 x 56 or more for one-handed use cases, gloved use, automotive, or older audiences.
Inline text links are the exception
WCAG 2.2 explicitly exempts inline links inside a sentence from the 24 px rule. You do not have to break paragraph rhythm to enlarge a hyperlink, but you should still make sure the click area is comfortable, especially if the link is critical.
Spacing rules between touch targets
Size alone is not enough. Two 48 px buttons with no gap between them are still hard to tap accurately. The spacing rule is simple but often ignored.
- Minimum 8 px gap between any two touch targets in Material Design.
- WCAG 2.2 spacing exception: an undersized target (below 24 px) is acceptable if a 24 px diameter circle centered on it does not overlap any other target or that circle’s area.
- Apple recommends visual breathing room around tappable controls so users can identify them without zooming.
How to test spacing quickly
Draw an imaginary 24 px (or ideally 44 px) circle around the center of every interactive element on your screen. If any two circles overlap, your spacing fails. Browser dev tools and Figma plugins like “A11y Annotation Kit” can do this automatically.
CSS techniques to enlarge touch targets without breaking layout
You often want a small icon visually but a large hit area underneath. Here are three reliable patterns.
1. Padding plus background-clip
.icon-button {
padding: 12px;
min-width: 48px;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}2. Pseudo-element hit area
.small-link {
position: relative;
}
.small-link::after {
content: "";
position: absolute;
inset: -12px;
}This expands the tappable area without changing layout, perfect for small icons inside dense toolbars.
3. Logical properties for responsive layouts
.button {
min-block-size: 48px;
min-inline-size: 48px;
padding-block: 12px;
padding-inline: 16px;
}Common touch target mistakes we still see in 2026
- Tiny close buttons in modals. An ‘X’ icon at 16 px with no extra padding is the single most common offender.
- Stacked links in footers with line-height under 24 px, causing constant mistaps.
- Icon-only nav bars where icons are 24 px but the surrounding tappable container is the same size.
- Carousel arrows placed in tiny 20 px hit zones over images.
- Checkboxes and radios that rely on the native input size (often 13 px) without enlarging the label hit area.
- Hover-only affordances that disappear on touch, leaving users guessing where to tap.
- Sticky bars that get partially covered by the iOS home indicator or Android gesture bar, shrinking the effective target.
Touch targets and responsive design
The same component renders on a 13 inch laptop and a 5 inch phone. Use these breakpoint rules:
- Below 768 px viewport: enforce 48 x 48 CSS px minimum on every interactive element.
- 768 px to 1024 px (tablets): keep 44 x 44 CSS px, since most tablets are still touch-first.
- Above 1024 px: 24 x 24 CSS px is acceptable for mouse users, but check if the device has a touchscreen using
@media (pointer: coarse).
@media (pointer: coarse) {
.button { min-height: 48px; min-width: 48px; }
}How to audit your existing site for touch target issues
- Run Lighthouse in Chrome DevTools and check the “Tap targets are sized appropriately” audit.
- Use axe DevTools or WAVE for WCAG 2.2 SC 2.5.8 violations.
- Test on a real phone, not just the device emulator. Use it one-handed.
- Ask someone with longer fingernails or motor difficulties to try your key flows.
- Record session replays (Hotjar, Microsoft Clarity) and look for rage taps near small elements.
Quick reference cheat sheet
| Element type | Recommended size | Minimum spacing |
|---|---|---|
| Primary CTA button | 48 x 48 px or larger | 16 px |
| Icon button (toolbar) | 44 x 44 px | 8 px |
| Inline text link | Match line-height (24 px+) | Exempt under WCAG |
| Form checkbox / radio | 24 x 24 px input + full label hit area | 8 px |
| Bottom nav item | 56 x 56 px | 4 px (visual divider) |
| Modal close button | 48 x 48 px | 16 px from edge |
FAQ
What is the minimum touch target size for WCAG 2.2?
WCAG 2.2 Success Criterion 2.5.8 (Level AA) requires touch targets to be at least 24 by 24 CSS pixels. The stricter AAA criterion 2.5.5 asks for 44 by 44 CSS pixels.
Is 44 px or 48 px the right minimum?
Both are valid. Apple uses 44 pt and Google uses 48 dp, and the difference at typical screen densities is roughly half a millimeter. Pick one and apply it consistently. We recommend 48 px because it satisfies every guideline at once.
Do touch target rules apply to desktop sites?
Yes when the device has a touchscreen. Use the pointer: coarse media query to apply larger sizes only when the user is on a touch device.
Can a touch target be smaller than 24 px?
Only if it falls under one of the WCAG exceptions: inline text, an equivalent larger target exists elsewhere, the control is user-agent default, or there is enough surrounding spacing that a 24 px circle would not overlap another target.
How do I increase the hit area without resizing the visual element?
Use padding inside the clickable element, or add an absolutely positioned ::after pseudo-element that extends beyond the visible bounds. Both keep the visual design intact while enlarging the tappable region.
What about touch targets in dense data tables?
Tables are the hardest case. Either give each row a minimum height of 44 px, or move row actions to a swipe gesture or detail view, where you can use full-size buttons.
Final thoughts
Touch target size is one of the cheapest accessibility wins available. A few extra pixels of padding can reduce mistaps, lower bounce rates on mobile, and bring your interface into compliance with WCAG 2.2 AA, which is now the legal baseline in most of Europe and increasingly in North America. Default to 48 px, respect spacing, and audit regularly. Your thumbs and your users will thank you.
If you would like Zach’s Web Designs to audit your mobile interface for touch target compliance and usability, get in touch through our contact page.