Touch Target Sizing

CreatedMar 13, 2026UpdatedMar 26, 2026Takeshi Takatsudo

The Problem

Small interactive targets are one of the most common accessibility failures on the web. Users with motor impairments, older adults, and anyone on a mobile device struggle to accurately tap small buttons and links. AI agents routinely generate buttons, icon buttons, and navigation links that are far too small — especially icon-only controls that may be only 16-24px in size. WCAG requires a minimum target size, and failing to meet it creates a frustrating, inaccessible experience.

The Solution

All interactive elements must have a minimum touch target size of 44x44 CSS pixels (WCAG 2.1 Level AAA / best practice) or at minimum 24x24 CSS pixels (WCAG 2.2 Level AA). The target area includes the element’s content, padding, and any additional clickable spacing — so padding is your primary tool for meeting the requirement.

WCAG Target Size Requirements

Level AAA (2.5.5): At least 44x44px for all interactive targets. This is the recommended baseline.
Level AA (2.5.8): At least 24x24px, with at least 24px of spacing between adjacent targets.

Touch Target Comparison: 44px Minimum vs Too Small

Code Examples

Minimum Button Size

.button {
  min-height: 44px;
  min-width: 44px;
  padding: 0.625rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Icon Button with Adequate Target

Icon buttons often have a small visible icon but must maintain a large clickable area:

.icon-button {
  /* Visual size is small, but clickable area is 44x44 */
  min-height: 44px;
  min-width: 44px;
  padding: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.375rem;
}

.icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

Expanding Clickable Area with Pseudo-Elements

When you cannot increase the visible size of an element, expand the click target invisibly:

.compact-link {
  position: relative;
  /* Visual styling stays compact */
  font-size: 0.875rem;
  padding: 0.25rem;
}

.compact-link::after {
  content: "";
  position: absolute;
  inset: -0.5rem; /* Expand touch area by 8px in each direction */
  /* Ensures minimum 44x44 clickable area */
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--color-text);
}

/* On touch devices, ensure even more generous sizing */
@media (pointer: coarse) {
  .nav-link {
    min-height: 48px;
    padding: 0.75rem 1rem;
  }
}

Checkbox and Radio Targets

Native checkboxes and radios are notoriously small. Use labels and padding:

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-block: 0.5rem;
  cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  cursor: pointer;
}

Wrapping the input in a <label> makes the entire label text clickable, greatly increasing the effective touch target.

Close Button in Tight Spaces

.close-button {
  /* Visually compact but tap-friendly */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  /* Negative margin to visually align while maintaining target */
  margin: -0.375rem;
}

Spacing Between Targets

Adjacent targets need adequate spacing to prevent accidental taps:

.button-group {
  display: flex;
  gap: 0.5rem; /* At least 8px between targets */
}

.button-group .button {
  min-height: 44px;
  min-width: 44px;
}

/* Vertical list of tappable items */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.action-list__item {
  min-height: 44px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
}

Responsive Target Sizing with pointer Query

.interactive {
  min-height: 36px;
  padding: 0.5rem 1rem;
}

/* Fine pointer (mouse): slightly smaller targets acceptable */
@media (pointer: fine) {
  .interactive {
    min-height: 32px;
    padding: 0.375rem 0.75rem;
  }
}

/* Coarse pointer (touch): larger targets needed */
@media (pointer: coarse) {
  .interactive {
    min-height: 48px;
    padding: 0.75rem 1rem;
  }
}

Common AI Mistakes

Making icon buttons too small: Generating a 24px or 32px icon button without padding to reach the 44px minimum.
Relying on visual size only: Assuming the visible size of an element equals its touch target size. Padding and pseudo-elements count toward the target area.
Ignoring inline links: Links within paragraphs can be very small touch targets. Adding padding-block or increasing line-height helps.
Not testing on actual touch devices: Target sizes that look fine on a desktop with a mouse become impossible to tap on a phone.
Crowding targets together: Placing multiple small buttons or links next to each other without adequate spacing, causing mis-taps.
Using only width/height instead of min-width/min-height: Fixed dimensions prevent the element from growing when text wraps or content is longer than expected.
Forgetting @media (pointer: coarse): Not increasing target sizes on touch devices where accuracy is lower.

When to Use

Every interactive element: Buttons, links, form controls, icon buttons — all must meet the minimum target size.
Mobile-first design: Touch targets should be at least 44x44px by default, with the option to reduce slightly for mouse-only contexts.
Icon-only controls: Close buttons, menu toggles, action icons — these are the most likely to be undersized.
Navigation items: Both horizontal and vertical navigation links.
Form controls: Checkboxes, radios, selects, and their labels.