How big should a touch target actually be?

There is no single answer because the standards disagree. WCAG 2.2 added Success Criterion 2.5.8 with a 24×24 CSS-pixel minimum for AA, while the older 2.5.5 keeps 44×44 as the AAA enhanced bar. Apple’s Human Interface Guidelines call for 44×44 pt and Material Design asks for 48×48 dp. In practice, designing to 44–48px clears every standard at once, which is why this checker shows all four side by side instead of picking one.

Why is 44 (or 48) pixels the magic number?

It comes from physical anatomy, not screen resolution. The pad of an adult fingertip is roughly 9–10mm across, which maps to about 44–48 CSS pixels on a typical 1× display. A target smaller than a fingertip forces people to aim carefully, and the cost of a miss is highest for users with motor impairments, larger thumbs, or anyone tapping on the move. The tool draws a translucent ~48px fingertip over your target so you can see this directly.

What is the WCAG 2.5.8 spacing exception?

WCAG 2.5.8 (Minimum) lets a target smaller than 24×24 still pass if it has enough clearance from its neighbours — specifically, if a 24px-diameter circle centred on the target doesn’t overlap any adjacent target. The practical takeaway is roughly 24px of spacing between small targets. Enter the spacing to the nearest target and the checker applies this exception automatically, explaining in the WCAG 2.5.8 row whether you qualify.

Do points (pt) and dp mean the same thing as CSS pixels?

For this purpose, yes. On a standard 1× display, one iOS point and one Android density-independent pixel each correspond to one CSS pixel, so a 44pt Apple target, a 44px WCAG target, and a 44dp control are directly comparable. Higher-density screens render more device pixels per unit, but the logical sizes the guidelines specify still map to CSS pixels, which is what you measure and style with.

Does the visible size of the element have to meet the minimum?

No — what matters is the tappable area, not the drawn graphic. A 16px checkbox icon is fine if it sits inside a 44px clickable label or button with padding. That’s why the recommended-fix panel reports per-side padding: you keep the visual small and expand the hit area around it. The generated CSS uses min-height/min-width plus padding (or Tailwind’s min-h-11 min-w-11) so the touch target meets the standard without resizing your icon.

Is my data sent anywhere?

No. The checker runs entirely in your browser — there’s no upload and no server round-trip. The dimensions you enter are only encoded into the page URL when you copy the share link, so you can hand a teammate the exact configuration. Nothing is stored or transmitted otherwise.

Touch Target Checker

Don’t guess whether a button is big enough to tap — see it. Enter a target’s width and height and this checker measures it against every standard at once (WCAG 2.5.8 AA, WCAG 2.5.5 AAA, Apple’s 44pt, and Material’s 48dp), shows the exact pixel gap for each, and renders the target to scale beside a 44px reference and a translucent fingertip so you can literally see whether a thumb covers it. It then generates the CSS or Tailwind classes that lift it to an accessible size.

About this ToolHow it works, benefits & use cases

Most touch-target tools check a single number and call it a day. This one measures your target against every standard at once — WCAG 2.5.8 Target Size (Minimum) at 24px for AA, WCAG 2.5.5 Target Size (Enhanced) at 44px for AAA, Apple’s 44pt Human Interface Guideline, and Material Design’s 48dp — and tells you the exact pixel gap for each. The point is that you can actually see it: the checker renders your target to scale next to a 44px reference outline and a translucent ~48px fingertip, so you can judge with your own eyes whether a thumb would cover the control or skid off the edge. Enter width, height, and the spacing to the nearest target (WCAG 2.5.8 has a spacing exception that lets small targets pass when they’re ≥24px apart), and the tool rolls everything into a single AA/AAA verdict, recommends the smallest fix — extra padding or a resize — to reach the next standard, and generates ready-to-paste CSS or Tailwind utility classes that enforce an accessible minimum. The whole configuration lives in a shareable URL.

How to Use

