WCAG 2.5.8 Target Size (Minimum): 24px Touch Targets

Last updated: 2026-03-22

Level AA Operable WCAG 2.5.8

What This Criterion Requires

WCAG 2.5.8 Target Size (Minimum) is a new criterion introduced in WCAG 2.2 at Level AA. It requires that the size of the target for pointer inputs is at least 24 by 24 CSS pixels, except in specific circumstances. The exceptions are: when there is sufficient spacing so that the target and its 24px circle do not intersect another target or its circle, when an equivalent control that meets the size requirement exists elsewhere on the same page, when the target is inline within a sentence or block of text, when the size of the target is determined by the user agent and not modified by the author, and when the specific presentation of the target is essential. This is a less strict version of criterion 2.5.5 (Level AAA) which requires 44 by 44 CSS pixels. The 24px minimum applies to buttons, links, form controls, icon buttons, and any other interactive element that users click or tap. When targets are smaller than 24px, they must have enough spacing so that the undersized target plus its surrounding space creates an effective 24px target zone.

Why It Matters

Small interactive targets are extremely difficult for users with motor impairments to activate accurately. People with hand tremors, limited dexterity, or who use assistive pointing devices need larger targets to avoid misclicks. Users on mobile devices using their fingers rather than a precise cursor also struggle with small targets, especially when targets are close together. Older adults who experience declining fine motor control frequently miss small buttons and links. Even users without disabilities experience frustration with tiny targets, particularly in mobile contexts. Small targets also increase error rates when interactive elements are close together, as users may accidentally tap the wrong element. A minimum target size of 24 by 24 CSS pixels ensures a reasonable activation area while still allowing flexible design. The spacing exception acknowledges that smaller targets are acceptable when adequate space separates them from neighboring targets, reducing the risk of accidental activation.

Common Failures and How to Fix Them

Icon buttons smaller than 24x24 pixels with no spacing

Small icon buttons for actions like edit, delete, and share are rendered at only 16x16 pixels with minimal spacing between them. Users with motor impairments frequently hit the wrong button.

Inaccessible 
<style>
.action-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  margin: 0 2px;
}
</style>
<div class="actions">
  <button class="action-btn" aria-label="Edit">
    <svg width="16" height="16"><use href="#edit-icon"/></svg>
  </button>
  <button class="action-btn" aria-label="Delete">
    <svg width="16" height="16"><use href="#delete-icon"/></svg>
  </button>
</div>
Accessible 
<style>
.action-btn {
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
  border: none;
  background: none;
  margin: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
<div class="actions">
  <button class="action-btn" aria-label="Edit">
    <svg width="16" height="16"><use href="#edit-icon"/></svg>
  </button>
  <button class="action-btn" aria-label="Delete">
    <svg width="16" height="16"><use href="#delete-icon"/></svg>
  </button>
</div>

Close button on notification is too small

A dismiss or close button on a notification banner or modal is rendered as a small X icon with a click target much smaller than 24 pixels, making it hard to tap especially on mobile devices.

Inaccessible 
<style>
.close-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  border: none;
  background: none;
  cursor: pointer;
}
</style>
<div class="notification">
  <p>Your settings have been saved.</p>
  <button class="close-btn" aria-label="Dismiss">x</button>
</div>
Accessible 
<style>
.close-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px;
}
</style>
<div class="notification">
  <p>Your settings have been saved.</p>
  <button class="close-btn" aria-label="Dismiss">x</button>
</div>

How to Test

  1. Use browser DevTools to inspect the computed size of interactive elements (buttons, links, form controls) and verify they are at least 24x24 CSS pixels.
  2. For targets smaller than 24x24, measure the spacing between the target and adjacent interactive elements to verify the 24px non-overlapping circle requirement.
  3. Test on a mobile device or touch simulator to confirm that buttons and links can be tapped accurately without accidentally activating adjacent controls.
  4. Check inline links within text, which are exempt from the size requirement, and ensure they are still reasonably tappable.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria