Touch Target Size Checker

What this calculator does

Checks whether a button, icon, link, or any other tappable UI element is large enough — and has enough space around it — to meet the WCAG Target Size success criteria. Small, cramped tap targets are one of the most common accessibility failures on mobile sites and apps, causing mis-taps for users with limited dexterity, tremors, or simply large fingers.

Criteria used

WCAG 2.5.8 Target Size (Minimum) — Level AA

$$\min(width, height) \geq 24\text{px}$$

A target smaller than 24×24 CSS pixels can still pass AA if it qualifies for the spacing exception — enough clear space exists between it and the next target that a 24px circle centered on it would not overlap a 24px circle centered on the neighboring target:

$$spacing \geq 24\text{px}$$

WCAG 2.5.5 Target Size (Enhanced) — Level AAA

$$\min(width, height) \geq 44\text{px}$$

This is a stricter, "enhanced" requirement — not required for AA conformance, but recommended best practice, especially for primary actions and elements aimed at touchscreen users.

Exceptions — a target size failure can still conform if:

• the target is inline within a sentence or block of text (e.g. a text link),
• the specific size is essential to the information being conveyed (e.g. a point on a map, a slider handle whose size matters), or
• the target's size is controlled by the browser or OS and not by the page's own styling.

How to use it

1. Enter the tappable element's rendered width and height in CSS pixels.
2. Enter the spacing (gap) between this element and the nearest other tappable element.
3. If one of the WCAG exceptions applies, select it from the dropdown — otherwise leave it as "None".
4. Submit to see the overall verdict, a criterion-by-criterion breakdown, and a ready-to-use CSS snippet.

Example

A circular icon button rendered at 32×32px, with 4px of spacing to the next icon, no exception claimed:

$$\min(32, 32) = 32\text{px} \geq 24\text{px} \Rightarrow \text{passes AA (Minimum)}$$ $$32\text{px} < 44\text{px} \Rightarrow \text{fails AAA (Enhanced)}$$

The spacing check is irrelevant here since the target already meets the 24px minimum on its own. If the same icon were shrunk to 20×20px with only 4px of spacing, it would fail AA outright — 20px is under the 24px floor, and 4px of spacing is far short of the 24px needed for the spacing exception to kick in.

Notes

• Measure the actual rendered (CSS pixel) size, not the source image resolution — a 24×24px icon inside a 44×44px clickable button counts as 44×44px if the whole button area responds to taps.
• This tool checks one target in isolation; a full audit should check every interactive element on a page, since a single undersized control can still block a user from completing a task.
• Meeting AAA (44×44px) is good practice even where AA (24×24px) is the legal/contractual bar, since it reduces mis-taps for all users, not just those relying on assistive technology.