Tap target size: the 44px rule for mobile buttons and links

A fingertip is far less precise than a mouse pointer. When buttons are tiny or packed together, people tap the wrong thing, get frustrated and leave. Here's how big tap targets should be and how to fix small ones without redesigning your page.

The numbers

Rule of thumb: make every primary button and link at least 44 × 44 px, and keep about 8px between separate targets. On the web, 1 CSS pixel ≈ 1 iOS point ≈ 1 Android dp.

Where small targets hide

• Icon-only buttons: close (✕), menu (☰), share and social icons.
• Inline text links in dense paragraphs and footers.
• Pagination numbers and carousel dots.
• Checkboxes, radio buttons and small toggles.
• Navigation links squeezed into one line on narrow phones.

Spot them by loading your page on a 360px phone in AKCLNT Responsive Checker and zooming to 100%: anything smaller than your fingertip on the screen is suspect.

Fix 1: padding, not font size

.nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 14px;
}
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;          /* icon inside can stay 20px */
}

Fix 2: extend the hit area invisibly

When the design must stay compact, enlarge only the tappable area with a pseudo-element:

.small-link { position: relative; }
.small-link::after {
  content: ""; position: absolute;
  inset: 50% auto auto 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

Fix 3: space them out

.social, .pagination { display: flex; gap: 8px; }
footer li + li { margin-top: 6px; }

Fix 4: bigger form controls

input, select, textarea, button { min-height: 44px; font-size: 16px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; } /* the label is tappable too */

In mobile apps

// Flutter — Material buttons already pad to 48dp; for custom widgets:
SizedBox(width: 48, height: 48, child: IconButton(icon: const Icon(Icons.close), onPressed: close));

// React Native — extend the touch area without changing layout
<Pressable hitSlop={12} onPress={close}><CloseIcon size={20} /></Pressable>

Check it

Re-test on a small phone in AKCLNT Responsive Checker, tick Tappable buttons in the checklist, and confirm on a real device with the ▣ QR code — your thumb is the final judge.

FAQ

What is the minimum tap target size?

WCAG 2.2 Level AA requires at least 24×24 CSS pixels (or enough spacing). Apple recommends 44×44 points and Material Design 48×48 dp. Aim for 44–48px for primary controls.

Do tap targets need to look 44px big?

No. The tappable area must be 44px, but the visible icon or text can be smaller. Use padding or an invisible pseudo-element to extend the hit area.

How much space should be between tap targets?

At least 8px between separate targets is a good rule, so a finger aimed at one doesn't hit its neighbour.