WCAG 2.5.8 Target Size (Minimum)

Success criterion 2.5.8 is new in WCAG 2.2. It makes buttons and links easier to hit for people with tremors or limited dexterity, people using a head pointer or a mouth stick, and everyone using a phone one-handed. Small targets packed together lead to wrong taps — the wrong size, the wrong colour, "Remove" instead of "+1". It is level AA and part of EN 301 549 (clause 9.2.5.8).

What the criterion requires

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:

• Spacing: undersized targets are positioned so that if a 24 CSS pixel diameter circle is centred on the bounding box of each, the circles do not intersect another target or the circle of another undersized target;
• Equivalent: the function can be achieved through a different control on the same page that meets the criterion;
• Inline: the target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
• User agent control: the size is determined by the browser and not modified by the author;
• Essential: a particular presentation of the target is essential or legally required for the information being conveyed.

Targets where a value is chosen by position inside them (such as a slider track) count as one target. The target is the clickable area, not just the visible icon. Level AAA (2.5.5) asks for 44 × 44 CSS pixels.

Typical failures on an online shop

• colour swatches of 16–20 px placed right next to each other;
• quantity "−" and "+" buttons of about 20 px beside the number field;
• a small "×" to remove an item from the mini-cart or to close a popup;
• social media and payment icons in the footer packed tightly;
• pagination links ("1 2 3 …") with little padding;
• carousel dots of a few pixels with no spacing.

How to check it

Automated: our checker measures the size and spacing of clickable targets and flags those below 24 × 24 CSS pixels that also fail the spacing test (target size rule). It cannot always judge the exceptions for equivalent controls, inline links or essential presentation, so review flagged targets by hand.

By hand: use the browser's developer tools to measure small controls — swatches, steppers, close buttons, icons. If one is smaller than 24 × 24, check the spacing by imagining a 24 px circle on its centre. Try the page on a real phone and tap the small controls with your thumb.

How to fix it

• Give icon buttons a minimum size: min-width: 24px; min-height: 24px (44 px is better for touch).
• Increase padding rather than the icon itself — the clickable area is what counts.
• Add a gap between adjacent small targets, such as swatches and pagination links.
• Make carousel dots larger or replace them with previous/next buttons.

Related criteria

• 2.5.2 Pointer Cancellation — accidental taps must be cancellable.
• 2.5.7 Dragging Movements — dragging needs a single-pointer alternative.
• WCAG 2.2 checklist — what else is new in WCAG 2.2.

Frequently asked questions

What is the minimum target size in WCAG 2.2?

At least 24 by 24 CSS pixels for targets of pointer input at level AA (2.5.8). Level AAA (2.5.5 Target Size (Enhanced)) asks for 44 by 44 CSS pixels.

Can a button be smaller than 24 px?

Yes, if it has enough spacing: a 24 px diameter circle centred on it must not intersect another target or the circle of another small target. Other exceptions cover an equivalent larger control on the page, links inside text, unmodified browser controls and essential or legally required presentation.

Do text links in a paragraph need to be 24 px?

No. Targets in a sentence, or whose size is constrained by the line-height of surrounding text, are exempt under the inline exception.

Is the target the visible icon or the clickable area?

The clickable area. A 16 px icon inside a 24 × 24 px button with padding meets the size requirement.