1Enter the target’s width and height in CSS pixels — or tap a preset like Icon button, Nav link, Checkbox, or FAB.
2Set the spacing to the nearest adjacent target so the tool can apply the WCAG 2.5.8 spacing exception.
3Watch the to-scale preview: if the target sits inside the dashed 44px outline or the fingertip circle, it’s too small.
4Read the standards table for a pass/fail and the exact pixel gap against WCAG AA, WCAG AAA, Apple, and Material.
5Apply the recommended fix (padding or a resize), then copy the generated CSS or Tailwind classes.

Key Benefits

Checks WCAG 2.5.8 (AA), WCAG 2.5.5 (AAA), Apple HIG, and Material Design in one pass
To-scale visual with a 44px reference and a ~48px fingertip so you can SEE if a thumb fits
Reports the precise pixel gap for every failing standard, not just pass/fail
Applies the WCAG 2.5.8 spacing exception when adjacent targets are ≥24px apart
Recommends the smallest fix — per-side padding or a resize — to reach the next standard
Generates copy-paste CSS or Tailwind utility classes that enforce a 44px minimum
Shareable URL captures the size, spacing, and output format for handoff

Common Use Cases

Auditing icon-only buttons (24×24) that fail the 44px tap target most platforms expect
Deciding how much padding to wrap around a small control to make it accessibly tappable
Verifying a checkbox or radio hit area is large enough even when the visible box is tiny
Checking whether tightly packed nav links qualify for the WCAG 2.5.8 spacing exception
Generating the Tailwind classes (min-h-11 min-w-11) to standardise tap targets in a design system

Can a fingertip hit it?

32×32

44px AAA ~48px fingertipTarget 32×32px

WCAG AA

Meets the WCAG 2.5.8 AA minimum, but falls short of the 44–48px most platforms expect.

WCAG 2.5.824px · AA
The AA floor added in WCAG 2.2 — 24×24 CSS px, with a spacing exception for smaller targets.
WCAG 2.5.544px · AAA12px short
The AAA enhanced bar — 44×44 CSS px, the size most teams should design to.
Apple HIG44px · platform12px short
Apple recommends a minimum tappable area of 44×44 pt on iOS.
Material48px · platform16px short
Material Design asks for touch targets of at least 48×48 dp.

Accessible target CSS

CSS enforcing a 44px min target with the padding to reach it

.touch-target {
  /* Guarantee an accessible tap target (44px minimum) */
  min-height: 44px;
  min-width: 44px;
  padding: 6px 6px; /* lifts the hit area to 44px */

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Target dimensions

Width

Height

Spacing to nearest target

Only 8px between targets. WCAG 2.5.8 wants 24px for small targets to pass on spacing alone.

Common controls

Recommended fix

To reach WCAG 2.5.5 (44px), enlarge the target or add padding:

Horizontal padding: 6px per side
Vertical padding: 6px per side
Or set the box to at least 44×44px

Output

Why 44px, and why the standards disagree

The numbers come from the physical size of a fingertip — about 9–10mm, which works out to roughly 44–48 CSS pixels. A target smaller than that forces people to aim, and missing is worse for anyone with a motor impairment, a large thumb, or a moving bus. The guidelines codify slightly different floors.

The four standards

WCAG 2.5.8 Target Size (Minimum) — the AA bar added in WCAG 2.2: 24×24 CSS px, with an exception for small targets that have ≥24px of spacing around them.
WCAG 2.5.5 Target Size (Enhanced) — the AAA bar: 44×44 CSS px. This is the size most teams should actually design to.
Apple HIG — a minimum tappable area of 44×44 pt on iOS.
Material Design — at least 48×48 dp for any touch target.

Points (pt) and density-independent pixels (dp) both map to one CSS pixel at a 1× display, so the numbers are directly comparable. Meeting 48px clears every standard at once.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Touch Target Checker

How to Use

Key Benefits

Common Use Cases

Can a fingertip hit it?

Target dimensions

Common controls

Recommended fix

Output

Why 44px, and why the standards disagree

The four standards

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Touch Target Checker