Tap target size: how big buttons and links should be on mobile

Updated October 17, 2026 · Covers: Buttons and links are too small Buttons are too close together

What it means

A tap target is anything people tap: links, buttons, form fields, icons, tabs. On a touchscreen a fingertip covers far more area than a mouse pointer, so targets that are small or packed close together are easy to miss or to hit by mistake. MobileCheck reports two related problems:

• Buttons and links are too small – a target smaller than 24×24 CSS pixels with another target close by.
• Buttons are too close together – targets that are bigger than 24px but under 44px, almost touching other small targets.

Why it matters

Mis-taps are frustrating: opening the wrong page, adding the wrong product, closing a form by accident. They are worse for people with tremors or limited dexterity, for anyone using a phone one-handed or on the move, and for older visitors. Small targets in the mobile menu are especially common, because desktop navigation links get stacked into a list without extra spacing.

The size guidelines

WCAG 2.5.8 vs 2.5.5

The AA criterion, 2.5.8, is the minimum: a target should be at least 24×24 CSS pixels. A smaller target still passes if a 24px circle centred on it doesn't overlap any other target or another small target's circle. In plain terms: small is acceptable if it has room around it.

The AAA criterion, 2.5.5, asks for 44×44. Most teams treat 24px as the floor and 44–48px as the comfortable size for primary actions, which matches the Apple and Material guidance.

The inline link exception

Both criteria exempt links inside a sentence or block of text. A link in the middle of a paragraph is constrained by the line height, and making it 44px tall would wreck the paragraph. The exception doesn't apply to lists of links such as navigation menus, footers or tag clouds; those count as standalone targets. Other exceptions include controls whose size is set by the browser, and cases where the small size is essential, such as pins on a map.

How MobileCheck finds it

MobileCheck collects every visible link, button, form field and element with a button or link role on each device, and measures each one's size on screen. Links inside paragraphs are skipped, following the WCAG inline exception.

• A target under 24×24 px is flagged as too small only if another target lies within the 24px circle around its centre, the same spacing test WCAG uses. A lone small icon with plenty of space isn't flagged.
• A target that is at least 24px but under 44px in either direction is flagged as crowded when another small target is almost touching it (a gap of under 4px). We recommend at least 8px of space, or making them 44px tall.

Each flagged element is highlighted with its measured size, such as "18×18px". The check also runs with the mobile menu opened, because menus are where small, tightly stacked links usually live.

How to fix it

Add padding instead of making text bigger

The tap area of a link or button is its box, including padding. You can make a small text link a comfortable target without changing its look:

.nav a {
  display: block;
  padding: 12px 16px;
  min-height: 44px;
}

Note display: block (or inline-block, or flex): vertical padding on an inline element doesn't push neighbours apart and can make targets overlap.

Icon buttons

A 20px icon can sit inside a 44px button. Size the button, not the icon:

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

Give icon-only buttons an accessible name too, for example aria-label="Close".

Expand the hit area with a pseudo-element

When the visual layout must stay tight, you can extend the tappable area invisibly:

.small-link { position: relative; }
.small-link::after {
  content: "";
  position: absolute;
  inset: -10px;   /* grows the tap area by 10px on every side */
}

Make sure enlarged areas don't overlap a neighbour's, or the tap will go to whichever element is on top. Note that MobileCheck measures an element's own box, so a pseudo-element hit area may still be reported; padding or min-height is the fix that both users and the check will see.

Space out crowded groups

For rows of buttons, pagination, social icons and footer links, add a gap:

.pagination { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-links li + li { margin-top: 8px; }

Don't forget form controls

Native checkboxes and radio buttons are small by default. Wrap them in a <label> so the whole label text is tappable, and give the label some padding.

How to check the fix

Run the free check again and look at both the normal and open-menu results. Then try it with your own thumb in the phone window: open the menu, tap through the links and the pagination, and see whether you hit what you aimed for.

Check both engines. Safari and Chrome draw form controls and system fonts differently, so a button can be a few pixels shorter on iPhone than in Chrome. A 44px min-height keeps you safe on both. For broader layout testing, the responsive design checker runs several screen sizes at once, and the guide to sticky headers and pop-ups covers close buttons that are too small to hit.

Related guides