WCAG target size: the 24px minimum

WCAG 2.2 success criterion 2.5.8, Target Size (Minimum), requires anything you click or tap to be at least 24 by 24 CSS pixels. A smaller target still passes if it has enough space around it, or if one of four other exceptions applies. It is a Level AA criterion, new in WCAG 2.2.

Our checklist shows a pass and a fail for 2.5.8, one after the other.

This guide works through the spacing test, gives an example for every exception, and shows CSS that enlarges a target but keeps its look.

What 2.5.8 requires

2.5.8 is one of the six A and AA criteria WCAG 2.2 added. The criterion reads: “The size of the target for pointer inputs is at least 24 by 24 CSS pixels”, except when one of five exceptions applies:

1. Spacing: undersized targets are placed 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.
2. Equivalent: the function is available through a different control on the same page that meets the criterion.
3. Inline: the target is in a sentence, or its size is otherwise constrained by the line height of non-target text.
4. User agent control: the browser determines the size, and the author has not modified it.
5. Essential: a particular presentation of the target is essential, or legally required, for the information being conveyed.

A CSS pixel is the unit you write in CSS, not a device pixel, so 24px is the same size at any screen density. The target is the area that responds to the pointer, including padding, not just the visible icon. The W3C’s test for the size is whether a solid 24 by 24 CSS pixel square fits completely within the target, so rounded corners can make a 24px round button undersized.

The spacing test, worked through

The spacing exception lets a small target pass if it has room around it. To test it, draw a circle 24 CSS pixels across, centred on each undersized target’s bounding box, then check two things: the circle must not intersect any other target, and it must not overlap the circle of another undersized target. Circles that only meet edge to edge pass.

For two targets narrower than 24 pixels side by side, the rule of thumb is simple: their centres need to be at least 24 pixels apart. A small target next to a large one only needs its own circle to stay clear of the large target.

The other four exceptions

• Equivalent: a small “×” in the corner of a dialog can stay small if the dialog also has a “Close” button of at least 24 by 24 pixels.
• Inline: links in a paragraph do not have to be 24 pixels tall. The W3C’s guidance is that line height matters more for readability, and that text reflow makes link positions impossible to predict.
• User agent control: a native checkbox or radio button the browser draws at its default size passes; the W3C’s own examples are the calendar of a native date input and browser scrollbars. Once you restyle a control, the size is yours to meet.
• Essential: the presentation itself carries the information, such as pins on a map that have to sit at their exact position.

2.5.8 counts a slider as one target, its whole track. Dragging its thumb is a 2.5.7 question: a custom slider needs a way to set the value without dragging, such as a tap on the track; we show single-pointer alternatives for sliders, sortable lists and maps.

CSS fixes that keep the design

Most failures are icon buttons and small controls whose visible size is fine for the design but whose clickable area is too small. The fix is to enlarge the clickable area, not the icon.

An icon button that is only as large as its icon fails when another 16px target sits less than 8 pixels away, as in a tight toolbar:

.icon-button {  width: 16px;  height: 16px;  padding: 0;  border: 0;  background: none;}

The same icon in a <button> with a 24px minimum target (browsers size buttons with box-sizing: border-box, so the padding sits inside the 24 pixels):

.icon-button {  display: inline-grid;  place-items: center;  min-width: 24px;  min-height: 24px;  padding: 4px;  border: 0;  background: none;}​.icon-button svg {  width: 16px;  height: 16px;}

Carousel dots are a common case: the dot is a design element, the button around it is the target.

.carousel-dot {  width: 8px;  height: 8px;  margin: 0 4px;  padding: 0;  border: 0;  border-radius: 50%;  background: currentColor;}

.carousel-dot {  position: relative;  width: 24px;  height: 24px;  margin: 0;  border: 0;  background: none;}​.carousel-dot::before {  content: "";  position: absolute;  inset: 8px;  border-radius: 50%;  background: currentColor;}

The dots now sit 24 pixels apart, centre to centre, instead of 16, a small change to the design.

If the design cannot grow the targets, spacing is the other route: for 16px targets, a gap of at least 8 pixels puts their centres 24 pixels apart. At exactly 8 pixels the circles meet edge to edge, which still passes; a pixel or two more allows for rounding.

24 pixels or 44?

24 pixels is the requirement for a Level AA target. 44 pixels is the AAA criterion and a comfortable size for touch; the W3C suggests aiming for it for important controls. Meeting 44 pixels where you can, and 24 pixels everywhere, is a sound default.

How to test it

• axe-core: its target-size rule checks size and spacing, but in axe-core 4.14 it is still off by default. A tool runs it when it selects axe-core’s WCAG 2.2 checks (the wcag22aa tag) or turns the rule on.
• A person: the equivalent and essential exceptions, and whether a link is really inline, need judgment. So does any target that only appears on hover or in another state, and any round or irregular target, because automated checks measure the bounding box.
• The browser’s developer tools: inspect the element and read its box size, including padding.