Are your buttons big enough to hit?
WCAG 2.2 made 24 x 24 CSS pixels the minimum size of a tap target. Enter any page. We follow the stylesheets it serves, read the size every link, button and icon control declares, and tell you which are smaller than the criterion allows — and which of those are sitting right against another.
Free, instant, no signup and no card. Nothing is stored.
Free, instant, no signup and no card. We read the page’s HTML and follow the stylesheets it serves from its own domain. Nothing is stored.
The criterion nobody has tested for yet
SC 2.5.8 is new in WCAG 2.2, and most sites were last audited against 2.1. It asks that a pointer target be at least 24 by 24 CSS pixels, and the places it fails are always the same: the 16px icon button, the close × on a banner, the row of social icons, the pagination arrows, the tiny “edit” pencil next to a field. Each looks fine on a desktop with a mouse, and each is a coin flip under a thumb.
The fix is nearly free, because the target is the whole box that responds to a tap and not the glyph inside it. Sixteen pixels of icon inside four pixels of padding is a 24-pixel target that looks identical. Almost every failure on this page’s list is a missing line of padding.
A source reader that will not guess a size
Size is a layout property, and most boxes on a modern page get theirs from flex, grid, percentages and content — none of which is in the HTML. So this checker answers only what an author actually wrote down. It reads declared width, height and minimum sizes, adds padding and border with the right box-sizing, adds the size of the icon inside an icon-only control, and ignores a width put on an inline link because a browser does too.
/* FAILS when two of these sit side by side with no gap */
.social a { display: inline-block; width: 16px; height: 16px; }/* 16px + 4px padding on every side = 24px. Same look. */
.social a { display: inline-block; width: 16px; height: 16px; padding: 4px; }And it stays silent where the criterion does. An unstyled checkbox is drawn by the browser and is exempt. A link inside a sentence is exempt. A disabled control is exempt. A rule inside a media query is counted and disclosed, never applied — the fixture set in scripts/check-target-size-audit.mjs pins every one of those silences as hard as the failures.
What this checker reports, and how hard
Target under 24px with another target right beside it
FailsWCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA
The stylesheet gives this control a box smaller than 24 x 24 CSS pixels, and the next control follows it in the markup with no text between them and no margin or gap declared anywhere around either. The spacing exception needs a 24px circle centred on the target to touch no other target; two small controls touching each other cannot meet it.
Target declared under 24px (the spacing exception may apply)
ReviewWCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA
The stylesheet gives this control a box smaller than 24 x 24 CSS pixels. That is only a failure if a 24px circle centred on it touches another target, and neighbours' positions come from layout, which a source reader cannot see. Check it in a browser, or enlarge it and stop needing the exception.
Icon-only control whose only content is under 24px
ReviewWCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA
This control contains nothing but a single icon, the icon is smaller than 24px, and no padding, border or minimum size in the stylesheet makes the control itself bigger. The icon is the whole hit area.
Targets whose size the source does not state
VerifyWCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA
These controls get their size from layout — content, flex, grid, a percentage — rather than from a number in the stylesheet. That is normal, and it also means the source cannot say whether they reach 24px. They are neither passed nor failed here.
Rules inside media queries were not applied
VerifyWCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA
Some sizing lives in @media or @supports blocks. We do not know which viewport a rule was written for, so none of them were applied. A control that only becomes small (or only becomes big) at a particular width is not in this result.
Stylesheets on another domain were not read
VerifyWCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA
This endpoint reads stylesheets served from the page's own domain only. A size set in a CDN-hosted stylesheet is not in this result.
No stylesheet could be read
VerifyWCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA
The page has controls but we found no CSS to read, so no size could be established from source. That is a statement about this checker's reach, not about your page.
Common questions
- What does WCAG 2.2 require for target size?
- SC 2.5.8 Target Size (Minimum), at level AA, says the size of a pointer target is at least 24 by 24 CSS pixels. It was added in WCAG 2.2, so a site audited against 2.1 has never been tested for it. The stricter 44 by 44 figure people quote is SC 2.5.5, a level AAA criterion, and is not a requirement for conformance at AA.
- What are the exceptions?
- Five. Spacing: an undersized target passes if a 24px circle centred on it touches no other target. Equivalent: the same function is available through a different control that is big enough. Inline: a link inside a sentence or block of text. User agent control: the browser decides the size and the author has not changed it. Essential: the size is legally or functionally required. This checker applies the inline and user-agent exceptions itself, skips disabled controls, and treats spacing as the thing it cannot fully judge from source.
- Why does the checker say review and not fail for a 16px icon?
- Because the spacing exception is a statement about where neighbouring controls sit, and where they sit is decided by layout, which does not exist in the HTML and CSS text. A 16px icon with plenty of room around it passes. The checker fails a small target only when it can see the reason the exception cannot apply: another target follows it in the markup with no text between them and no margin or gap declared around either.
- The result says most of my targets were left to layout. Is that bad?
- No, it is normal, and it is the honest answer. A nav link that is 24px tall because its line-height and padding say so has no width or height in the stylesheet to read. The checker will not pretend to know how tall it renders, so it counts it in the ledger and does not pass or fail it. The free scan renders the page in a browser and measures every box.
- Do checkboxes and radio buttons count?
- Only if you styled them. A native checkbox is drawn by the browser at a size the browser picks, which is the user-agent exception. The moment a stylesheet sets its width or height, the size is yours, and the criterion applies. Custom checkboxes built from a hidden input and a styled label are measured on the label.
- Does padding count towards the size?
- Yes, and it is the fix. The target is the whole box that responds to a tap, so a 16px icon with 4px of padding on each side is a 24px target and looks exactly the same. The checker adds padding and border to a declared width and height, respects box-sizing, and adds the icon's own size to the padding of an icon-only button.
- Why did it ignore my rules inside a media query?
- It cannot know which screen width a rule was written for, and a target that is small on desktop and enlarged on phones is a different result from the reverse. Rules inside @media and @supports are counted and disclosed, never applied. If your touch sizing lives there, test at 360 to 414px in a browser or run the scan.
- Does this store my domain?
- No. The check is an HTTP GET of the page you name plus its own stylesheets, run inside the request and discarded when it answers. There is no account and no row written anywhere. If you go on to run the free scan, that one keeps a report so you can come back to it.