WCAG target size (2.5.8): 24 by 24 CSS pixels

WCAG target size: what 2.5.8 requires

Every pointer target, meaning anything you activate with a mouse, a finger or a stylus, needs a clickable area of at least 24 by 24 CSS pixels. The size counts the whole active area, including padding, not just the visible icon. A 16 pixel icon inside a button with 4 pixels of padding on each side is a 24 pixel target and passes.

If a target is smaller, it can still pass through spacing. That is the most misunderstood part of the rule, so it gets its own section below. The rule sits under the Operable principle and is one of the nine additions in WCAG 2.2.

The spacing exception, explained with circles

Picture a circle 24 pixels across, centered on the middle of a small target. Do the same for every other small target nearby. The small target passes if its circle does not touch any other target, and does not touch the circle of another small target.

A practical shortcut: two small targets side by side pass if their centers are at least 24 pixels apart and nothing else clickable sits within 12 pixels of either center. For example, two 16 by 16 pixel icons with 10 pixels of space between them have centers 26 pixels apart, so their circles stay clear of each other. The same icons with only 4 pixels of space fail.

Large targets do not get a circle; they only need to stay out of the circles drawn around small targets.

Other exceptions

• Inline: a link inside a sentence, or a target whose size is set by the line height of the text around it. You do not have to make every word link 24 pixels tall.
• Equivalent: the same function is available from another control on the same page that does meet the size.
• User agent control: the size comes from the browser and you have not changed it, such as an unstyled checkbox.
• Essential: a specific size is essential to the information, or required by law, such as pins on a map where position is the point.

AA versus AAA: 24 or 44 pixels

Many design systems aim for 44 pixels on touch screens anyway, because fingers are wide. Treat 24 pixels as the floor, not the goal. See WCAG for mobile apps for touch design in native apps.

Measure targets in the browser

1. Right click a small control and choose Inspect.
2. Hover the element in the developer tools. The page highlights its box and shows the width and height, including padding.
3. If either number is below 24, measure the distance to the nearest other targets, center to center.
4. Check the exceptions before marking a failure: is it a link inside a sentence, an untouched browser control, or is there a larger control that does the same thing?
5. Repeat on a narrow screen. Layouts often squeeze targets closer together on phones.

Some browser extension checkers can flag small targets, but they often miss the spacing exception or the equivalent control case, so confirm by hand. Our page on accessibility testing covers how to combine automated and manual checks.

Small targets we flag most often

CSS to grow a target without changing the look

.dots button { width: 10px; height: 10px; margin: 0 2px; }

.dots button { width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center; background: none; }
.dots button::before { content: ""; width: 10px; height: 10px;
  border-radius: 50%; background: #595959; }

The same idea works for any icon: keep the icon its current size and enlarge the button around it with padding or min-width and min-height.

Who benefits, and related rules

People with hand tremors, arthritis, cerebral palsy or limited dexterity struggle to hit tiny controls, and so do people using a phone one handed on a bus. A missed tap can trigger the wrong action, such as closing a form instead of saving it.

Nearby rules: label in name matters for people using speech input, who name a control instead of tapping it; 2.5.7 Dragging movements asks for a single pointer alternative to dragging; reflow keeps targets usable when zoomed. W3C's notes sit in Understanding Target Size (Minimum) and Understanding Target Size (Enhanced). Add the check to your WCAG checklist.