Tap target size

lowusability-tap-targetsreviewed 19 September 2026

A link sized for a mouse pointer is a coin toss for a thumb. The minimum size and spacing to use, and why padding beats a bigger font.

What it is

This check measures the rendered size of interactive elements — links, buttons, form controls — and the gaps between them, flagging anything smaller than 44 by 44 pixels or closer than 8 pixels to its neighbour.

It needs a real layout to measure, so it runs with a browser rather than from the served HTML: an element's touchable area is a rendering result, not something the markup states.

Why it matters

A fingertip contact patch is roughly 8 to 10 millimetres across, which is about 44 pixels. Anything smaller is not impossible to hit, it is unreliable to hit — and the failure mode is not a missed tap but the wrong one, when the neighbouring link is what gets activated.

It compounds with everything else that makes a phone hard to use: one hand, moving, outdoors, or any motor impairment at all. WCAG 2.2 sets 24 by 24 CSS pixels as the floor for conformance; 44 is the size at which people stop noticing.

How to fix it

with a reference doc

css

a, button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}

keep the type size, grow the box

/* the hit area is what grows, not the text: inline-flex plus a
   min-height extends the touchable box around a 13px label
   without changing how it looks */
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

Reference documentation

Related checks

highViewport meta tagThe viewport meta tag tells a mobile browser how wide to consider the page. This check fails when the tag is missing, and also when it is present but does not set width=device-width.highColor contrastThis reads Lighthouse's own color-contrast audit: whether text has enough contrast against its background, judged by the WCAG formula rather than eyeballed. The threshold is 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold).highForm field labelsThis checks that every form field has an associated label — a <label> with a for attribute matching the field's id, or the input nested inside the label — read from Lighthouse's rendered-DOM audit rather than the raw HTML, so it catches labels missing at render time as well as in markup.highCumulative Layout Shift (CLS)Cumulative Layout Shift (CLS) scores how much visible content unexpectedly moves during a page's lifetime, weighted by how much of the viewport shifted and how far. A score under 0.1 is good; 0.1-0.25 is graded medium here, above 0.25 is high.

This is one of the 75 checks the scanner runs. See what we check for the full list, every severity weight, and how the score is computed from them.

What it is

Why it matters

How to fix it

Related checks

See whether your own site passes tap target size.