OneTaskBy Tim King · Updated
Touch Target Checker
Button Size and Spacing Against WCAG 2.5.8 and Apple and Android Minimums
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Touch Target Checker works
This touch target checker tests a control's size and spacing against the 44 and 24 pixel guidelines. Type the size of a button or icon control and the distance to its neighbours, and the preview draws three of them at true CSS pixel size, with the hit area shown as a dashed box and a 44 pixel circle over each so you can see the shortfall. The code panel lists pass or fail for each guideline and gives CSS that enlarges the target with padding while the visible control stays the same.
What the touch target checker measures
Fingers are wide and imprecise, and a control that is easy to click with a mouse can be nearly impossible to tap on a phone, or for anyone with a tremor on any device. Several guidelines set a minimum size, and they disagree on the number, so this tool checks all of them at once.
WCAG 2.5.8, level AA. Introduced in WCAG 2.2, this requires targets to be at least 24 by 24 CSS pixels, with an exception for spacing: a smaller target passes if a 24 pixel circle centred on it does not overlap any other target or another target's circle. In practice that means the target size plus the gap to its neighbour must reach 24. The tool applies this exception and says when it is what saved the result.
WCAG 2.5.5, level AAA. The stricter version asks for 44 by 44 pixels with no spacing exception, other than for inline links in text and where the size is essential. Apple's Human Interface Guidelines use the same 44 point figure and Android's Material Design uses 48 dp, which map one to one onto CSS pixels on the web.
Visible size versus hit size. A guideline measures the area that responds to a tap, not
the painted shape. A 24 pixel icon inside a button with 10 pixels of padding is a 44 pixel
target and passes everything, while looking exactly as small as the design wants. That is what
the hit padding field models and what the generated CSS does: min-width, min-height and
padding on the interactive element, leaving the icon inside untouched. Negative margins can
compensate if the layout must not grow.
Spacing. Even large targets fail people when they touch each other. A row of 44 pixel
icons with no gap gives no margin for error at the edges. Eight pixels between targets is a
comfortable minimum, and the CSS uses margin to keep it.
Reference circle. The overlay draws a 44 pixel circle centred on each target so the gap between the circle and the dashed hit area shows exactly how far short the control is. Hide it to judge the visual weight of the controls on their own.
FAQ
Does the preview show true physical size?
It shows CSS pixels, which is what every guideline specifies. On a high density screen a CSS pixel is two or three device pixels, but the guidelines already account for that, so the 44px circle in the preview is the right size to judge against.
Do inline text links need to be 44px tall?
No. Links within a sentence or paragraph are exempt from both WCAG criteria because their size is set by the text. Links presented as standalone controls, such as in a toolbar or a card footer, are targets and must meet the size.
What if the target must be small, like a colour swatch grid?
WCAG 2.5.8 allows small targets when spacing keeps them apart, and also when an equivalent control elsewhere on the page meets the size. Add gap between swatches until the checker passes on spacing, or provide a larger alternative such as a dropdown.
How do I enlarge a target without changing the layout?
Add padding to the control and a matching negative margin, or use a pseudo-element with
position: absolute and inset: -10px inside a positioned control. Both extend the hit area
without moving anything visible.
See also: all Accessibility tools, Dev Utilities, Formatters & Validators, Data & Encoding, Security & Identifiers, SEO, AI.
Related tools
Contrast Checker
Check colour contrast against WCAG and APCA.
Skip Link Generator
Generate a skip-to-content link that appears on focus, with HTML and CSS.
Tab Order Tester
List every Tab stop in your HTML in order and flag focus order problems.
0–60 Calculator
0–60 mph, 0–100 km/h and quarter mile from power and weight.
1920s Name Generator
Jazz Age names, from Chester Vanderbeck III to Millie Kowalski the flapper.