Touch Targets That Fit Fingers

Tiny buttons aren’t just annoying, they’re inaccessible.

People with reduced dexterity (e.g., due to arthritis, injury, or motor disabilities), tremors (involuntary shaking or instability from conditions like Parkinson’s), or who are using a small screen can easily miss a tiny touch target or accidentally hit the wrong one.

That’s why WCAG 2.2 defines two levels of touch target sizing:

• 2.5.8 Target Size Minimum (AA): A minimum of 24×24 CSS pixels
• 2.5.5 Target Size Enhanced (AAA): A recommended size of 44×44 CSS pixels

While 24×24 px is the baseline for AA compliance, aim for 44×44 px whenever possible. It’s more comfortable and forgiving for all users — not just those with motor impairments.

This doesn’t mean the visible button has to be huge, just that the interactive area should be large enough and have enough space around it to avoid mis-taps.

Good Practice

• Ensure that buttons, links, and controls have at least 44×44 px of clickable area
• Use padding for example to increase tap size without affecting layout
• Keep enough spacing between adjacent interactive elements

Example:

.button {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: 6px;
}

Watch Out For

• Icon-only links or buttons that are visually ~24px with no extra padding
• Form inputs or checkboxes with small tap zones
• Inline links in small text, packed closely together
• Controls stacked too tightly on mobile views

Tip: Don’t just rely on the size of the visual element, the interactive area is what matters.

Pro Tip

Test your interface with just your thumb on an actual device. If you need to zoom in or try twice to hit something — it’s too small.

You can also enable the mobile view in browser dev tools and use device emulation to test tap targets visually.

Target size requirements apply to:

• Buttons
• Links
• Inputs
• Icons that perform actions
• Toggle switches
• Any interactive component

Exceptions:

There are cases where smaller targets are acceptable such as:

• Inline links in a block of text
• Components that already have a larger control elsewhere
• Legacy content or views with no reasonable alternative

Do this today: Open your site on a phone or in mobile view. Try using only your thumb. Are buttons and links easy to tap without zooming in or misfiring? If not, increase padding or spacing until they are.