WCAG 2.5.8 Target Size (Minimum)

Success Criterion 2.5.8 requires that clickable/tappable targets are at least 24 by 24 CSS pixels, unless one of several exceptions applies. It's a Level AA criterion under Guideline 2.5 (Input Modalities), new in WCAG 2.2.

Why target size matters

Small tap targets are hard to hit accurately for people with limited fine motor control, hand tremor, or larger fingers relative to a small touchscreen element — and mis-taps on adjacent, similarly tiny targets are a common frustration for everyone, not just people with disabilities, which is part of why this became a formal criterion.

The exceptions that make this practical

A target smaller than 24×24px still satisfies the criterion if any of these apply:

• Spacing — the target is at least 24px away (center to center, or with equivalent spacing) from any other target, even if the target itself is smaller
• Equivalent — the same function is available elsewhere on the page via a target that does meet the size minimum
• Inline — the target is within a sentence or block of text (like a text link inline in a paragraph), where enforcing a minimum size isn't practical
• Essential — the specific small size is essential to the function or is determined by the browser/user agent and not modifiable by the author (a native browser-rendered checkbox at its default OS size, for instance)

Common places this fails

• Small icon-only buttons (close buttons, social media icons) sized well under 24px with no adjacent spacing to compensate
• Dense tables or lists with small clickable icons packed tightly together
• Custom checkboxes/radio buttons styled smaller than their native equivalents, with no adjacent spacing to compensate

The practical fix

Increase the actual clickable/tappable area — this doesn't necessarily mean the visual icon itself needs to grow; padding around a small visual icon that extends its clickable hit area to 24×24px (or beyond) satisfies the criterion without changing the visual design at all:

.icon-button {
  /* Visual icon can stay small; padding extends the actual hit target */
  padding: 8px;
  min-width: 24px;
  min-height: 24px;
}