Tap Target Size Checker (WCAG 2.2, Apple, Material)

Enter the width, height and spacing of a button or link: the checker shows whether it meets WCAG 2.2 (24 × 24 px), Apple (44 pt) and Material (48 dp), draws it at real size and writes the CSS to enlarge its tap area.

/* Padding grows the hit area; the negative margin keeps the layout where it was. */
.icon-button {
  padding: 6px 6px;
  margin: -6px -6px;
  background-clip: content-box; /* keep a background the original size */
}

/* An invisible ::after layer catches taps around the element. */
.icon-button {
  position: relative;
}
.icon-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

What the numbers mean

All sizes here are CSS pixels — the unit in your stylesheet, which is also what iOS calls points and Android calls density-independent pixels (dp). On a phone one CSS pixel is about 0.15–0.19 mm, so 48 px is roughly 8–9 mm: the width of the pad of a fingertip. The guidelines differ in how much room they ask for:

• WCAG 2.2, 2.5.8 Target Size (Minimum), level AA — at least 24 × 24 px. A smaller target still passes if a 24 px circle centred on it does not overlap another target or that target's circle. Inline links in a sentence, controls the browser draws itself and targets with a bigger equivalent elsewhere on the page are exempt.
• WCAG 2.2, 2.5.5 Target Size (Enhanced), level AAA — 44 × 44 px.
• Apple Human Interface Guidelines — 44 × 44 pt for anything people tap.
• Android and Material Design — 48 × 48 dp, with about 8 dp between targets.

For the spacing rule, the checker assumes the neighbouring target is the same size and enters the gap between their edges: two 18 px icons pass 2.5.8 when they are at least 6 px apart, because their centres are then 24 px apart.

Making a target bigger without changing the design

You rarely need to make an icon look bigger. Grow its hit area instead. Padding with an equal negative margin enlarges the box that receives taps while the layout stays where it was. An absolutely positioned ::after layer does the same without touching the box model, which is handy for icons inside flex rows. Either way, make sure the enlarged areas of neighbouring targets do not overlap: where they do, the element that comes later in the page wins the tap. For text links in menus and footers, use display: block or inline-block with vertical padding so each link gets its own 44–48 px row.

Mobile-specific notes

Thumbs reach the middle of the screen most easily; the top corners and the very bottom edge are hardest, and on iPhones the bottom edge is shared with the home indicator and Safari's toolbar. Give targets near screen edges extra room. Avoid placing a destructive action (delete, log out) right next to a frequent one. Close buttons on pop-ups and cookie banners are the most common failures — they are often 16–20 px icons in a corner. The tap targets guide walks through fixes for menus, icon buttons and form controls.

More free tools: color contrast checker · mobile font size calculator · css media query generator · device mockup generator · all tools