Free tool · No sign-up
Are your buttons and links big enough to tap?
Small, crowded targets are hard to hit for people with tremors, limited dexterity or low vision, and for anyone using a phone one-handed. This checker loads a live page in Chrome, on a phone or desktop screen, and measures every link, button and control against the 24 by 24 pixel minimum in WCAG 2.5.8, with the spacing and inline exceptions worked out for you.
Which target size applies
The figure people quote depends on who they are reading. WCAG sets the requirement you can be held to; the platform guidelines are design advice for touch screens.
| Source | Minimum | Status |
|---|---|---|
| WCAG 2.2, 2.5.8 Target Size (Minimum) | 24 by 24 CSS pixels, or enough spacing | Level AA, the usual legal benchmark |
| WCAG 2.1 and 2.2, 2.5.5 Target Size (Enhanced) | 44 by 44 CSS pixels | Level AAA, a stretch goal |
| Apple Human Interface Guidelines | 44 by 44 points | Platform design guidance for iOS |
| Material Design (Android) | 48 by 48 density-independent pixels | Platform design guidance for Android |
Read the criteria in full: 2.5.8 Target Size (Minimum) and 2.5.5 Target Size (Enhanced).
The exceptions, and which ones the checker applies
A target smaller than 24 by 24 pixels is not automatically a failure. 2.5.8 has five exceptions, and most undersized targets on a typical page pass through one of them.
- Spacing (measured):a 24 pixel circle centred on the small target does not touch any other target, or another small target's circle.
- Inline (detected): the target is a link in a sentence or block of text, where the line height sets its size.
- User agent control (detected): the browser decides the size and the author has not changed it, as with an unstyled checkbox.
- Equivalent (check by hand): another control on the same page does the same thing and meets the size.
- Essential (check by hand): the size is part of the information, as with pins on a map or a legally required presentation.
The results separate targets that pass by spacing from those that fail, so you can see where a redesign that tightens the spacing would tip a page into failure.
How to fix small targets
- Icon buttons: keep the icon small if you like, and give the button padding or a minimum size so the clickable box reaches 24 pixels, or 44 on touch screens.
- Rows of links: social icons, pagination and footer links fail most often because they sit close together. Add a gap so their centres are at least 24 pixels apart.
- Close buttons and dismiss icons: a 12 pixel cross in a corner is a classic failure on cookie banners and modal dialogs. Make the button the size of a finger, not the size of the glyph.
- Custom checkboxes and radios: make the label clickable and large, so the whole row is the target.
/* A 16px icon in a 44px touch target */
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
padding: 0;
}
/* Space a row of small links so each 24px circle stays clear */
.social-links {
display: flex;
gap: 12px;
}Targets are one part of mobile accessibility. The mobile accessibility guide covers orientation, reflow, gestures and zoom, and the keyboard focus order checker uses the same engine to tab through the page and check focus.
Frequently Asked Questions
What is the minimum target size in WCAG?
WCAG 2.2 success criterion 2.5.8 Target Size (Minimum), Level AA, asks for pointer targets of at least 24 by 24 CSS pixels. A smaller target still passes if it has enough space around it, if it is a link inside a sentence, if the browser sets its size, if another control does the same job at full size, or if the small size is essential. 2.5.5 Target Size (Enhanced), Level AAA, asks for 44 by 44 CSS pixels.
Is the WCAG touch target size 44 by 44 or 24 by 24?
Both, at different levels. 24 by 24 CSS pixels is the AA minimum added in WCAG 2.2, and AA is what most laws and contracts point to. 44 by 44 is the AAA enhanced level from WCAG 2.1. Apple recommends 44 by 44 points and Material Design 48 by 48 density-independent pixels for touch screens, so on mobile, designing to 44 or 48 and testing against 24 is a sensible approach.
How does the spacing exception work?
Imagine a circle 24 pixels across centred on each target that is smaller than 24 by 24. The target passes if its circle does not touch any other target, or the circle of another small target. In practice a row of 16 pixel icons spaced 24 pixels apart, centre to centre, passes; the same icons packed together fail. The checker draws these circles and tests every pair.
Why check on a phone viewport?
Responsive pages often shrink controls, stack them closer together or swap in icon-only buttons on small screens, and touch is less precise than a mouse pointer. A page can pass at desktop width and fail on a phone. The phone option loads the page at 390 by 844 pixels with touch emulation and a mobile user agent, so you see the layout a phone gets.
Does the checker count the clickable area or the visible size?
The clickable area: the element's box as the browser lays it out, including padding. An icon that looks 16 pixels wide inside a button with 4 pixels of padding on each side is a 24 pixel target, and passes. A pseudo-element that extends the hit area beyond the box is not counted, so a target that relies on one may be reported as smaller than it is.
What can it not check?
Whether a small target is essential, as with pins on a map, and whether another control on the page does the same thing at full size. Both are exceptions in 2.5.8, so check any failures against them by hand. It also measures one state of the page, as a first-time visitor, so targets that appear only after a click are not included.
Essential Accessibility Resources
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences