# Target size: the 24 × 24 pixel rule and its exceptions

> WCAG 2.2 wants every link and button at least 24 × 24 CSS px or spaced apart. The rule, its exceptions, how the checker measures it, and the CSS that fixes icon buttons, pagination and social rows.

Updated 2026-09-25 · Accessibility · HTML version: https://getreport.app/guides/target-size-24-pixels-and-the-exceptions

A 16 px icon in a 16 px box is a fine target for a mouse pointer and a poor one for a thumb. WCAG 2.2 turned that observation into a testable rule: 24 × 24 CSS pixels, or enough space around the target that a miss does not hit its neighbour. This guide explains the rule and the exceptions that keep it practical, shows how the accessibility checker measures it, and gives the CSS that fixes the usual offenders without changing how the page looks.

## Quick answer

- **WCAG 2.2, 2.5.8 Target Size (Minimum), level AA**: every pointer target is at least 24 × 24 CSS px, or a 24 px circle centred on it does not overlap any other target.
- **Exceptions**: links inside a sentence, targets whose size the browser sets (native controls), targets whose size is essential (a map pin), and targets with an equivalent elsewhere on the page.
- **Comfortable, not required**: 44 × 44 (WCAG level AAA and Apple's guidance) or 48 × 48 (Google's).
- **Fix**: add padding or `min-height`/`min-width` to the link or button, not a bigger icon; add `gap` between neighbours; wrap checkboxes and radios in their `<label>`.
- Run the [accessibility checker](https://getreport.app/tools/accessibility-checker); the target-size finding lists the elements with their selectors.

## Why target size matters

Small targets cause mis-taps. The visitor aims at "Remove from basket" and hits "Increase quantity", or taps the second pagination number and gets the third. On a desk with a mouse the pointer is one pixel; on a phone the contact patch of a thumb is about 10 mm, roughly 40 CSS px, and its centre lands a few pixels off where the person thinks it is. Every control smaller than that patch is a gamble, and people with tremor, arthritis or a screen protector lose more often.

The cost is measurable on shops: abandoned carts after a wrong tap on quantity buttons, support tickets about "the close button does not work", filters that select the neighbouring option. The fix rarely changes the design. A 16 px icon can stay 16 px; it is the clickable area around it that grows.

The [Understanding document for 2.5.8](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) chose 24 px as the smallest size that still works with a reasonably careful finger, so that dense interfaces (toolbars, calendars) could comply with spacing alone. The older criterion 2.5.5 Target Size (Enhanced) asks for 44 × 44 at level AAA, which is where Apple's Human Interface Guidelines (44 × 44 pt) and Google's Material guidance (48 × 48 dp) have been for years. Aim for 44 on anything a phone user taps often; 24 is the floor.

## How getReport checks it

> **Free tool:** [Accessibility checker (WCAG 2.2)](https://getreport.app/tools/accessibility-checker): axe-core violations by impact, colour contrast, landmarks, form labels, link names, tap targets and zoom — measured on the rendered page, with the selectors to fix.

The checker renders the page in Chromium (a 412 px wide phone profile for a mobile report, 1350 px for desktop), runs axe-core with the WCAG 2.2 AA rules, and collects the `target-size` rule's results into one finding:

![The target size finding opened: the title gives the number of tap targets smaller than 24 × 24 px, the why text, the two fix lines and a list of CSS selectors under the technical detail](https://getreport.app/guides/img/target-size-24-pixels-and-the-exceptions/target-size.webp "Each selector points at one element; the same class on all of them means one CSS rule fixes the lot.")

> **Check: Tap targets are at least 24×24 px.** Small links and buttons packed together cause mis-taps on phones, which means abandoned carts and wrong menu choices. WCAG 2.2 asks for at least 24×24 px or equivalent spacing.
>
> 1. Give links and buttons a minimum height of 24 px (44 px is comfortable) with padding rather than a bigger font.
> 2. Add space between neighbouring targets such as icon rows, pagination links and footer menus.

The rule measures the rendered bounding box of each focusable control (links, buttons, inputs, elements with a widget role) and applies the WCAG spacing test: an element under 24 × 24 px passes when no other target sits within a 24 px circle around its centre. What you get is the count and the first ten selectors; the technical detail gives the rule id and the total number of elements. Because the measurement is of the rendered page, padding counts and a bigger icon image alone does not.

> **Check: Every link and button has an accessible name.** Icon-only links and buttons are read out as "link" or "button" with nothing else, so screen reader users cannot tell the cart from the search. Search engines also use link text to understand the target page.
>
> 1. Add visible text, or aria-label="…" on the link or button, that says where it goes or what it does.
> 2. For icon buttons, put the text inside the button and hide it visually with a screen-reader-only class.

Small targets and unnamed targets are usually the same elements: an `<a>` around a 16 px SVG with no text. Fixing the size with padding and adding the name (visually hidden text or `aria-label`) is one edit per component, so both findings are worth reading together. The [link names learn page](https://getreport.app/learn/link-names) has the naming patterns.

> **Check: No moderate accessibility violations.** Moderate issues slow visitors down rather than stopping them, for example headings out of order or regions without a name. Fixing them makes the page easier for everyone to scan.
>
> 1. Open the technical detail to see each rule and the elements affected.
> 2. Fix them in the shared layout or theme so every page benefits at once.

The moderate and minor groups hold axe's best-practice rules, which is where layout-adjacent findings such as regions without a name land. They are not target-size findings, but a page that fails target size in a header or footer component typically has these in the same component; open the technical detail and fix the component once.

## Step by step

### 1. Read the selectors, group by component

The finding lists selectors such as `.social-links a`, `.pagination .page-numbers`, `.woocommerce-cart-form .qty`. Sort them by the component they belong to. Five social icons are one fix; twelve pagination links are one fix. The count looks alarming; the number of CSS rules to write is usually three or four.

### 2. Grow the clickable area, not the icon

The mistake to avoid is enlarging the icon or font to reach 24 px. Padding on the link or button does the same job invisibly:

```css
/* Icon buttons and icon links: 16px icon, 44px target */
.icon-button,
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.icon-button svg,
.social-links svg {
  width: 16px;
  height: 16px;
}
```

For text links in navigation and footers, vertical padding on the `<a>` (not on the `<li>`) is what makes the target tall:

```css
/* Footer and menu links: the link itself gets the padding */
.footer-menu a,
.main-menu a {
  display: inline-block;
  padding: 10px 12px;   /* 10 + line-height 24 + 10 = 44px tall */
}
```

`display: inline-block` matters: vertical padding on a plain inline element paints but takes no space, so the padded links overlap the lines above and below instead of getting their own room.

### 3. Space neighbours apart

Where targets must stay small (a row of colour swatches, a calendar grid), the spacing exception applies: keep at least 24 px between the centres. With flex or grid, `gap` does it without touching the targets:

```css
/* Small swatches, spaced so a 24px circle around each does not overlap the next */
.swatches {
  display: flex;
  gap: 12px;   /* 16px swatch + 12px gap = 28px between centres */
}
.swatches button { width: 16px; height: 16px; }
```

Pagination is the classic case: numbers 8 px apart, each 14 px wide. Either give each link a 32 × 32 box (`min-width`, `min-height`, centred text) or add a `gap` of 16 px. Do both on shop category pages, which are tapped constantly.

### 4. Make checkboxes and radios part of their label

A native checkbox is 13 × 13 px and exempt (its size comes from the browser), but the visitor still has to hit it. Wrapping the control in its `<label>` makes the whole text a target, which also satisfies the form-labels finding:

```html
<label class="check">
  <input type="checkbox" name="newsletter">
  Send me the newsletter
</label>
```

```css
.check { display: flex; align-items: center; gap: 8px; min-height: 24px; }
```

### 5. Close buttons, table row actions and "×"

Three places where targets are small on purpose and should not be:

- **Close buttons** on modals, banners and notifications: a 14 px "×" in the corner. Give it a 44 × 44 box and keep the glyph small.
- **Row actions in tables** (edit, delete, download icons): 16 px icons with 4 px between them. Use the icon-button rule from step 2; if the row is too short, `min-height: 44px` on the cell.
- **Inline quantity steppers** (−, number, +): three targets in a 90 px strip. Each needs 24 px of width and height with no overlap, which means the whole strip is at least 72 px wide; 44 px per button is better.

### 6. Enlarge for touch only, if the desktop design cannot change

When a designer will not accept 44 px targets on desktop, the `pointer` media query enlarges them only on devices whose primary input is a finger:

```css
/* Coarse pointer = touch screen; fine = mouse or trackpad */
@media (pointer: coarse) {
  .icon-button, .pagination a, .table-actions a {
    min-width: 44px;
    min-height: 44px;
  }
}
```

The 24 px minimum still applies everywhere (WCAG is not touch-specific), so keep the base rule at 24 and let the media query add the comfort.

## The exceptions, in practice

WCAG lists four situations where a target under 24 px still passes 2.5.8:

| Exception | Meaning | Example |
| --- | --- | --- |
| Spacing | The 24 px circle around the target overlaps no other target | Toolbar icons 16 px wide with 8 px gaps between them |
| Inline | The target is in a sentence or its size is set by the surrounding text | A link inside a paragraph, footnote markers |
| User agent control | The browser draws the control at its own size and you did not change it | Native checkboxes, radio buttons, `<select>` arrows |
| Essential | The size or position carries information | Pins on a map, points on a chart |

There is also an "equivalent" exception: a tiny target is fine when the same action is available on the same page through a target that meets the size. Two things do not qualify: a design preference, and "we use a bigger icon on hover".

Inline links in body text are the exception people ask about most. They pass because their height is set by the line height of the paragraph and a bigger target would break reading. A list of links on separate lines is not inline: each one is a block-level target and needs the 24 px height, which a normal `line-height` of 1.5 at 16 px already gives.

## Platform notes

### WordPress

- **Menus**: the theme controls link padding. Block themes expose it under Styles → Blocks → Navigation → Dimensions; classic themes need the `.main-menu a` rule from step 2 in Appearance → Customize → Additional CSS. Mobile menus usually already have generous padding; the desktop menu is where 18 px tall links hide.
- **Social icon blocks and widgets**: the core Social Icons block has a size setting (Normal is 24 px, Large 36 px, Huge 48 px); pick Large or Huge, or add padding to `.wp-block-social-link a`.
- **Elementor icon lists and social icons**: the widget's Icon Size setting scales the glyph. Use the Spacing or Padding controls under the Advanced tab of the widget so the link box grows instead.
- **WooCommerce quantity buttons**: the default quantity field is a plain `<input type="number">` (native spinner, exempt). Themes that replace it with − and + buttons often make them 20 px; target `.quantity .plus, .quantity .minus { min-width: 44px; min-height: 44px; }` in the child theme.
- **Pagination**: WooCommerce and most themes use `.page-numbers`; a `min-width: 40px; min-height: 40px; display: inline-flex` rule covers it.

### Shopify

Theme editor → Theme settings rarely exposes padding on icon links; add CSS in the theme's custom CSS field (Theme settings → Custom CSS in Online Store 2.0 themes) with the same rules as above. Apps that inject review stars, wishlist hearts and size charts commonly add 16 px targets; check them in the finding's selector list.

### Static sites and custom builds

Component libraries usually offer an icon button with a `size` prop; pick the size that renders 40–44 px and leave the icon at 16–20. If the library's default is 32 px, that passes the minimum and is tolerable on desktop.

## Verify

- Re-run the accessibility checker: the finding reads "Tap targets are at least 24×24 px" and the link-names finding passes too.
- In the browser's device toolbar (Chrome DevTools, Cmd/Ctrl+Shift+M), hover each fixed control and read its box size in the tooltip: 24 or more on both sides, ideally 44.
- Tap the pagination, the icon row and the quantity buttons on a real phone with your thumb, quickly. Mis-taps should be gone.

## Common mistakes

- **Making the icon bigger instead of the box.** The design changes and the target barely grows. Add `min-width`/`min-height` or padding to the `<a>` or `<button>`.
- **Padding on the `<li>` instead of the `<a>`.** The list item is not the target; the link inside it still measures 18 px tall.
- **Targets that overlap each other.** Two 44 px links with negative margin so they look tight. Use `gap` and let them touch instead.
- **Enlarging only on hover.** The size when the pointer arrives is what counts; hover is too late and does not exist on touch.
- **Ignoring the finding because "it is just the footer".** Footer link rows are where cookie settings, returns and contact live; those are tapped on phones more than most pages.
- **Removing the finding by removing the control.** A "×" that disappears and a banner that can no longer be dismissed is a bigger accessibility problem than a small target.