Touch Target Sizes: Measure the Clickable Area and Its Neighbors

Make frequently used controls generous enough to select comfortably, then measure the actual clickable area in the browser. The icon’s artwork, the button’s border and the space around it can have different dimensions. Accessibility depends on the region that responds to the pointer and its relationship to nearby controls.

For a new interface, a 44-by-44 CSS-pixel target is a useful design starting point for standalone buttons. Allow more space where the label needs it. For an existing interface, inspect the densest controls first: pagination, table actions, dialog close buttons, compact toolbars and stacked links.

Separate the AA minimum from the AAA enhancement

WCAG 2.2 criterion 2.5.8 sets a Level AA minimum of 24 by 24 CSS pixels, with specified exceptions. Criterion 2.5.5 sets the enhanced Level AAA size at 44 by 44 CSS pixels, with its own exceptions.

Requirement	Size	Level	Practical interpretation
Target Size (Minimum), 2.5.8	24 × 24 CSS pixels	AA	Evaluate size or the applicable exception
Target Size (Enhanced), 2.5.5	44 × 44 CSS pixels	AAA	Use the larger target or an enhanced-criterion exception

Measure in CSS pixels rather than counting the physical pixels in a phone screenshot. Use browser layout measurements and inspect the interactive element itself. A larger display density changes how CSS pixels map to the screen; it does not turn a tiny CSS button into a larger target for this requirement.

Apply the minimum criterion’s exceptions carefully

The AA criterion provides five exception categories: adequate spacing, an equivalent conforming control on the same page, inline text or a target constrained by surrounding text’s line height, an unmodified user-agent control, and an essential or legally required presentation.

For spacing, imagine a 24-pixel-diameter circle centered on each undersized target’s bounding box. It must not intersect another target or the corresponding circle of another undersized target. Include larger neighboring controls in that inspection.

Document the specific exception alongside the component. An inline link inside a paragraph has a different context from a row of standalone navigation links. A compact toolbar does not become inline text merely because its controls sit on one line.

For important actions, prefer enlarging the target where the design permits. That gives the component room to survive localization, responsive changes and later additions without relying on a fragile spacing arrangement.

Work through a spacing example

Consider two square targets, each 16 pixels wide, arranged horizontally with their centers on the same line. With a 4-pixel gap, their centers are 20 pixels apart. Two circles with 12-pixel radii overlap, so this pair fails the spacing check if no other exception applies.

Increase that gap to 12 pixels and the centers become 28 pixels apart. Those circles no longer overlap. Next inspect any targets above, below or diagonally beside them. Passing the horizontal comparison alone does not finish the component review.

W3C’s C42 technique demonstrates spacing using target containers. In a real design system, test both the target and its container. A large decorative box can provide spacing while leaving a small clickable area; increasing the interactive element itself often produces a more comfortable result.

Enlarge the button without enlarging the icon

An icon can remain visually compact inside a larger button. This example uses logical minimum dimensions and padding on the actual control:

.toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 10px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

W3C’s C44 technique likewise uses minimum dimensions on targets to achieve the enhanced size. Keep the button’s accessible name and visible focus treatment when changing its layout. An icon-only control still needs a name that explains its action.

Prefer minimum dimensions to a fixed height when a control contains text. Longer labels should wrap or expand without clipping. Inspect translated labels and larger text settings before making a compact component the default across the product.

Avoid enlarging invisible hit areas until they overlap neighboring controls. That can make the apparent boundary disagree with the action a tap triggers. Test near the edges of each control and at the space between them.

Preserve predictable activation and recovery

Target size is one part of an interaction. WCAG’s pointer-cancellation guidance addresses accidental activation, including completing ordinary actions on release rather than immediately on pointer press. Native controls with standard click behavior provide a useful starting point.

Try pressing a control, moving away and releasing. Confirm that an unintended action can be avoided where the interaction calls for that behavior. For consequential changes, design a clear recovery path, such as undo or a confirmation appropriate to the task.

Keep destructive actions visually distinct from frequent routine actions. In an editable list, separate Delete from the primary action enough that a small aiming error is less likely to select it. Assess the whole sequence, including any confirmation dialog and its close control.

Test the component in its real layouts

Inspect at least 3 representative layouts: the narrow phone view, a larger touch layout and the desktop arrangement. Include expanded menus, error states and toolbars that wrap. A button may be large enough in isolation but become clipped by its parent when another item appears.

Use developer tools to inspect the interactive element’s dimensions. Then use the page normally with a pointer and keyboard. Check whether sticky headers, banners or floating controls obstruct the target after scrolling. A dimension measurement will not reveal every obstruction.

For a repeated component, sample more than its first instance. A table’s last row may sit beneath a floating footer, while the first row looks fine. Check the longest label and the smallest container in the same pass.

Write an actionable defect report

Record the page, control name, viewport, measured target dimensions and neighboring controls. If the spacing exception is being used, include the relevant distances and a screenshot showing the measurement. State the user impact: which action becomes difficult to select or which neighboring action can be triggered accidentally.

Specify the proposed correction at component level. Increasing the shared toolbar button’s minimum size may solve several pages at once; adding margin to one page can leave the same problem elsewhere. After the change, repeat the size, spacing, activation and responsive checks on the shared component and a page that uses it.