Home WCAG

WCAG 2.5.8 Target Size (Minimum)

Pointer targets must be at least 24 by 24 CSS pixels, with documented exceptions for inline links, equivalent control alternatives, essential UIs, and user-agent default sizing. New in WCAG 2.2.

Normative spec
https://www.w3.org/TR/WCAG22/#target-size-minimum
Last verified
Byline
Editorial team

What 2.2 added at Level AA

Success Criterion 2.5.8 Target Size (Minimum) is one of nine new criteria added in WCAG 2.2 (October 2023). It sets a 24 × 24 CSS-pixel floor on the size of pointer targets — the area a user must hit to activate a control with a finger, mouse, or stylus.

A separate criterion, 2.5.5 Target Size (Enhanced), at Level AAA, raises the floor to 44 × 44 CSS pixels and has been in WCAG since 2.1 (2018). The 24-pixel floor is the new “everyone should be doing this” line; the 44-pixel one is the “ideal” line.

Why 24 pixels

The 24 CSS-pixel measurement is calibrated against fingertip size on typical mobile devices at 1.0 zoom, with about 1.6 mm of activation slack per side. Studies cited in the WCAG 2.2 Working Group dossier suggested error rates dropped from roughly 35% on 16-pixel targets to about 7% on 24-pixel targets for users with mild motor impairment.

Exceptions

The criterion lists five exceptions where a target smaller than 24 × 24 CSS px is not a failure:

  1. Spacing. A small target is acceptable if it is centred in a 24 × 24 area that contains no other interactive target. The surrounding empty space gives the same hit margin.
  2. Equivalent. The same function is available via another control on the same page that meets the 24-pixel floor.
  3. Inline. Targets in a sentence or block of text inherit the font’s line-height; inline links at 16-pixel text are common and exempted.
  4. User-agent control. The target’s size is set by the user agent and not modified by the author (e.g., the native scrollbar thumb).
  5. Essential. Changing the size would fundamentally change the information or functionality (a 50-pixel-wide map zoom button on a topographically dense map is the canonical example).

Inline-text links are the most common exempt case in practice; the exception covers about 60% of failures that automated tools would otherwise flag.

What a passing implementation looks like

A user with imprecise pointer control — Parkinson’s disease, spinal cord injury, intoxication, riding a moving bus — can activate every visible control on first attempt at default zoom. Visually, this typically translates to:

  • Buttons with a minimum height of 24 CSS pixels (40 is more comfortable; the IDS pattern uses 36).
  • Icon-only buttons (gear, dots, x) sized at 24 × 24 CSS px including padding.
  • Toolbar items not crammed below 24 pixels per item.
  • Hit-area expansion via padding, not via a full-bleed background.
  • Hit-area expansion via ::before or ::after pseudo-element with inset for cases where the visible target must remain visually small.

Authoring patterns

The simplest and most robust pattern is to set explicit size on every interactive control:

:where(button, [role="button"], a.btn) {
  min-block-size: 2.5rem;        /* 40px at default font-size */
  min-inline-size: 2.5rem;
  padding: 0.5rem 1rem;
}

For visually small icons that must remain visually small, expand the hit area with a pseudo-element:

.icon-button {
  position: relative;
  inline-size: 16px;
  block-size: 16px;
}
.icon-button::after {
  content: "";
  position: absolute;
  inset: -4px;            /* 16 + 4 + 4 = 24px */
}

The pseudo-element extension is invisible but increases the hit target area to the 24-pixel floor.

Common pitfalls

  • Tap-aware mobile spacing, e.g. a gap: 2px between adjacent 20-pixel buttons. The spacing exception requires 24-pixel centred, which means at least a 4-pixel gap on every side between two 20-pixel targets. Two 20-pixel targets at gap: 4px fails because the centre-to-centre distance is 24 pixels, but each target’s reach overlaps its neighbour’s no-interactive zone.
  • line-height: 1.0 on a button strips vertical padding and drops the height to the font size — usually 16 px.
  • Disabled controls still need to be at least 24 × 24 if the user might need to perceive them.
  • Icon close buttons in modal headers are the most common failure (16-pixel SVG inside an unsized <button>).

Cross-engine support

This criterion is platform-agnostic — any user agent can render controls at any size. There is no engine-specific behaviour. The exception is the user-agent control case (#4 above), where the default scrollbar widths differ noticeably across engines: Chromium and Gecko render about 12 px wide; WebKit (Safari) renders roughly 7 px when overlay scrollbars are active. None of those defaults meet the 24-pixel target floor, but all three are exempt under the user-agent rule.

Further reading