TinySandyFree Online Tools

Target Size Checker

Paste the HTML and CSS of a toolbar, form, card or navigation and the checker renders it in an isolated frame, measures every link, button and form control, and tests each one against the WCAG 2.2 Target Size (Minimum) rule: at least 24 by 24 CSS pixels, or enough spacing that a 24 px circle around it does not touch another target. A numbered map shows exactly which controls pass and which need attention.

Accessibility Runs in your browser

Check Target Sizes Against WCAG 2.5.8

Paste a component or section. Scripts are removed and nothing is loaded from the internet.
px
The snippet is laid out at this width.

How to Use the Target Size Checker

  1. Paste your HTML, including the CSS that sizes the controls.
  2. Set the width the snippet should be laid out at, and choose 24 px (AA) or 44 px (AAA).
  3. Press Check.
  4. Use the numbered map and the table to find and fix undersized or crowded targets.

About This Tool

Designers and developers checking components before release, accessibility testers auditing WCAG 2.2 conformance, and anyone building interfaces for touch screens or users with limited dexterity.

Input: HTML and CSS snippet  ·  Output: Size report and overlay.

Features and Limitations

Features

  • Implements the spacing exception: an undersized target passes if its 24 px circle does not intersect another target or another undersized target's circle.
  • Flags links inside sentences as likely covered by the inline exception, for you to confirm.
  • Numbered overlay plus a table, so results never depend on colour alone.
  • Rendered in a sandboxed frame with scripts removed and network access blocked.

Limitations

  • Only the HTML and CSS you paste are rendered; external stylesheets, fonts and images are not loaded, so sizes may differ from your live site.
  • The equivalent, user-agent control and essential exceptions need human judgement; the tool marks likely cases but cannot decide them.
  • Clickable labels that enlarge a checkbox's real target are not added to its measured size.
  • Results are computed in your browser; nothing you enter is sent to a server.

Example

In the sample, the 20 × 20 px Close button passes through the spacing exception because nothing is within its 24 px circle, while the adjacent 18 × 18 px Help and Info buttons fail because their circles overlap.

Frequently Asked Questions

What does WCAG 2.5.8 require?

Targets must be at least 24 × 24 CSS pixels, unless they are spaced so that 24 px circles centred on them do not overlap other targets, an equivalent larger control exists, they are inline in text, their size is set by the browser, or the presentation is essential.

Is 24 px enough for touch screens?

It is the AA minimum. Platform guidelines and WCAG 2.5.5 (AAA) recommend about 44 × 44 px for comfortable touch use, which you can select in the checker.

Do links in paragraphs fail?

No. Links within a sentence or block of text are excepted, because their size is set by the line height of the text. The checker marks them as inline so you can confirm.

Does padding count towards the target size?

Yes. The target is the element's clickable area, which includes padding but not margin. Adding padding is often the easiest fix.

Related Tools

More like this: all Accessibility tools, all Developer & Web tools or the TinySandy home page.