Make buttons and links easy to hit on touch screens. Check one size against every major guideline, or paste HTML to render it at a phone width and measure every target.
| Guideline | Requirement | Result |
|---|
| # | Element | Size | Result |
|---|---|---|---|
| Paste HTML and click Render & measure. | |||
Runs entirely in your browser. Nothing is uploaded to any server.
Small, crowded buttons cause people to hit the wrong thing, especially on the move.
People with tremors or limited dexterity need larger targets to use your interface at all.
Success criterion 2.5.8 makes a 24px minimum, or adequate spacing, part of Level AA.
WCAG 2.2 success criterion 2.5.8 requires targets to be at least 24 by 24 CSS pixels. Smaller targets can still pass if they are spaced out: imagine a 24-pixel-diameter circle centered on each undersized target. If that circle does not overlap any other target, or the circle of another undersized target, the spacing exception applies. Links inside a sentence of text are also exempt.
This tool renders your HTML in a sandboxed frame at the width you choose, finds every link, button, form control and focusable element, measures its bounding box and applies those rules. Stricter guidelines such as 44 or 48 pixels are checked as plain minimum sizes. Remember that padding counts toward the target, so you can enlarge a hit area without changing the visual icon.
Minimum for WCAG 2.2 Level AA, with a spacing exception.
The enhanced WCAG target and Apple's recommendation.
Google's recommended touch target, with about 8dp between targets.
No. CSS pixels are reference pixels; on high-density screens one CSS pixel covers several device pixels. All guidelines here use CSS pixels, points or dp, which are roughly equivalent.
No. WCAG exempts targets in a sentence or block of text, so they are marked as inline exceptions.
The HTML and CSS are rendered in a sandboxed frame with scripts disabled, so JavaScript in your snippet does not run.
Only the CSS you paste is applied. Include the relevant styles and fonts, and choose the same viewport width, for accurate results.
Add padding to the button or link so its clickable box reaches the minimum size, or add margin so the spacing exception applies.
More free tools from My Panda Toolbox.