How Big Must Clickable Targets Be Under WCAG 2.2? The 24px Rule

## The short answer

Under WCAG 2.2 success criterion **2.5.8 Target Size (Minimum)**, every interactive target must be at least **24 by 24 CSS pixels**, or have enough spacing around it that a 24-pixel circle centred on the target does not overlap any neighbouring target. This is an AA-level requirement. There are five exceptions - the most useful being the spacing exception and the exception for links inline within a sentence. Note the higher AAA bar, 2.5.5 Enhanced Target Size, recommends 44 by 44 pixels, which is the figure many teams already know from mobile guidelines.

## Why a minimum target size exists

Small controls are easy to miss. People with motor impairments, tremors, or who use a device one-handed on a moving train all mis-tap when targets are tiny and crowded. A mis-tap is not just an annoyance - on a delete button or a payment confirmation it can be costly. The 24-pixel floor is deliberately modest so it is achievable without redesigning dense interfaces, while still ruling out genuinely hostile micro-targets.

## The five exceptions

A target smaller than 24 by 24 pixels can still pass if it falls under one of these:

1. **Spacing**: The target is small, but undisturbed space around it means a 24-pixel-diameter circle centred on it does not intersect any other target's circle. Adequate padding rescues small icons.

2. **Equivalent**: Another control on the same page does the same thing and does meet the 24-pixel size.

3. **Inline**: The target is a link or control inside a sentence or block of text, where its size is constrained by the line height.

4. **User-agent control**: The size is determined by the browser and not modified by the author - for example a native checkbox left at default size.

5. **Essential**: A particular presentation is legally required or essential to the information, such as a precise point on a map.

## How to measure it correctly

The rule is in **CSS pixels**, not device pixels. On a high-density phone screen, one CSS pixel maps to several physical pixels, so do not be misled by the physical sharpness of a control. Measure the target's hit area, which includes padding, not just the visible glyph. A 16-pixel icon with 4 pixels of padding on every side gives a 24-pixel target and passes.

When targets sit close together - think a row of social icons, a pagination strip, or a toolbar - the spacing exception is where teams most often fail. Two 20-pixel icons jammed side by side will have overlapping 24-pixel circles. The fix is to either grow them to 24 pixels or add a few pixels of gap.

## Common failure patterns

- **Icon-only buttons** sized to the glyph with no padding (close buttons, kebab menus).

- **Dense data tables** with tiny row-action icons packed together.

- **Pagination and breadcrumb** links with minimal hit areas.

- **Custom checkboxes and radios** styled smaller than the native control they replaced.

- **Carousel dots** and step indicators that are also clickable.

## Building it into your design system

The efficient way to comply is to make the floor a property of your components, not a thing each designer remembers. A few defaults go a long way:

- Set a minimum hit area on all icon buttons using padding, so the visible icon can stay small while the target meets 24 pixels.

- Define a minimum gap token between adjacent interactive elements.

- Add a lint or visual-regression check that flags interactive elements whose computed box is under 24 pixels and not exempt.

This component-level approach is how we keep enterprise-grade products consistent at neart.ai - the size rule is satisfied once, centrally, rather than negotiated per feature.

## Testing quickly

- Use browser dev tools to inspect the computed box of icon buttons and links; check width and height.

- Zoom your design to 100% and overlay a 24-pixel guide on crowded controls.

- On touch devices, deliberately tap quickly with a thumb across icon clusters and note mis-taps.

- Remember inline text links are exempt - do not waste effort enlarging links inside paragraphs.

## How 24px relates to 44px

If you have followed mobile platform guidance recommending roughly 44-pixel touch targets, you already exceed the WCAG 2.2 AA minimum and also satisfy the AAA criterion 2.5.5. The 24-pixel figure is the compliance floor; 44 pixels is the comfort target. Aim for the larger number on primary actions and the smaller floor only where space is genuinely constrained.

## Practical takeaway

Give every interactive control a hit area of at least 24 by 24 CSS pixels, or guarantee spacing so its 24-pixel circle never overlaps a neighbour. Bake the floor into your icon-button and spacing tokens, lean on the inline-link exception rather than fighting it, and reserve the 44-pixel comfort size for your most important actions.