Target Size Minimum: The 24 Pixel Rule Your Audit Keeps Missing

WCAG 2.2, published as a W3C Recommendation on October 5, 2023, added nine new success criteria. One of them is 2.5.8, Target Size (Minimum), at Level AA. It says the target for pointer inputs must be at least 24 by 24 CSS pixels. A target is the clickable area, not the visible icon: a 16 pixel icon inside a 24 pixel button passes, and a 16 pixel button with a 16 pixel icon fails.

The number comes from the size of a fingertip and the accuracy of a pointer. Twenty-four pixels is small enough that most buttons already pass, and large enough that the ones that fail are genuinely hard to hit. It is a floor, not a recommendation, and the Level AAA version, 2.5.5, asks for 44 by 44.

The number, and what it measures

The criterion has exceptions, and they are narrower than most teams assume. Spacing: a target smaller than 24 pixels passes if there is enough space around it that an adjacent target is not within 24 pixels. Inline: targets inside a sentence of text are exempt. User agent: browser controls are exempt. Essential: a target whose size is essential to the information, like a note on a map, is exempt.

What is not an exception is 'it looks better small'. A 16 pixel checkbox next to another 16 pixel checkbox, with four pixels between them, fails twice: each target is too small and the spacing does not save them. Design preference is not in the exception list, and no audit has ever been passed by arguing that a small target looks cleaner.

The exceptions that actually apply

Carts fail 2.5.8 in the same places every time. Quantity steppers with tiny plus and minus buttons, packed close together. Radio buttons for shipping options with 14 pixel circles and no padding. Remove links set in small text with no hit area at all. Close buttons on mini carts that are 18 pixels wide and sit next to the checkout button.

The pattern is density. Carts are dense by design, and density squeezes targets. The fix is usually padding, not redesign: give the stepper buttons a 24 pixel hit area and keep the visible icon small, and the design looks identical while the target passes. The shopper never sees the padding. They only feel that the button works the first time they tap it.

Where carts fail it

Measure in the browser, not by eye. Open developer tools, hover the element, and read the box size. Anything under 24 by 24 CSS pixels is a candidate failure, and then check the exceptions: is there 24 pixels of space to the next target, is it inline text, is it essential.

Keep reading: Heading order pass rate: the metric that finds skipped levels, Form label coverage: counting inputs with no accessible name.

Scoring it without a ruler

Score it as a rate: failing targets per page, and pages with any failure. 'Six of fifty-two targets fail on the cart page' is a finding a team can act on. 'Some buttons feel small' is a feeling. The measurement takes an afternoon for a whole site, and the fix for most failures is a padding change that takes less time than the meeting about it.

Frequently asked questions

What size must pointer targets be under WCAG 2.2?

At least 24 by 24 CSS pixels, under criterion 2.5.8, Target Size (Minimum), at Level AA. The target is the clickable area, not the visible icon, so a small icon inside a 24 pixel button passes.

What is the difference between 2.5.8 and 2.5.5?

2.5.8 is Level AA and asks for 24 by 24 CSS pixels. 2.5.5 is Level AAA and asks for 44 by 44. AA is the level regulators and contracts almost always reference, so 24 pixels is the number most audits score.

Do small targets pass if there is space around them?

Yes, under the spacing exception. A target under 24 pixels passes if no other target is within 24 pixels of it. But two small targets four pixels apart fail twice: each is too small and the spacing does not save them.

Where do carts most often fail target size?

Quantity steppers with tiny plus and minus buttons, shipping radio buttons with 14 pixel circles and no padding, remove links with no hit area, and mini-cart close buttons next to the checkout button. The fix is usually padding, not redesign.