Touch Target Size Guidelines: How Big Should Mobile Buttons Be in 2026

Touch target size is the single most under-tested detail on mobile interfaces. A button can look perfect in Figma, pass a colour contrast check, and still be miserable to tap on a real phone held in one hand on a moving bus. This guide gives you the numbers from the three sources that matter (Apple, Google Material and WCAG), the exact pixel and rem values to drop into your CSS, spacing rules for thumb zones, and a 5 minute audit you can run on your own site today.

What is touch target size?

The touch target is the whole activatable area of an interactive element, not just the visible graphic. A 16 px trash icon sitting inside a 48 px padded button has a 16 px icon and a 48 px target. Only the second number matters for usability and accessibility.

Why it matters in numbers: the average adult fingertip contact area is roughly 8 to 10 mm wide, and thumbs are wider still. Nielsen Norman Group recommends a physical target of about 1 cm x 1 cm. Screens do not speak in centimetres, so the standards translate that physical reality into device independent units: points (pt) on iOS, density independent pixels (dp) on Android, and CSS pixels on the web. On the web, 1 pt and 1 dp both map to 1 CSS pixel at standard density, which is why the numbers below are directly usable in a stylesheet.

The decision table: Apple vs Material vs WCAG

Standard	Minimum size	In CSS px	In rem (16 px root)	Spacing rule	Status
Apple Human Interface Guidelines	44 x 44 pt	44 x 44	2.75rem	No fixed value, targets must not overlap	Platform guideline
Google Material Design 3	48 x 48 dp	48 x 48	3rem	8 dp minimum between targets	Platform guideline
WCAG 2.5.8 Target Size (Minimum)	24 x 24 CSS px	24 x 24	1.5rem	Or a 24 px circle around each target that does not intersect a neighbour	Level AA, legally referenced
WCAG 2.5.5 Target Size (Enhanced)	44 x 44 CSS px	44 x 44	2.75rem	Not specified	Level AAA
Nielsen Norman Group (research)	1 cm x 1 cm physical	roughly 38 to 40	around 2.4rem	2 mm minimum gap	Usability research

How to read that table

• 24 px is the legal floor, not the design goal. WCAG 2.5.8 (Level AA since WCAG 2.2) is the number auditors and accessibility lawsuits reference. Hitting exactly 24 px means you are compliant and still hard to use.
• 44 px is the safe cross platform number. It satisfies Apple, satisfies WCAG AA and AAA, and is close to the 1 cm research figure.
• 48 px is the comfortable default. Material’s 48 dp equals about 9 mm of physical screen, which lands squarely inside the recommended 7 to 10 mm range. Use it for anything in a primary flow: add to cart, submit, next step.

Our recommendation for 2026 builds

1. Primary actions and form controls: 48 x 48 CSS px minimum.
2. Secondary icons, toolbars, table row actions: 44 x 44 CSS px minimum.
3. Dense UI that genuinely cannot fit more (data grids, editors): never below 24 x 24 CSS px, and add 24 px of clear spacing around each target.
4. Inline text links inside a paragraph: exempt from 2.5.8, but still give them generous line-height (1.6 or more) so they are not stacked one on top of the other.

The WCAG 2.5.8 exceptions you need to know

Success Criterion 2.5.8 has five exceptions, and most teams misuse them. A target under 24 x 24 CSS px still passes if:

• Spacing: you can draw a 24 px diameter circle centred on the target without touching the circle of any other target. This is the exception that saves dense toolbars.
• Equivalent: the same function is available elsewhere on the page at a compliant size.
• Inline: the target is a link inside a sentence or block of text.
• User agent control: the size is set by the browser and not modified by your CSS (a native checkbox you never styled, for example).
• Essential: changing the size would break the meaning, such as a pin on an interactive map.

Note what is not an exception: “our design system says 32 px”, “it looks better small”, or “desktop users have a mouse”. The criterion applies to all pointer inputs, including a mouse.

CSS you can copy today

Set the sizes with logical properties so they survive vertical writing modes and RTL layouts, and use rem so they scale with user font settings. See https://nngroup.com.

:root {
  --target-min: 2.75rem;  /* 44px, Apple and WCAG AAA */
  --target-comfort: 3rem; /* 48px, Material */
  --target-gap: 0.5rem;   /* 8px, Material spacing */
}

.btn,
.nav a,
button,
[role='button'],
input[type='checkbox'],
input[type='radio'] {
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn--primary {
  min-inline-size: var(--target-comfort);
  min-block-size: var(--target-comfort);
  padding-inline: 1.25rem;
}

Expanding a small icon without changing the layout

When the visual icon must stay 16 px (a close button in a chip, a social icon in a footer), grow the hit area with a pseudo element instead of padding. The layout stays identical, the target grows.

.icon-link {
  position: relative;
  display: inline-block;
  inline-size: 1rem;   /* 16px visual */
  block-size: 1rem;
}

.icon-link::after {
  content: '';
  position: absolute;
  inset-block: 50%;
  inset-inline: 50%;
  inline-size: 2.75rem;  /* 44px hit area */
  block-size: 2.75rem;
  translate: -50% -50%;
}

Warning: two of these side by side will overlap and the top one wins. Always pair the trick with a real gap of at least 8 px, ideally 12 px.

Guaranteeing spacing between stacked targets

.menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px minimum, 12px is safer */
}

.menu a {
  min-block-size: 3rem;
  display: flex;
  align-items: center;
  padding-inline: 1rem;
}

