Touch target size (WCAG 2.5.8): the 24 by 24 pixel rule

Small controls that sit close together are easy to miss and easy to hit by accident. W3C's Understanding page for 2.5.8 says the rule addresses hand tremors, spasticity and quadriplegia, and that specialized input devices typically provide less accuracy than a mouse or trackpad. It also helps people on a touchscreen, people using one hand, people using a device where it shakes, such as on public transportation, and people with large fingers. The criterion is new in WCAG 2.2 (see what is new in WCAG 2.2).

Three terms carry the rule. A target is a region of the display that accepts a pointer action, such as the interactive area of a control (WCAG 2.2 glossary). A pointer input is a mouse, a pen or a touch contact, so the rule is not about keyboards. A CSS pixel is the unit CSS uses for lengths. It does not depend on display density, so it is not a hardware pixel (glossary entry).

What the rule requires

The target for pointer inputs must be at least 24 by 24 CSS pixels unless one of five exceptions applies. Check the size first, then the exceptions. For a row of small icon controls, spacing is usually the exception that fits. Target size is one of the Level AA items in our guide on how to make a website accessible.

A control that selects a value by position, such as a slider or a gradient color picker, counts as one target. The exact wording is in the criterion itself.

How size is measured

• The square test. A target is at least 24 by 24 if a solid 24 pixel square, aligned to the page's horizontal and vertical axes, fits entirely inside it. A skewed target can pass. A 24 pixel round button cannot, because a circle that wide has no room for the square, so it has to pass on spacing.
• Zoom does not count. W3C says the requirement is independent of the zoom factor, because CSS pixel sizes do not change when users zoom in.
• Overlap is not counted twice. Where two targets overlap, the overlapping area is left out of the size unless both do the same thing or open the same page.
• Covered content is excused, new content is not. A target is not measured while content opened by an interaction or script covers it, such as a modal dialog or a cookie banner. The targets inside that new content are measured.

The spacing exception, with numbers

Spacing is the exception that fits a row of small icon controls. For each undersized target, find the center of its bounding box (the smallest rectangle that encloses it), draw an imaginary circle 24 CSS pixels across on that center, and check that the circle does not intersect another target or another undersized target's circle. W3C's examples:

• Six icon buttons at 24 by 24 pass with no gaps. The same six at 20 by 20 pass with 4 pixels between them and fail with none.
• Buttons 16 pixels tall pass in a single row with nothing above or below, and fail in two rows 1 pixel apart.
• Menu items 24 pixels high pass. Items 18 pixels high fail.
• A 16 by 16 magnifier button on, or touching, a large image link fails. It passes at 24 by 24, or at 16 by 16 with a 4 pixel gap.

In GotAlt's arithmetic, which follows from the circle and matches every example, two undersized square targets in a row need a gap of at least 24 minus their side length: 4 pixels for 20 pixel buttons, 8 for 16 pixel buttons. Beside a full-size target they need half as much, because only the small target's circle matters (4 pixels for 16 pixels, W3C's figure). This holds for squares in a straight line. For other shapes, use W3C's bounding-box method. A gap exactly at the limit leaves no margin, so we would design for a little more.

Controls to measure first

Start with the controls that are small by design.

• Icon-only buttons in toolbars and table rows (edit, copy, delete). See buttons versus links.
• Close buttons on banners, toasts and dialogs. See accessible modals.
• Pagination links, carousel dots and arrows. See accessible carousels.
• Quantity steppers and custom checkboxes and radio buttons. See accessible forms.
• Tightly stacked menu items (see accessible menus), footer link lists, tag chips and social icon rows.
• Custom scrollbars. If an author changes a scrollbar's size, W3C says the content beside it needs room for a 24 pixel circle placed over the scrollbar.

Fixing small targets in CSS

The most direct fix is to enlarge the clickable element itself. Padding is part of a link or button's clickable area. Margin is not, but it is the clear space the spacing test looks at. A 16 pixel icon with 4 pixels of padding on every side makes a 24 pixel target:

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
}

The box-sizing line makes the minimums include the padding. Without it the box grows by the padding, which still passes. When the control itself must stay small, W3C's technique C42 centers it in a container with 24 pixel min-width and min-height. Its pagination example adds 3 pixel margins to the list items, so each link's circle stays inside its own container and the circles do not intersect.

Other options, in the order we would try them:

