2.5.8 Target Size (Minimum)

1. What is the goal of this criterion?

Imagine trying to hit a tiny “X” button on your phone to close a pop-up – but your fingers are cold, you’re on a bus, or your fine motor control doesn’t allow pinpoint tapping. Frustration guaranteed.

People with motor disabilities, tremors or limited fine motor control face exactly this problem every day. But everyone else struggles with controls that are too small or too close together, too.

The goal of WCAG Success Criterion 2.5.8 is clear: click and touch targets must be large enough or spaced far enough apart to be hit reliably – without accidentally activating the wrong one.

2. What exactly does it require?

This criterion covers all targets operated with a pointer (mouse, finger, stylus). The basic rule is simple:

Minimum size: 24 by 24 CSS pixels

Every target is at least 24 by 24 CSS pixels – unless one of the following exceptions applies.

Exceptions:

• Spacing: smaller targets are fine if an imaginary circle with a 24-pixel diameter, centered on the target, doesn’t intersect any other target or the circle of another undersized target.
• Equivalent: the function is available on the same page through another control that meets the requirement.
• Inline: the target is in a sentence, or its size is constrained by the line height of the surrounding text.
• User agent control: the size is determined by the browser and not modified by you.
• Essential: a particular presentation is essential or legally required for the information being conveyed.

What spacing means in practice: two undersized targets next to each other need at least 24 pixels from center to center. If an undersized target sits next to a full-size one, its center must be at least 12 pixels from the edge of the larger target.

Notes from the normative text: for elements where the position within the element selects a value – such as sliders, color pickers with a gradient, or text areas where you place the cursor – the whole element counts as one target. For vertical text, “line height” is understood perpendicular to the text direction.

2.5.8 is new in WCAG 2.2. The stricter AAA version, Target Size (Enhanced), requires 44 by 44 pixels with no spacing rule.

3. Why does it matter for accessibility?

Imagine you have Parkinson’s and do your banking online. Tiny “Confirm” buttons become an ordeal, and accidentally hitting “Cancel” right next to them costs time and nerves.

Large enough or well-spaced controls improve accessibility because they:

• help people with motor disabilities such as tremors or spasticity click accurately
• make phones and tablets easier to use
• accommodate older people whose fine motor skills may decline
• give people with large fingers or using one hand more confidence
• help everyone in moving environments, like buses and trains

And finally: they reduce frustration and errors for everyone. How well mistakes can be caught is also covered by Pointer Cancellation.

4. How to meet the criterion

The good news: bigger buttons are usually easy to build. Here are some proven tips:

Ground rules for large enough targets:

• Plan for at least 24 by 24 CSS pixels for every click and touch target – more is better.
• Use min-height and min-width so buttons don’t get too small.
• padding counts toward the clickable area, margin doesn’t – but it does help with the spacing rule.
• Test on different devices – what looks big on desktop can be tiny on a phone.

.icon-button {
  min-width: 24px;
  min-height: 24px;
  padding: 4px; /* enlarges the clickable area */
}

.toolbar {
  display: flex;
  gap: 8px; /* space between targets */
}

Spacing as an alternative:

• If an element has to be smaller than 24 by 24 pixels, leave enough room around it.
• Think in circles: a 24-pixel diameter around the center of each small target, which must not overlap other targets or circles.
• Use margin or gap to create the space you need.

Testing:

• Browser developer tools show you the exact dimensions of every element.
• Define minimum sizes for buttons, icon buttons and list items in your design system.
• Test with real people – especially on touch devices.

Do:

• Make buttons too big rather than too small.
• Plan extra clickable area around icon buttons.
• Use enough line height in lists and menus.

Don’t:

• Make only the icon clickable while the visible button looks larger.
• Put important functions exclusively behind tiny icons.

5. Why this criterion matters for businesses

2.5.8 is new in WCAG 2.2. EN 301 549, the standard behind the European Accessibility Act and its German implementation, the BFSG, currently references WCAG 2.1 Level AA – so 2.5.8 is not explicitly required (as of October 2026). It makes a real difference on mobile, though, and is strongly recommended. This section is general information, not legal advice.

1. Fewer drop-offs

Larger, easy-to-hit buttons reduce drop-offs at key actions. People who get through your checkout without frustration are more likely to complete it.

2. Happier customers

Nobody likes tiny buttons – with or without a disability. Larger controls improve the experience for everyone and cut down on questions about how things work.

3. Ready for mobile

Many people browse mainly on their phones. Touch interfaces that are easy to use are a real competitive advantage there.

6. The success criterion in the W3C’s words

Success Criterion 2.5.8 Target Size (Minimum) (Level AA)

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

• Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
• Equivalent: The function can be achieved through a different control on the same page that meets this 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 of the target is determined by the user agent and is not modified by the author;
• Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

Note 1: Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

Note 2: For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.

In short: click and touch targets must be at least 24 by 24 CSS pixels or have enough space around them – with exceptions for equivalent alternatives, inline links, browser default controls and essential presentation.