Target Size: Measuring the 24-Pixel Minimum on Your Own Storefront

Open your product page and look at the close button on the image modal, the quantity stepper, and the pagination links. Most of them are 16 pixels square, packed tight against their neighbors. A shopper with a tremor, a large finger, or a trackpad misses them, taps the wrong thing, and tries again. WCAG 2.5.8 exists because of exactly those buttons.

The rule and its five exceptions

Success Criterion 2.5.8, Target Size (Minimum), is Level AA in WCAG 2.2. It requires pointer targets to be at least 24 by 24 CSS pixels, with five exceptions: spacing, where a 24-pixel circle around the target contains no other target; equivalent, where the same function is available elsewhere at full size; inline, where the target sits inside a sentence of text; user agent, where the size is set by the browser and not the author; and essential, where the size is required by the information being conveyed. The spacing exception is the one teams skip reading, and it is the one that saves most small icons: a 16-pixel icon passes if nothing sits too close to it.

The criterion is new in 2.2, which is why so many sites fail it on first audit. It also has a Level AAA sibling, 2.5.5, at 44 by 44 pixels, which is the size Apple and Google recommend for touch targets in their own guidelines. AA asks for 24. AAA asks for 44. Most teams should aim for 44 on the controls that matter and treat 24 as the floor, not the target.

The user agent exception is the one that surprises teams, because it covers the browser chrome and the operating system controls your page does not draw. It does not cover a custom dropdown you built yourself, or a date picker you styled, because those are your targets even if a library rendered them. The essential exception is equally narrow: a target that has to be small because its size carries meaning, like a point on a map or a cell in a calendar, and even then the criterion expects the surrounding targets to stay reachable. If you are reaching for an exception, check whether the control is really yours to exempt.

Where storefronts fail it

Icon-only buttons are the first failure: close buttons on modals, the X that clears a search field, the heart that saves a product, the dots that switch carousel slides. These are routinely 16 pixels, and a dense toolbar can pack a dozen of them into a space where none has the required spacing. Pagination is the second: page numbers set tight together with no gap, where tapping 3 lands on 4. Table row actions are the third: edit and delete links in an order history table, set at text size with a few pixels between them.

Measure with the browser inspector, not by eye. Select the element, read its box, and check the spacing to the nearest target. A target that is 16 pixels with 8 pixels of clear space on every side passes through the spacing exception. A target that is 16 pixels with 2 pixels of gap fails. The measurement takes an afternoon for a whole storefront, because the failures cluster in a handful of components: the icon button, the pagination control, the stepper, and the table action. For the focus side of the same controls, see Focus Indicators: Making Keyboard Focus Visible.

Fix the component, not the page

Do not resize targets page by page. Fix the icon button component once, with padding that brings the hit area to 24 pixels even when the visible glyph is 16, and every modal, toolbar, and table in the theme inherits the fix. The same goes for pagination: set the gap once in the component, and every listing page passes. This is the same fix-once logic as contrast, and it is why a target-size audit that finds eighty failures is usually finding four components.

One more thing to check while you are in there: the spacing exception does not rescue a target that is small and crowded on mobile and fine on desktop. Measure at the widths your customers actually use, because a toolbar that breathes on a laptop collapses on a phone, and the criterion applies at every viewport. The deadline context for the standard is Title II Deadlines Moved to 2027 and 2028: What Changed.

Frequently asked questions

What size does WCAG 2.5.8 require?

Pointer targets must be at least 24 by 24 CSS pixels at Level AA, with five exceptions including spacing, equivalent targets, inline links, user-agent controls, and essential sizing.

Does a 16-pixel icon button always fail?

No. The spacing exception lets a smaller target pass when a 24-pixel circle around it contains no other target. A 16-pixel icon with enough clear space passes; the same icon packed tight against neighbors fails.

What is the difference between 2.5.8 and 2.5.5?

2.5.8 is Level AA at 24 by 24 pixels. 2.5.5 is Level AAA at 44 by 44 pixels, which matches the touch target size Apple and Google recommend. Aim for 44 on key controls and treat 24 as the floor.

How do I measure target size?

Use the browser inspector: select the element, read its box dimensions, and check the spacing to the nearest target. Measure at mobile widths too, because toolbars that breathe on desktop collapse on a phone.