2.5.8 Target Size (Minimum)

What does it mean?

Small buttons, icons and links placed close together are easy to miss or to hit by mistake. This criterion sets a minimum: each pointer target must be at least 24 × 24 CSS pixels. Targets that are smaller pass if they have enough spacing: a circle with a 24 px diameter centred on each small target must not overlap another target or the circle of another small target.

Other exceptions: the same function is available through another control on the page that meets the size; the target is a link inside a sentence or block of text; the size is set by the browser and not changed by the author (such as a default checkbox); or the specific size or position is essential or legally required. Larger targets (44 × 44 px) remain good practice and are the AAA level.

Who does it help?

• People with tremors or limited fine motor control
• People using a touch screen, especially with larger fingers or while moving
• People with low vision who cannot see small targets clearly
• Older users and anyone using a device in poor conditions

Common failures

• Small icon buttons (close, share, social media) of 16 × 16 px placed right next to each other
• Pagination links or carousel dots that are tiny and tightly packed
• Custom checkboxes or radio buttons made smaller than 24 px with no spacing
• Links in a footer or navigation list stacked so closely that their circles overlap

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.

Test question: Click targets at least 24×24 CSS px or with enough spacing.

A person decides every criterion. No criterion ever passes automatically.

How to fix it

.icon-btn { width: 16px; height: 16px; padding: 0; margin: 0; }

.icon-btn {
  min-width: 24px;   /* WCAG 2.2 AA minimum */
  min-height: 24px;
  display: inline-grid;
  place-items: center;
}
/* if an icon must stay smaller: keep enough spacing instead */
.dots { display: flex; gap: 14px; }
.dots button { width: 12px; height: 12px; } /* centres 26 px apart */

Icon buttons reach the 24 × 24 px minimum; the small dots pass the spacing exception because their centres are more than 24 px apart, so the 24 px circles do not overlap.

Practical tips

• Increase the clickable area with padding rather than enlarging the visible icon.
• Aim for 44 × 44 px on primary controls and mobile layouts; it is easier for everyone.

Official source

Understanding WCAG 2.2 at the W3C: 2.5.8 Target Size (Minimum)