---
title: "Touch target size"
category: accessibility
status: required
url: https://specification.website/spec/accessibility/touch-target-size/
updated: "2026-05-29"
sources:
  - title: "WCAG 2.5.8 — Target Size (Minimum) Level AA"
    url: "https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"
    publisher: "W3C"
  - title: "WCAG 2.5.5 — Target Size (Enhanced) Level AAA"
    url: "https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html"
    publisher: "W3C"
  - title: "Human Interface Guidelines — Layout"
    url: "https://developer.apple.com/design/human-interface-guidelines/layout"
    publisher: "Apple"
  - title: "Material Design — Accessibility: Layout and typography"
    url: "https://m2.material.io/design/usability/accessibility.html#layout-and-typography"
    publisher: "Google"
  - title: "WP Accessibility"
    url: "https://wpaccessibility.org/"
    publisher: "WP Accessibility"
source_repo: https://github.com/jdevalk/specification.website
licence: CC-BY-4.0
---

# Touch target size

> Interactive controls must be large enough to tap or click reliably. WCAG 2.2 sets a 24×24 CSS px minimum, with 44×44 CSS px as the enhanced target.

## What it is

A touch target is the area a user can tap, click, or otherwise activate to trigger a control — a button, a link, a checkbox, an icon. The target is not just the visible glyph; it is the full hit area the browser registers as activating the control.

WCAG 2.2 introduced a new Level AA success criterion, **2.5.8 Target Size (Minimum)**, that requires interactive targets to be at least **24×24 CSS pixels**. The older Level AAA criterion, **2.5.5 Target Size (Enhanced)**, asks for **44×44 CSS pixels**. Apple's Human Interface Guidelines recommend **44pt**, and Material Design recommends **48dp**.

## Why it matters

Small targets are easy to miss. That penalises:

- Users with motor impairments — Parkinson's, tremors, arthritis, limited fine-motor control.
- Users on small phones, or holding a phone one-handed on a commute.
- Older users, whose pointing precision declines with age.
- Anyone tapping while walking, in a moving vehicle, or wearing gloves.

Mis-taps are not just annoying. They can submit the wrong form, open the wrong link, or trigger destructive actions like "delete".

## How to implement

Set a minimum size on every interactive element:

```css
button,
a.button,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}
```

For icon-only buttons that must look small, expand the hit area with padding rather than shrinking the target:

```css
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 10px; /* hit area extends past the 24px icon */
  background: transparent;
  border: 0;
}
```

```html
<button class="icon-button" aria-label="Close dialog">
  <svg width="24" height="24" aria-hidden="true">…</svg>
</button>
```

If a target genuinely must be smaller than 24 CSS px — for example, a dense data table — WCAG 2.5.8 allows it as long as a **24 px diameter circle around the target's centre does not overlap any other target**. The spacing alone satisfies the criterion.

**Inline links inside running prose are exempt** from both criteria. A link in a sentence is sized by the line-height of the paragraph, and forcing 44 px around each one would wreck typography.

## Common mistakes

- Setting `font-size` but no `min-height` on a button, so its hit area collapses on short labels.
- Tiny close (×) icons in dialogs and toasts, 16 px or less, with no padding.
- Stacking small icon buttons (share, like, bookmark) directly next to each other with no spacing.
- Wrapping a small icon in a link without giving the `<a>` a block-level layout — the link only hits the glyph.
- Removing `padding` "to make the design tighter" and shipping a button you can only tap with a stylus.

## Verification

- Inspect the element in DevTools. Read the computed `width` and `height` (or the bounding box). Both must be at least 24 CSS px; aim for 44.
- On a real phone, try tapping every primary control with a thumb, one-handed. If you miss, it is too small.
- Run axe DevTools or Lighthouse — both flag WCAG 2.5.8 failures.
- For dense UIs, draw a 24 px circle around each target's centre and check no two circles overlap.