Target size (WCAG 2.5.8): the 24 by 24 pixel rule and how to meet it

What the criterion says

2.5.8 Target Size (Minimum) requires the size of the target for pointer inputs to be at least 24 by 24 CSS pixels. It helps people with tremors, limited dexterity or large fingers, and anyone on a phone.

Exceptions

• Spacing: a smaller target passes if a 24 pixel circle centered on it does not overlap another target or that target's circle.
• Equivalent: another control on the same page does the same thing and meets the size.
• Inline: links within a sentence or block of text.
• User agent control: controls the browser draws that you have not modified.
• Essential: the size is required for the information to be conveyed.

How to fix small targets

/* Icon buttons: make the clickable area at least 24 by 24 px */
.icon-button {
  min-width: 24px;
  min-height: 24px;
  padding: 8px;          /* larger tap area without changing the icon */
}

/* Closely packed footer links: space them out */
.footer-links a { display: inline-block; padding: 6px 4px; }

Beyond the minimum

24 pixels is a floor. The Enhanced criterion (2.5.5, Level AAA) asks for 44 by 44 pixels, and common design guidance goes larger: Apple's guidelines suggest 44 points and Google's Material Design suggests 48 density-independent pixels. For primary actions such as add to cart or checkout, aim for the larger sizes.

Where it shows up

• Close icons on popups and banners.
• Quantity steppers and carousel dots.
• Social icons and footer links.
• Checkboxes and radio buttons without a clickable label (form labels).

This criterion is in WCAG 2.2 but not in 2.1, so it is not part of the DOJ Title II standard today. It is still good practice and part of the current W3C Recommendation. See WCAG levels and versions.

How to measure a target

1. Open your browser's developer tools and inspect the control.
2. Look at the element's width and height in the box model, including padding but not margin.
3. Check that both are at least 24 CSS pixels, or that the spacing exception applies.
4. Repeat on a phone-sized viewport, because layouts often shrink targets there.

Why size matters

Small targets are hard to hit for people with tremor, limited dexterity, large fingers, a single-handed grip or a touch screen in a moving vehicle. They are also hard for anyone in a hurry. If two small controls sit close together, a person may press the wrong one, and on a checkout page that can mean the wrong quantity or a deleted item.

The measurements in plain terms

A sensible approach is to treat 24 pixels as the floor, and aim for 44 pixels for primary actions on touch screens.

The spacing exception, with an example

A target smaller than 24 pixels can pass if a circle of 24 pixels centered on it does not overlap another target or the circle of another small target. Imagine a row of small icon buttons each 16 pixels wide. If the centers are 24 pixels or more apart, each gets enough clear space and passes. If they are 18 pixels apart, they fail. In practice, adding padding to each icon is a simple fix that increases both size and spacing.

Targets that are commonly too small

• Close buttons on popups, banners and cookie notices.
• Quantity plus and minus buttons in the cart.
• Pagination numbers and carousel dots.
• Social media icons in a footer.
• Checkboxes and radio buttons without clickable labels.
• Text links in dense lists or tables.
• Remove-item and wishlist icons on product cards.

Fixes that do not change the design much

.icon-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The icon can stay small; the clickable area grows */

For text links inside a paragraph, the exception for inline targets applies, so a link within a sentence does not need padding. Links in lists, menus and footers do, because they stand alone.

How to check on your own site

1. Open your browser's developer tools and inspect a small control. The box model shows its size.
2. Use the device toolbar to view your site at phone size and tap the controls with your thumb.
3. Look at the spacing between neighboring controls.
4. Run a scanner that includes the target size rule, and check the result by hand.

A worked example: a mobile cart

A mobile cart lists items with a small trash icon at the right of each row and quantity buttons that are 20 pixels wide. The rows sit tightly together. A shopper with a larger thumb presses the trash icon next to the one they wanted and loses an item. The scan reports target size failures for the quantity buttons and the trash icons.

The designer enlarges the quantity buttons to 44 by 44 pixels, adds space between rows, and moves the remove action to a clearly labeled text link beneath each item. The cart looks calmer and is easier to use. Shoppers make fewer mistakes, and support staff receive fewer messages about accidentally removed items.

Exceptions in detail

Pointer gestures and dragging

Target size is one of several criteria for people who use pointing devices. WCAG 2.2 also asks for alternatives to dragging (2.5.7), and earlier versions ask for single-pointer alternatives to multi-finger or path-based gestures (2.5.1) and allow people to cancel an action before it completes (2.5.2). Think of these as a group: make it easy to hit, easy to do with one finger, and easy to undo.

