# Your Icons Are 24 Pixels. Your Spacing Still Fails 2.5.8.

Source: https://adareadyhq.com/blog/2026-11-13-target-spacing-2-5-8.html

November 13, 2026

*A 24-pixel icon button can still fail WCAG 2.5.8 when the buttons around it are packed so tightly that their 24-pixel circles overlap. Size is the floor; spacing is the exception that most storefronts get wrong.*

## The size rule is not the whole rule

Success criterion 2.5.8, Target Size Minimum, requires the target for pointer inputs to be at least 24 by 24 CSS pixels, and most teams stop there. They measure the button, it reads 24 pixels, and they move on. But the criterion has five exceptions, and the first one, spacing, is where the real failures live. An undersized target can pass if it has enough clear space around it, and a correctly sized target can fail if its neighbors crowd it. The rule is about the space a pointer needs, not just the size of the thing it hits.

The measurement is the bounding box, not the glyph. A 14-pixel icon inside a button with 8 pixels of padding on every side has a 30-pixel target, and it passes. The same icon with no padding has a 14-pixel target, and it fails unless the spacing exception saves it. Padding counts, and that is the cheapest fix in accessibility: add padding to the button, not pixels to the icon. The icon never changes size, the target grows, and the design stays exactly as it was.

## The circle test

The spacing exception works like this: draw a 24-pixel diameter circle centered on the undersized target. If that circle does not intersect another target, or the circle of another undersized target, the target passes. [Two 16-pixel icons with an 8-pixel gap](https://adareadyhq.com/blog/2026-11-11-mega-menu-keyboard-trap-escape-test.md) between them pass, because their centers are 24 pixels apart. The same icons with a 4-pixel gap fail, because their centers are 20 pixels apart and the circles overlap. The W3C uses exactly this example in the Understanding document, and it is the test to run on every icon row on the storefront.

The usual failures are the ones shoppers touch most: the wishlist heart, the cart line-item remove button, the quantity stepper plus and minus, the color and size swatch chips, the carousel dots. Each is a small icon with no padding and no gap to its neighbor, and each one fails the circle test while looking perfectly fine on a desktop screenshot. Measure them on a phone viewport, where the same layout packs tighter and the circles overlap more, because the criterion applies to every pointer input, touch included.

## The five exceptions, and the two that matter on a storefront

The five exceptions are spacing, equivalent, inline, user agent control, and essential. Spacing is the one to use deliberately: keep the visual chip small, but give it the clear space the circle test needs. Equivalent is the second useful one: a tiny control can pass if the same function is available through another control on the same page that meets the size, like a small copy icon next to a full-size button that does the same thing. Inline covers links inside sentences, where the line height sets the size. User agent control covers native controls the browser draws, like a select dropdown arrow. Essential covers cases where the size carries meaning, like pins on a map, and it almost never applies to a storefront.

Do not lean on the essential exception. It is narrow by design, and an auditor will ask what information the size conveys that a larger target would destroy. For a swatch chip or a stepper button, the answer is nothing. Use spacing instead: it is measurable, it is in the Understanding document with worked examples, and it survives an audit because the auditor can draw the same circles and get the same answer.

## The quick measurement

Open the product page on a phone viewport, open the developer tools, and measure the bounding boxes of the icon buttons in the header and on the product card. For each one under 24 pixels, draw the 24-pixel circle and check the neighbors. The fix for most failures is padding on the button or a gap between the buttons, both one-line CSS changes. Aim higher than the minimum where it costs nothing: [the AAA criterion, 2.5.5](https://adareadyhq.com/blog/2026-11-11-autocomplete-1-3-5-input-purpose-autofill.md), sets 44 by 44 pixels, and Apple and Material guidelines both recommend 44 to 48 pixels for touch targets. The AA floor keeps you compliant; the 44-pixel target keeps shoppers from tapping the wrong thing, which is the failure the criterion exists to prevent.

## Frequently asked questions

### Is 24 by 24 pixels the minimum for all buttons?

For pointer inputs at Level AA, yes, under success criterion 2.5.8, unless one of the five exceptions applies. The stricter AAA criterion, 2.5.5, sets 44 by 44 pixels. Inline text links are exempt because their size is set by line height.

### Can a target smaller than 24 pixels still pass?

Yes, under the spacing exception. If a 24-pixel diameter circle centered on the undersized target does not intersect another target or another undersized target circle, it passes. Two 16-pixel icons with an 8-pixel gap pass; with a 4-pixel gap they fail.

### Does the visible icon size or the button size count?

The button size, which is the full interactive bounding box. Padding counts toward the target. A 14-pixel icon with 8 pixels of padding on each side is a 30-pixel target and passes.

### Which storefront controls fail this most often?

Small icon-only controls with no padding: wishlist hearts, cart remove buttons, quantity steppers, swatch chips, and carousel dots. Measure them on a phone viewport, where the same layout packs tighter.