Thumb zones: size is only half the story

A 48 px button in the top left corner of a 6.7 inch phone is still uncomfortable for a right handed one hand grip. Combine size with placement.

Screen zone	Reachability	Recommended minimum target	Put here
Bottom third	Easy	48 px	Primary CTA, tab bar, sticky checkout button
Middle third	Comfortable	44 px	Content links, cards, form fields
Top third and far corners	Hard, requires regrip	56 px	Rare or destructive actions only (close, settings)
Bottom edge (last 16 px)	Conflicts with system gesture bar	Avoid entirely	Nothing, use safe area insets

Respect the system gesture area with:

.sticky-cta {
  padding-block-end: max(1rem, env(safe-area-inset-bottom));
}

The 7 failing patterns we find on almost every audit

1. Tiny icon links in the footer or header. Social icons at 16 to 20 px with zero padding. Classic 2.5.8 failure. Fix: wrap in a 44 px flex box.
2. Stacked menu items with no vertical padding. A mobile nav where each item is a 20 px line of text, 4 items per 100 px. Mistaps guaranteed. Fix: 48 px row height plus 8 px gap.
3. Close buttons on modals and cookie banners. The 12 px “x” in the corner. It is also usually in the hardest to reach zone.
4. Quantity steppers and star ratings. Plus and minus buttons at 24 px placed 2 px apart. Either grow them or apply the 24 px spacing exception properly.
5. Pagination and breadcrumbs. Page numbers rendered as bare text links, often 18 px tall and 10 px wide.
6. Table row action icons. Edit, duplicate, delete lined up with no separation, which makes delete a coin flip.
7. Checkboxes and radios without a label wrapper. The native control may be 13 px. Wrapping the whole label makes the target as wide as the row and costs nothing.

How to audit touch target size on a real phone in 5 minutes

Emulators lie. Screen density, gestures and one handed grip only show up on hardware. Here is the fastest reliable process.

1. The red outline snippet

Open your site on desktop Chrome, then paste this in the console to flag anything under 24 px, and change 24 to 44 for a stricter pass:

document.querySelectorAll('a, button, input, select, textarea, summary, [role="button"], [role="link"], [tabindex]')
  .forEach(function (el) {
    var r = el.getBoundingClientRect();
    if (r.width < 24 || r.height < 24) {
      el.style.outline = '3px solid red';
      el.style.outlineOffset = '1px';
    }
  });

2. Remote debug on hardware

• Android: enable USB debugging, connect the phone, open chrome://inspect on desktop, run the same snippet against the live mobile page.
• iOS: enable Web Inspector in Safari settings, connect to a Mac, use Safari Develop menu.

3. The one hand test

1. Hold the phone in one hand, thumb only, standing up.
2. Complete your main conversion flow (search, product, add to cart, checkout) without your second hand.
3. Count every mistap and every zoom. More than zero mistaps on a primary flow means a size or spacing problem, not a user problem.
4. Repeat with a screen protector or gloves if your audience uses the site outdoors.

4. Automated backup

Run an axe based checker (axe DevTools, the axe browser extension or a CI integration) with the target size rule enabled. Automated tools catch the obvious 16 px icons but cannot judge overlapping hit areas or gesture conflicts, so keep step 3.

Quick pass or fail checklist

• Every interactive element is at least 24 x 24 CSS px or has 24 px of non intersecting spacing. Legal minimum.
• Every primary action is at least 44 to 48 CSS px in both directions.
• There is at least 8 px of gap between adjacent targets, 12 px in lists.
• No interactive element sits in the bottom 16 px or behind a system gesture bar.
• Labels are clickable, not just the input.
• Sizes are declared in rem so they respond to user text size settings.

Frequently asked questions

What is the minimum touch target size for mobile?

The absolute accessibility minimum is 24 x 24 CSS pixels (WCAG 2.5.8, Level AA). For real world mobile usability, use 44 x 44 px (Apple) or 48 x 48 dp (Material) as your working minimum.

What is the minimum target size required for WCAG 2.5.8 Level AA?

24 by 24 CSS pixels, unless one of the five exceptions applies: sufficient spacing, an equivalent control elsewhere, an inline text link, user agent default styling, or an essential presentation.

Is 32 px enough for a button?

It passes WCAG AA and it is workable for secondary desktop controls, but it fails Apple and Material guidance and sits below the roughly 38 px equivalent of the 1 cm research figure. Reserve 32 px for low frequency actions with generous spacing.

Do touch target rules apply to desktop and mouse users?

Yes. WCAG 2.5.8 covers all pointer inputs. Mouse users with motor impairments or tremors benefit from larger targets just as much as thumb users.

Should I use px or rem for touch targets?

Use rem. With a 16 px root, 24 px is 1.5rem, 44 px is 2.75rem and 48 px is 3rem. rem values grow when a user increases their browser font size, which keeps targets proportional instead of trapping text inside a fixed box.

Does the icon size need to match the target size?

No. A 20 px icon inside a 48 px hit area is perfectly fine and is what most design systems do. Only the activatable area is measured.

Takeaway

Treat 24 px as your compliance floor, 44 px as your standard and 48 px as your comfort target, add at least 8 px of spacing between neighbours, keep primary actions in the bottom third of the screen, and validate with a real thumb on real hardware. Those five rules eliminate the vast majority of mobile mistaps.

Want us to run a touch target and mobile usability audit on your site? The team at html-hunter.com tests on real devices and hands back a prioritised list of CSS fixes, not a 60 page PDF.