Level AA

2.5.8 Target Size (Minimum), added in WCAG 2.2 at Level AA, requires pointer targets to fit a 24x24 CSS pixel square unless one of five exceptions applies (spacing, equivalent, inline, user-agent, essential).

2.5.8 Target Size (Minimum)

In Plain Language

2.5.8 Target Size (Minimum)[1] is Level AA and new in WCAG 2.2. It requires that the pointer target for every interactive element accommodate a 24 by 24 CSS pixel square, measured against the element's bounding box -- not the visible icon or label inside it.

Five exceptions narrow the rule. Spacing: a smaller target passes if a 24 CSS pixel diameter circle centered on it does not intersect another target or another undersized target's circle. Equivalent: a smaller target passes if the same function is reachable via another control on the page that meets 24x24. Inline: targets inside a sentence, or constrained by the line-height of surrounding text, are exempt. User-agent: targets whose size is set by the browser and not restyled by the author are exempt. Essential: a specific presentation that is essential or legally required is exempt.

Why It Matters

  • Users with tremor, dystonia, limited fine-motor control, or who interact via head pointer, eye tracker, or switch-scanning with a pointer emulator cannot land small targets reliably. A 24x24 floor reduces misses and accidental activations on adjacent controls.
  • Touch-screen input has no hover state and no sub-pixel precision -- the fingertip contact patch covers a region much larger than the displayed icon, so targets below 24 CSS pixels force the operating system to guess which element the user meant, which produces the wrong activation on dense toolbars and table rows.
  • Low-vision users who rely on OS-level zoom or browser zoom still need the target to meet the minimum at the zoom level they actually use, because 2.5.8 is measured in CSS pixels and therefore scales with the page rather than the device.
  • 2.5.8 is the AA-level baseline added in WCAG 2.2. The stricter 44x44 floor lives at 2.5.5 Target Size (Enhanced)[2], Level AAA -- same mechanism, tighter bar.

Examples

Do: Buttons that meet the 24x24 minimum

✔ Each button is at least 24x24 CSS pixels -- easy to tap on any device.

button {
  min-width: 24px;
  min-height: 24px;
  padding: 0.5rem 0.75rem;
}
/* Padding ensures the target's bounding box
   fits a 24x24 CSS pixel square. */
Don't: Tiny icon buttons with no padding

✘ These 16x16 buttons are too small to tap reliably and have only 2px of spacing between them.

<!-- BAD: 16x16 box, 2px gap -->
button {
  width: 16px;
  height: 16px;
  padding: 0;
}
/* Bounding box is 16x16 and the 24px circle
   overlaps the neighbor -- fails both the
   size rule and the spacing exception. */
Do: Small icon with enough spacing to pass

✔ Each button is 20px wide with 8px gap -- the spacing exception means the 24px zone around each target is clear of other targets.

.toolbar {
  display: flex;
  gap: 8px; /* 8px margin around each 20px button */
}
button {
  width: 20px;
  height: 20px;
}
/* Center-to-center distance is 28px, so the
   24px-diameter circle around each button
   does not intersect its neighbor. Passes
   via the spacing exception. */
Don't: Cramped form controls below minimum

✘ Checkboxes are 14x14 pixels with labels packed tightly -- easy to tap the wrong option.

How to Fix It

  1. Pad the bounding box, not the glyph. Set min-width: 24px and min-height: 24px on buttons, links styled as buttons, icon controls, and custom widgets. The 24px is measured against the element that receives the pointer event, so wrapping a 16px icon in a button with padding: 4px satisfies the rule even though the visible graphic is unchanged.
  2. Use the spacing exception for dense interfaces. Toolbars, table action icons, and rich-text editors often cannot afford 24px-wide visible targets. Keep the visible glyph small and add margin so that a 24 CSS pixel diameter circle centered on each target is clear of every other target. Center-to-center distance of at least 24px is the mechanical test.
  3. Do not restyle native controls below the user-agent default. The user-agent exception only applies while the author has not modified the size. Adding width: 14px to input[type=checkbox] forfeits the exception and puts the control back on the hook for 24x24.
  4. Leave inline links alone. A hyperlink in a paragraph is exempt under the inline exception -- you do not need to inflate every underlined word to 24px tall. The exception disappears as soon as the link is pulled out of prose into a list, nav, or card.
  5. Verify at production zoom levels. Because 2.5.8 is measured in CSS pixels, a target that passes at 100% also passes at 200%, but any layout that collapses toolbars or swaps to a compact density at breakpoints needs to be rechecked at each breakpoint. The AAA companion at 44x44 lives at 2.5.5 Target Size (Enhanced)[2] if you are aiming higher than AA.

References

  1. [1] W3C (2023). Understanding Success Criterion 2.5.8: Target Size (Minimum). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html ↩
  2. [2] W3C (2023). Understanding Success Criterion 2.5.5: Target Size (Enhanced). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html ↩ ↩