Skip to main content
wcag22aa.org

Target Size (Minimum)

WCAG 2.2 Success Criterion 2.5.8, Level AA. Pointer targets must be at least 24 by 24 CSS pixels, unless an exception applies.

By Levi Whitted Last reviewed: Published:

What it requires

The normative text sets a baseline size and then lists the conditions under which a smaller target is still acceptable (Source: W3C, Understanding SC 2.5.8 ) :

A CSS pixel is the reference pixel used throughout CSS, so 24 CSS pixels is a consistent physical size regardless of device pixel density. The target is the full clickable or tappable area, which can be larger than the visible icon or text inside it.

Who it helps

Small, tightly packed targets cause mis-taps. A larger minimum target reduces accidental activation for:

  • People with limited fine motor control, hand tremor, spasticity, or quadriplegia.
  • People using specialized pointing devices with lower accuracy than a mouse.
  • Touchscreen and mobile users, one-handed operation, and people with larger fingers.
  • Anyone operating a device in a moving or unstable environment, such as on transit.

More than one in eight U.S. adults reports a mobility disability (Source: CDC, Disability Impacts All of Us (2022 data) ) , and pointer accuracy is exactly where this criterion helps.

How to meet it

The straightforward path is to make interactive targets at least 24 by 24 CSS pixels. The sufficient technique is C42: using min-height and min-width on the target container (Source: W3C Technique C42 ) . 

/* Make every button at least 24x24 CSS pixels */
.btn,
.icon-button {
  min-height: 24px;
  min-width: 24px;
}

A common case is an icon-only button whose glyph is smaller than 24 pixels. Keep the icon at its visual size but expand the hit area so the target itself reaches 24 by 24: 

/* A 16px icon, but a 24x24 hit target via flex centering */
.icon-button {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

If a target genuinely cannot reach 24 by 24, the most reliable fallback is the Spacing exception (below). Note that 24 pixels is a floor, not a recommendation; platform guidance such as Apple’s 44pt and Google Material’s 48dp targets is larger, and the AAA criterion asks for 44.

The five exceptions

A target smaller than 24 by 24 CSS pixels can still conform if any one of these applies:

  1. Spacing. Center an imaginary 24 CSS pixel diameter circle on each undersized target’s bounding box. The target passes if its circle does not intersect another target or another undersized target’s circle. Because the circles have a 12px radius, the centers must be at least 24px apart. Worked example from W3C: two 20 by 20 targets with 4px between them pass; the same targets with no space between them fail.
  2. Equivalent. The same function is available through a different control on the same page that does meet 24 by 24.
  3. Inline. The target sits in a sentence, or its size is constrained by the line-height of surrounding non-target text. Text reflow makes the position of inline links impossible to anticipate, so they are excepted.
  4. User Agent Control. The size is determined by the browser and not modified by the author (for example, a default checkbox you have not restyled).
  5. Essential. A particular size or placement is essential or legally required, such as pins on a map whose position carries meaning, or a dense interactive data visualization.

How to test it

W3C does not publish a formal step procedure for this criterion. A practical pass, derived from the normative text, is:

  1. For each control that takes pointer input, measure its rendered size in CSS pixels (browser dev tools box model).
  2. If it is at least 24 by 24, it passes.
  3. If it is smaller, check the exceptions in order: is it Inline? Is there an Equivalent 24px control on the page? Is the size user-agent controlled? Is it Essential?
  4. Otherwise apply the Spacing test: center a 24px circle on each undersized target and confirm no circle intersects another target or undersized circle.

Common questions

Does the 24px minimum apply to links inside a sentence?

No. The Inline exception excludes targets in a sentence or whose size is constrained by the line-height of surrounding non-target text, because reflow makes their position unpredictable.

Is Target Size (Minimum) the same as the 44px rule?

No. The 44 by 44 CSS pixel rule is Target Size (Enhanced), SC 2.5.5, which is Level AAA. The Level AA minimum is 24 by 24 CSS pixels and adds a spacing exception that the AAA version does not have.

Can I keep small buttons if I add spacing?

Yes. Under the Spacing exception, an undersized target passes if a 24px-diameter circle centered on it does not intersect another target or another undersized target’s circle. In practice, two 20px targets need at least 4px between them.