WCAG 2.2 target size checker (2.5.8)

Enter the size of a button, link or icon, and how close its neighbour is. The tool tells you if it meets the 24 by 24 pixel rule or one of its exceptions, and draws it for you.

Runs in your browser. Nothing is sent to our servers.

Your target

Width (CSS px)

Height (CSS px)

Example sizes

Another clickable target is next to this oneUntick it if this control stands alone.

Where is the neighbour?

Beside it (left or right)Above or below it

Gap between the two (px)Free space between the edges

Neighbour size along that line (px)

Neighbour size across it (px)

The check assumes the two targets are lined up on their centers. A neighbour that is offset sideways is further away, so this is the strict case.

Other exceptions that might apply

Equivalent: the same action is available through another control on the same page that is big enoughInline: the target is a link inside a sentence, or its size is limited by the line height of the text around itBrowser-controlled: the browser decides the size and the page does not change it (for example a default checkbox)Essential: a particular size is essential to the information, or required by law

Pass Spacing exception applies

The target is smaller than 24 by 24, but a 24 px circle centered on it touches no other target and no other undersized target's circle.

A: 20 × 20 px, undersized

Solid box: the target
Dashed circle: 24 px spacing circle
Dotted square: 24 × 24 px minimum

Size: 20 × 20 px. Needs at least 24 × 24.
Spacing: clear. The neighbour is full size, so its box must stay out of the circle.

Suggested CSS

/* Make the target at least 24 by 24 CSS pixels */
min-width: 24px; min-height: 24px;
padding: 2px 2px; /* grows the clickable area without changing the icon */

WCAG 2.5.8 Target Size (Minimum) is new in WCAG 2.2 at level AA. The related 2.5.5 (Level AAA) asks for 44 × 44 CSS pixels. Browsers also add their own touch padding, which this tool does not measure.

What next?

Want to know how many buttons across a whole site are too small? This tool looks at one thing at a time. It cannot tell you whether a whole website meets a standard or a law.

Check your whole site free Running this for client sites? See agency white-label reports

How it works

If the target is at least 24 by 24 CSS pixels on both sides, it passes on size alone.
If it is smaller, the spacing exception is tested: a 24 pixel circle is centered on the target. The circle may not touch a neighbouring target, and may not overlap the circle of a neighbour that is also too small.
The distance is worked out along the line between the two targets, with their centers lined up. That is the strict case, because a neighbour that sits off to one side is further away.
If spacing fails, you can tick the other exceptions (equivalent control, inline, browser-controlled, essential). They need a person to judge, so the tool takes your word for them.
For a failing target you get the smallest gap that would pass and a few lines of CSS to copy.

Questions

What does WCAG 2.5.8 Target Size (Minimum) ask for?

Targets for pointer input, such as buttons and links, should be at least 24 by 24 CSS pixels. It is a new level AA criterion in WCAG 2.2. There are exceptions for spacing, equivalent controls, inline links, browser-controlled controls and essential presentation.

How does the spacing exception work?

Imagine a 24 pixel circle centered on a small target. If that circle touches no other target, and does not overlap the circle of another small target, the small target passes. For two 20 pixel buttons that works out to a 4 pixel gap; a 20 pixel button next to a full-size one needs 2 pixels.

Are CSS pixels the same as screen pixels?

No. CSS pixels are the units used in your stylesheet. On a high-density phone screen one CSS pixel covers several device pixels, and the 24 pixel rule is counted in CSS pixels.

Does the padding of a button count?

Yes, as long as the padded area is part of the clickable target. A 16 pixel icon with 4 pixels of clickable padding on each side is a 24 pixel target. Padding that does not respond to clicks does not count.

Is 24 pixels enough for touch screens?

It is the WCAG 2.2 AA minimum. The AAA criterion 2.5.5 asks for 44 by 44 pixels, and many design guides recommend a size near that for fingers. Treat 24 as the floor.