Why 24 pixels, and why more is better

The 24 pixel minimum is a floor that most sites can meet without a major redesign. It is smaller than the 44 pixel guidance many designers know, because the working group wanted a requirement that could be applied across a wide range of existing content. Treat it as the least you can do. If you have the room, a larger target is easier for everyone, especially on a phone held in one hand.

Designing for thumbs

• Put primary actions within easy reach at the bottom of small screens where it makes sense.
• Leave space between destructive actions, such as Delete, and common ones, such as Edit.
• Make the whole card or row tappable when it leads to one place, not only a small link.
• Give toggle switches and checkboxes generous tap areas, including their labels.
• Test with a real thumb, on a real phone, in a hurry.

Checking third-party widgets

Cookie banners, chat bubbles, review stars, social share icons and pop-ups are often supplied by other companies, and many have small targets. Check them on a phone. If a widget fails, look for a size or spacing setting, ask the vendor, or consider replacing it. Note what you found in your records. This is a good example of why testing the whole page, not only your own code, matters.

A quick audit table

A worked example: a restaurant's online menu

A restaurant's online menu lists dishes with small "+" buttons, 18 pixels wide, to add items to an order. On a phone, diners often add the wrong dish, and some give up. The scan flags every button. The fix is to make each "+" button 44 by 44 pixels, with clear spacing between the rows, and to show the item name in the button label for screen readers.

The change also improves the look of the menu: rows breathe, and the buttons are easier to find. Orders from phones rise, and the staff stop receiving calls about accidental additions. Larger targets are not only an accessibility fix; they are a usability win.

Testing with real hands

Automated tools measure pixels. Real use depends on grip, motion and context. Ask a few people to complete a task on your phone site while walking, using one hand, or wearing gloves. Watch where they miss. If you can, include someone with a tremor or limited dexterity. Their feedback will show you problems no measurement does.

Links in navigation and footers

Lists of links in menus and footers are standalone targets, so they need the full size or enough space. A common pattern is a row of small footer links separated by thin vertical lines. Add vertical padding so each link has at least 24 pixels of height, and make sure the gap between links keeps targets from overlapping. Stack the links in a column on narrow screens.

Checklist

1. List small controls: close buttons, steppers, icons, links in lists.
2. Measure each, or use a scanner that checks target size.
3. Add padding or space until each passes.
4. Aim for 44 pixels on primary touch actions.
5. Retest on a phone and update your notes.

In short, with related checks

The WCAG 2.2 minimum is 24 by 24 CSS pixels for pointer targets, with exceptions for spacing, equivalent controls, inline links, browser-drawn controls and essential cases. A larger target of about 44 pixels is easier and recommended for primary touch actions. Check close buttons, quantity steppers, icon rows, pagination and footer links first, and look at third-party widgets too.

Related checks

Target size sits well with other checks on the same pages. Name your controls so that voice and screen reader users can find them (link and button names), make sure the keyboard focus is visible (keyboard focus) and test the layout at high zoom (zoom and reflow). Together, these make small controls easy to find, see and use.

Your questions about target size

• Does a small icon need a large visible size? No. The clickable area can be larger than the icon, using padding, as long as the target meets the size.
• Does the rule apply to desktop sites? Yes. It applies to pointer input in general, including mouse, touch and stylus.
• What if my theme controls the sizes? Override them in custom CSS, ask the theme developer, or choose a theme with larger controls.
• Is spacing enough on its own? For a small control, spacing can satisfy the criterion if the 24 pixel circle around it does not touch another target.
• Do disabled controls count? Controls that are inactive are exempt, though larger is still better.

A last practical tip: when you are unsure, make it bigger. Extra padding on a small control costs nothing, rarely harms the design and almost always helps. If a layout seems to need tiny controls to fit, that is usually a sign the layout can be simplified.

Review the sizes again whenever you change fonts, themes or components, since a small change to padding in one shared style can shrink targets across the whole site.

Common mistakes

• Using margin to "space out" controls and expecting it to enlarge them: only the target's own box counts, so use padding.
• Shrinking an icon button to match a small icon: keep the icon small but the clickable area larger.
• Placing two small targets so close together that neither passes the spacing exception.
• Forgetting controls added by apps and widgets, such as chat bubbles and cookie banner buttons.