2.5.8 Target Size (Minimum)

WCAG 2.2 · 2.5.8 AA Operable

What it requires

The target for a pointer (mouse, finger, stylus) must be at least 24 by 24 CSS pixels, unless one of these exceptions applies:

  • Spacing — a smaller target is fine if a 24 px circle centred on it does not overlap any other target or the circle of another target.
  • Equivalent — another control on the same page does the same thing and meets the size.
  • Inline — the target is in a sentence or constrained by line height.
  • User-agent control — size is determined by the browser and not modified.
  • Essential — a particular presentation is legally required or essential (e.g. a precise map pin).

People with limited fine motor control, hand tremors, or who use touch screens are most affected. Tiny or tightly packed targets cause mis-taps and accidental activation for users with mobility or dexterity disabilities, older users, and anyone operating a device one-handed or on the move.

How to detect it

Checks for Target Size (Minimum)
Check What to look for
Manual measure Inspect interactive elements; confirm each is ≥ 24×24 CSS px, or has ≥ 24 px centre-to-centre spacing from neighbouring targets.
Dense controls Watch icon buttons, close (×) buttons, pagination, toolbar and table-row actions — the usual offenders.
Zoom / reflow At 200–400% zoom, verify targets do not shrink or crowd below the threshold.
Exceptions Confirm any undersized target genuinely meets the inline, equivalent, spacing, user-agent, or essential exception.
Automated tools Partly. Tools such as axe can flag some small targets, but spacing and the exceptions need human judgement — never rely on automation alone.

How to fix it

  1. Give interactive elements a minimum hit area of 24×24 CSS px (44×44 is a safer touch target and meets 2.5.5 too).
  2. Use padding or a min-height/min-width to grow the clickable area without enlarging the visible icon.
  3. Where targets must stay small, add spacing so a 24 px circle around each does not overlap its neighbours.
  4. Re-test at common zoom levels and on touch devices.
<button class="icon-btn" aria-label="Close">×</button>

<style>
  .icon-btn {
    min-width: 24px;
    min-height: 24px;
    padding: 8px;
  }
</style>

Copy-paste tests

Automated coverage

The axe-core rule target-size flags failures of this criterion. Run it via the axe DevTools browser extension or axe-core in CI. Automated tools only catch SOME failures, so manual review is still required.

Run this in the browser console

target-size-audit.js 
// Read-only: lists interactive targets smaller than 24x24 CSS px.
const targets = document.querySelectorAll(
  'a[href], button, input, select, [role="button"], [role="link"], [tabindex]'
);
const suspects = [];
targets.forEach((el) => {
  const r = el.getBoundingClientRect();
  if (r.width > 0 && r.height > 0 && (r.width < 24 || r.height < 24)) {
    suspects.push({ tag: el.tagName, w: Math.round(r.width), h: Math.round(r.height), el });
    el.style.outline = '2px solid red';
  }
});
console.table(suspects);
console.log(suspects.length + ' target(s) under 24x24 to review');

What to check manually: a script can't confirm whether an undersized target qualifies for the spacing, inline, essential, or user-agent exceptions, nor whether an equivalent larger control exists elsewhere on the page. Verify each flagged target against those exceptions by hand.