• Add space. A gap on a flex or grid container separates a row of icons by the gap worked out above.
• Extend the hit area. A transparent ::after box can enlarge the clickable area beyond the visible icon. Only the part that does not overlap a neighbor's target counts, so give each control its own territory.
• Provide an equivalent. A full-size button on the same page with the same job meets the Equivalent exception for the small icon.
• Treat @media (pointer: coarse) as a bonus. MDN describes coarse as a pointing device of limited accuracy, such as a finger on a touchscreen. Going larger there helps, but in GotAlt's reading it does not meet 2.5.8 alone, because the criterion covers every pointer input and W3C notes it helps mouse and pen users with a tremor too.
• Leave native controls alone. In GotAlt's reading, a checkbox or radio button that the browser draws at its default size is a user agent control, so it is excepted until you restyle it. A label tied to its control with for and id also accepts the click, so keep it clickable and give it room.

24 pixels or 44 pixels?

W3C's 2.5.8 page recommends meeting the minimum size whatever the spacing, and aiming for 2.5.5 on important controls. The 2.5.5 page suggests larger targets for controls that are used often, hard to undo, hard to reach or near a screen edge, or part of a sequential task. Level AAA is not part of AA conformance, and W3C advises against requiring AAA as a general policy for entire sites (WCAG 2.2, conformance level; see also WCAG conformance levels). In GotAlt's reading, 44 pixels is a good goal for primary actions such as a checkout button, and 24 is the floor elsewhere.

Is touch target size a legal requirement?

That depends on which WCAG version a law points to, and this page is general information, not legal advice. Criterion 2.5.8 did not exist before WCAG 2.2, so a law that names an earlier version does not include it by that reference.

• United States. The ADA Title II web rule names WCAG 2.1 Level AA for state and local government web content and mobile apps (ADA.gov). For businesses open to the public (Title III), DOJ guidance says the ADA covers what they offer on the web and calls WCAG helpful guidance, without naming a version (DOJ web guidance). See ADA website compliance and US accessibility laws.
• European Union. EN 301 549 v4.1.1, published in September 2026, adopts WCAG 2.2, but AccessibleEU says v3.2.1, based on WCAG 2.1 Level AA, remains the reference until the European Commission cites v4.1.1 in the Official Journal (AccessibleEU news item). See EN 301 549.
• United Kingdom. GOV.UK's guidance for public sector bodies says a website or app meets the legal requirements if it meets WCAG 2.2 AA and publishes an accessibility statement (GOV.UK). See UK accessibility laws.

Building to WCAG 2.2 AA also covers the earlier versions, because W3C says content that conforms to WCAG 2.2 also conforms to WCAG 2.0 and 2.1. The one caveat is 4.1.1 Parsing, which 2.2 removed; authors held to 2.0 or 2.1 may still need to test it (see which WCAG version to follow).

How to test target size

1. List the candidates. Go through each template and note every icon, stepper, close button, pagination link and chip, plus the targets in menus, banners and dialogs that open later.
2. Measure the clickable element. Use your browser's inspect tool to read the rendered width and height, in CSS pixels, of the link, button or label, not just the icon inside it. Under 24 in either direction is undersized.
3. Walk through the exceptions. Is it in a sentence? Does the browser set its size? Is there an equivalent control on the page? Is the size essential? If none applies, do the spacing test.
4. Run the spacing test. W3C's test procedure in C42 is to draw a 24 pixel circle on the target's bounding box and check that it does not intersect another target or another undersized target's circle.
5. Repeat at each layout you ship. Phone, tablet and desktop widths can change padding and gaps. Zooming changes nothing here, so zoom is not a test.
6. Try a real thumb. A phone in one hand shows what a measurement does not. Our guide to testing website accessibility covers the keyboard and zoom checks to run beside it, and the WCAG 2.2 checklist has it as a manual check under Mobile and touch.

Check it yourself

• Accessibility bookmarklet. It runs on the page as your browser renders it, including staging sites and pages behind a login. It does not measure target size, but it helps you find controls to measure: it lists buttons and links with no accessible name, which icon-only controls can lack, and its Show on page button draws a box around each one.
• WCAG audit checklist. It tracks all 55 Level A and AA criteria, 2.5.8 among them, so you can record your measurements and export them as CSV.
• Scan my site for free. The free scan reads the HTML a server sends, so it cannot measure sizes. Use it for the checks it can make, and keep the measuring for a person.

The checks GotAlt runs in a browser on monitored pages include one for touch targets that are too small (see the methodology page). It flags a link or button under 24 by 24 CSS pixels with no clear space around it. A person still has to judge the exceptions, which is why our coverage table says sizes and spacing can be measured but the exceptions need judgment.

Keep it checked

A fixed layout can break again with the next template change or new component. GotAlt checks the pages you monitor every week. It compares each image's alt text with the image itself (up to six images per page), runs its rule checks, opens monitored pages in a browser for contrast and other render-dependent checks (see what we check), and reports what changed. Plans are from $69 a month. Audit my whole site from $69/mo.