WCAG 2.5.8 Target Size: The 24px Minimum and Its Exceptions

A WCAG 2.2 scan flags a row of small icons, a pagination bar and a close button, and the question that follows is always the same: do we really have to make all of these 24 pixels? Often you don't. The number in 2.5.8 is short, but the exceptions do most of the work, and the spacing exception alone clears a lot of controls without touching their size.

This guide gives the exact rule, the spacing exception with real measurements, the patterns that fail most often, and fixes that leave the design alone. To see which controls on a page are too small right now, run the page through our target size checker. It measures every button and link in a browser against the 24 by 24 minimum.

What the criterion requires

Success Criterion 2.5.8 Target Size (Minimum) is Level AA and was added in WCAG 2.2, which W3C published as a Recommendation in October 2023 (W3C, WCAG 2.2). Its text, from W3C's Understanding 2.5.8:

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

• Spacing: the target is smaller, but a 24 CSS pixel circle centered on it does not touch another target or another small target's circle.
• 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."

Three details matter before you measure anything:

• Both dimensions count. W3C calls a target "undersized" when it is smaller than 24 by 24. A footer link 120 pixels wide and 18 pixels tall is undersized.
• The target is the clickable area, not the icon. A 16 pixel icon inside a 24 pixel button passes.
• CSS pixels, not device pixels. This is the size in your stylesheet and in the browser's dev tools, whatever the screen density.

24 is not 44

The 44 by 44 figure you see in design systems belongs to 2.5.5 Target Size (Enhanced), which is Level AAA: "The size of the target for pointer inputs is at least 44 by 44 CSS pixels" (W3C, Understanding 2.5.5). An AA audit tests 24. W3C still suggests aiming for the larger size "for important links/controls", and that is good advice for a primary button. It is not a failure of AA.

The spacing exception, measured

This is the exception that saves most redesigns, and it is easier to apply than it reads. W3C's test (technique C42) for each undersized target:

1. Draw a 24 CSS pixel diameter circle centered on the target's bounding box.
2. Check that the circle does not intersect any other target.
3. Check that the circle does not intersect any other undersized target's circle.

Both checks pass, and the small target passes. Turned into numbers for targets side by side, two rules of thumb fall out:

• Two small targets next to each other pass when their centers are at least 24 pixels apart. For equal targets, that is size plus gap is at least 24.
• A small target next to a full size one passes when the gap is at least 12 minus half the small target's size, because its circle (radius 12) must not reach the bigger target.

Two edge cases from the Understanding document. If targets overlap, the overlapping area is left out of the size. If a target is not a rectangle (rounded, clipped or an SVG shape), the circle goes on the center of its bounding box, which for an odd shape may sit outside the shape itself.

One honest caveat: passing on spacing does not make a control easy to use. W3C says so directly: "It is still possible to have very small, and difficult to activate, targets and meet the requirements of this Success Criterion." Spacing is a pass, not a recommendation.

The inline, user agent and essential exceptions

Inline

Links inside a sentence are exempt. W3C's reason is that text reflows with the viewport, so an author cannot know where links will land next to each other. The fix for crowded text links is readable line height, not bigger links. Note what this does not cover: a list of links stacked in a footer or sidebar is not a sentence, so treat each one as a target and measure it.

User agent control

If the browser draws the control and you have not resized it, it is exempt. W3C's examples are the day grid in <input type="date"> and the browser's scrollbars. The exception ends the moment your CSS changes the size: a native checkbox shrunk to 12 pixels, or a restyled thin scrollbar, is yours to measure.

Essential

This applies when the position or size carries the information. W3C's example is pins on a map: they must sit where the places are, even when that puts them close together. Forms that law requires to copy a paper layout are the other example. "Our designer prefers small icons" is not essential.

Equivalent

A small control passes if the same function is available through another control on the same page that meets the criterion. A tiny "edit" icon in a table row can pass if the row also opens a full size edit menu. Write down which control is the equivalent in the audit, because a reviewer will ask.

Five patterns that usually fail

1. Icon-only social rows. Sixteen pixel icons with a few pixels between them. Under 24 pixels between centers, so they fail on spacing too.
2. Table row actions. Edit, duplicate and delete icons packed at the end of each row. They fail unless a full size equivalent exists, and a slip here deletes the wrong record.
3. Close buttons. A 14 pixel "x" in a dialog corner. Often it passes on spacing because nothing else is near it, so check the circle before you file it. It is still worth enlarging.
4. Pagination. Single digit page numbers are usually narrower than 24 pixels, with little space between them. This is the case technique C42 was written for.
5. Footer link lists. Wide but short, stacked with no space between them. The height is the problem, and the inline exception does not apply.

How to fix without redesigning

Almost every fix makes the clickable area bigger and leaves the visible icon the same size.

Give the link the size, not the icon

/* Broken: the link is only as big as its 16px icon */
.social a {
  display: inline-block;
}

/* Fixed: the icon stays 16px, the target is 24px */
.social a {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
}
.social a svg {
  width: 16px;
  height: 16px;
}

Or use the spacing exception on purpose

When a toolbar really has to stay compact, set the gap from the table above instead of guessing. For 16 pixel icons that is an 8 pixel gap.

/* Broken: 16px buttons, 4px apart, 20px between centers */
.row-actions {
  display: flex;
  gap: 4px;
}

/* Fixed: 8px apart, 24px between centers */
.row-actions {
  display: flex;
  gap: 8px;
}

Pagination and footer lists: minimums on the container

This is W3C's own technique C42, minimum sizes on each item:

/* Fixed: every page number and footer link is at least 24 by 24 */
.pagination li,
.footer-links li {
  min-height: 24px;
  min-width: 24px;
}
.pagination a,
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

Put the size on the a as well as the li. A 24 pixel list item with an 18 pixel link inside it still has an 18 pixel target, because only the link responds to the click.

Checkboxes and radios you restyled

A native checkbox at the browser's default size is a user agent control and exempt. A custom one is not: once your CSS draws the box, the box is yours to size.

/* Broken: a custom checkbox drawn at 14px */
.check input {
  appearance: none;
  width: 14px;
  height: 14px;
}

/* Fixed: the same style at the minimum size */
.check input {
  appearance: none;
  width: 24px;
  height: 24px;
}

Wrap the input in its label while you are there, so the text is clickable too and the label association a form audit checks is in place. Our guide to accessible forms covers that part.

What to tell a client or a manager

Keep it to three sentences. WCAG 2.2 added a Level AA rule that buttons and links must be at least 24 pixels, or spaced so a slip does not hit the neighbor. It helps anyone tapping on a phone, people with tremors and people using a device on a moving bus, all groups W3C names. The fix is usually CSS on the click area and nobody will see a design change.

Be careful with the words you use: fixing target sizes clears one criterion. It does not make a site compliant, and neither does a clean automated scan. The WCAG 2.2 checklist lists every A and AA criterion, and our guide to the nine new WCAG 2.2 criteria puts this one next to the others 2.2 added.

Checklist

• Run the page through the target size checker, or a free accessibility audit for the rest of WCAG 2.2 AA at the same time.
• For each flagged control, check the exceptions in order: is it in a sentence, drawn by the browser, essential, or duplicated by a full size control?
• For the rest, measure the distance between centers. 24 pixels or more passes on spacing.
• Fix with min-width, min-height and padding on the clickable element, not on the icon.
• Recheck at a phone width, where layouts often draw controls smaller.
• Treat 44 by 44 as the goal for primary actions, and 24 as the line an AA audit draws.