Touch Target Checker
Fast, secure, client-side utility running entirely in your browser with zero server dependencies.
Touch Target Checker
Verify mobile touch target dimensions and spacing under WCAG 2.2 Success Criteria 2.5.8 (24x24px) and 2.5.5 (44x44px).
Touch Target Dimension & Spacing Calculator
Enter the physical CSS width, height, and perimeter padding of your interactive element to evaluate mobile touch ergonomics.
Visual Target Bounding Box Preview
Touch Target Checker - WCAG 2.2 Target Size Minimum (24x24px & 44x44px): Free Touch Target Checker tool: calculate touch target sizing and spacing against WCAG 2.2 Target Size SC 2.5.8 (24x24px) and Level AAA SC 2.5.5 (44x44px).
How to Use the Touch Target Checker
Input Visual Icon Dimensions
Specify the visual width and height of the icon or button graphic in CSS pixels (e.g. a 20x20px SVG icon).
Include CSS Padding Margins
Enter internal horizontal and vertical padding. Padding expands the clickable hit box without enlarging the visual icon.
Measure Spacing to Adjacent Controls
Provide the spacing (in CSS pixels) between the perimeter of this target and any neighboring clickable elements.
Evaluate Level AA & Level AAA Pass/Fail
Verify whether the effective bounding box satisfies the 24x24px Level AA minimum (SC 2.5.8) or 44x44px Level AAA enhanced standard (SC 2.5.5).
Comprehensive Guide: Touch Target Checker
As mobile smartphones and touchscreen tablets became the dominant vehicle for web traffic, touchscreen ergonomics emerged as a vital accessibility frontier. Users with hand tremors, arthritis, neurological motor impairments, or reduced finger dexterity frequently struggle to activate small, tightly clustered buttons without accidentally triggering adjacent actions.
The WCAG 2.2 release introduced Success Criterion 2.5.8 Target Size (Minimum) at Level AA. This rule mandates that every interactive pointer target must measure at least 24 by 24 CSS pixels, or provide sufficient perimeter spacing so that a 24-pixel diameter circle centered on the target does not intersect any adjacent target or another target’s spacing circle.
A common design dilemma is maintaining sleek, minimalist UI aesthetics (such as a 16px close icon or tiny kebab menu dots) while satisfying accessibility requirements. The solution lies in CSS padding: an icon measuring 16x16px can achieve a 32x32px accessible touch target simply by applying `padding: 8px`. The visual graphic remains 16px, while the invisible clickable hit area expands to 32px.
For enhanced Level AAA accessibility, Success Criterion 2.5.5 Target Size (Enhanced) elevates the requirement to 44 by 44 CSS pixels. This 44px guideline aligns with standard Apple iOS Human Interface Guidelines and Google Material Design specifications, providing effortless activation for elderly users and touchscreen interactions in bumpy mobile environments.
Key Features & Capabilities
WCAG 2.2 SC 2.5.8 AA Compliance
Audits against the official 24x24px target size minimum and spacing circle clearance rules.
WCAG 2.2 SC 2.5.5 AAA Compliance
Verifies enhanced 44x44px dimensions matching Apple iOS and Google Android design systems.
Effective Hit Area Calculation
Combines visual dimensions with CSS padding to calculate true touch event activation geometry.
Adjacent Misclick Prevention
Evaluates perimeter spacing to eliminate accidental triggers on neighboring delete or submit buttons.
Inline Text Link Exemption Rules
Applies standard W3C exceptions for hyperlinks embedded naturally inside running paragraphs.
Interactive Visual Ruler Preview
Renders dynamic visual feedback showing the exact bounding box of your interactive element.
Frequently Asked Questions
In WCAG 2.1, target size was only an AAA requirement (SC 2.5.5, 44x44px). WCAG 2.2 introduced SC 2.5.8 Target Size (Minimum) at Level AA (24x24px), making touch target auditing legally required for standard commercial compliance under ADA and EAA regulations.
Exceptions include: (1) Inline text links inside a sentence or paragraph; (2) Targets with sufficient spacing where an offset 24px circle does not overlap adjacent targets; (3) Browser default controls (like un-styled checkboxes); and (4) Essential presentations (like pin markers on a digital map).
Use CSS padding! For example, if you have a 16x16px SVG icon, add padding: 8px to the parent <button>. The visible icon remains a compact 16px, but the clickable hit area expands to 32x32px, easily exceeding the 24px minimum.
Yes. WCAG criteria apply across all input modalities. People using trackballs, head pointers, or eye-gaze technology on desktop computers benefit just as much from adequate target sizes as mobile smartphone users.
If a target is smaller than 24x24px, the combined diameter of the target plus its surrounding empty margin must be at least 24px, ensuring that adjacent targets are separated by at least 12px of empty space.