Tap targets too small: how big buttons and links should be

01

The size to aim for

Apple recommends 44×44 points and Google’s Material Design 48×48dp. WCAG 2.2 sets a minimum of 24×24 CSS pixels (level AA) and recommends 44×44 (AAA). In practice: make every target at least 44×44px on phones, and leave about 8px between neighbouring targets.

02

Make the target bigger than the visible element

An icon can stay 20px wide while its touch area is 44px. Add padding to the link or button rather than scaling the icon, or extend the hit area with a pseudo-element.

.icon-button { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }

/* Larger hit area without changing the layout */
.small-link { position: relative; }
.small-link::after { content: ''; position: absolute; inset: -12px; }

03

Common offenders

• Footer and legal links in a dense row
• Social media icons
• Close buttons on pop-ups and cookie banners
• Pagination numbers and carousel dots
• Inline links inside small text
• Checkboxes and radio buttons without a clickable label

04

Space them out on phones

Stack footer links vertically on small screens, give inline links a comfortable line-height (1.6 or more), and wrap checkboxes in their <label> so the whole label is tappable.