Touch Target Size Checker
Check if your UI elements meet the WCAG 2.5.8 target size requirement (minimum 24×24 CSS pixels). Enter element dimensions, padding, and margin values to calculate the effective touch target area and get an instant pass/fail result with detailed guidance and a visual preview. Fully private, 100% free, and no signup required.
Quick Select
Element Dimensions
Padding
Margin / Spacing
Pass - Meets WCAG 2.5.8
Effective target area: 56 × 48px
The effective touch target size is 56×48px, which meets the WCAG 2.5.8 minimum of 24×24px. Consider adding at least 4px spacing around this target for better usability.
Visual Preview
Why Use Our Touch Target Size Checker?
Instant WCAG 2.5.8 Compliance Check
The Touch Target Size Checker evaluates your element dimensions, padding, and margins against the WCAG 2.5.8 requirement (minimum 24×24 CSS pixels) in real time. Adjust any value and see the result update instantly with a clear pass/fail status.
Visual Target Preview
See a visual representation of your touch target with colour-coded zones: content area (indigo), effective clickable area including padding (green/amber/red), margin spacing (blue dashed), and the {MIN_TARGET_SIZE}×{MIN_TARGET_SIZE}px WCAG minimum overlay for quick reference.
100% Private - No Upload
All calculations happen locally in your browser. Your design data never leaves your device and is never sent to any server - safe for client projects, design systems, and proprietary accessibility audits.
Free & No Limits
Check unlimited element configurations with no signup, no subscription, and no usage caps. The Touch Target Size Checker is completely free forever with no ads blocking the interface.
Common Use Cases for Touch Target Size Checker
Mobile App UI Audit
Mobile designers use the Touch Target Size Checker to audit every interactive element - buttons, links, icons - against WCAG 2.5.8. Ensuring all touch targets are at least 24×24px improves usability for users with motor impairments and reduces accidental taps.
Accessibility Compliance Review
Accessibility specialists use the Touch Target Size Checker during WCAG compliance audits. The tool provides detailed explanations of pass/fail results, making it easy to document accessibility findings and recommend specific dimension adjustments.
Design System Component Audit
Design system maintainers use the Touch Target Size Checker to validate that all interactive components - buttons, toggles, chips, badges - meet minimum target size requirements before shipping to development teams.
Responsive Design Validation
Developers use the Touch Target Size Checker to verify that touch targets remain large enough at all responsive breakpoints. Elements that are large on desktop may become too small on mobile, and this tool helps catch those issues early.
Form & Input Field Accessibility
Form designers use the Touch Target Size Checker to ensure input fields, checkboxes, radio buttons, and submit buttons have adequate touch target areas. Small form controls are a common accessibility barrier that this tool helps identify.
Navigation & Menu Usability
Navigation designers use the Touch Target Size Checker to audit menu items, hamburger icons, breadcrumb links, and tab elements. Small navigation targets are one of the most frequent WCAG 2.5.8 failures in modern web design.
Understanding WCAG 2.5.8 Touch Target Size
What is WCAG 2.5.8 Touch Target Size?
WCAG 2.5.8 Target Size (Minimum) is a Web Content Accessibility Guideline that requires interactive targets to be at least 24×24 CSS pixels. This ensures that users with motor impairments, reduced dexterity, or those using touch interfaces on mobile devices can accurately tap or click interactive elements without accidentally activating adjacent targets.
How Our Touch Target Size Checker Works
- Enter element dimensions: Specify the content width and height of your UI element (the visible content area, not including padding). Then enter the padding values - the padding area is clickable and counts toward the effective target size.
- Add margin/spacing (optional): Enter margin values to check the WCAG 2.5.8 spacing exception. If adjacent targets have at least 4px of spacing between them, targets can be smaller than 24×24px and still pass.
- Review the results: The tool calculates the effective touch target area (element + padding), compares it to the 24×24px minimum, and provides a clear pass/fail/conditional result with detailed recommendations for improvement.
Effective Target Area Explained
- Content area: The visible content of the element (text, icon, or image). This is typically the smallest part of the clickable area and does not include any padding.
- Effective clickable area: The content area plus all padding. This is the actual touch/click target that users interact with. The effective area must be at least 24×24px to pass WCAG 2.5.8.
- Margin / spacing: The space between this target and adjacent targets. While margin itself is not clickable, adequate spacing (4px+) between small targets can satisfy the WCAG 2.5.8 exception.
- Visual vs. interactive area: In many CSS frameworks, padding is included in the clickable area but background-clip may make it appear differently. The tool always assumes padding is clickable, which matches browser behaviour.
WCAG 2.5.8 Exceptions & Spacing Rule
The spacing exception: If a target is smaller than 24×24px, it can still pass WCAG 2.5.8 if there is at least 4px of spacing on all sides between it and adjacent targets. This exception recognises that well-spaced small targets are easier to tap accurately than tightly-packed ones.
Important limitations: The spacing exception does not apply to targets that are inline (like links within a paragraph) because the spacing between lines of text does not provide the same usability benefit. The standard also requires that the spacing be consistent - sporadic spacing around only some sides is not sufficient to meet the exception criteria.
Related Accessibility Tools
WCAG Compliance Report
Enter a full colour palette and get a complete WCAG compliance report showing which colour combinations pass AA/AAA standards.
Focus Indicator Tester
Test if custom focus outlines meet WCAG 2.4.11 focus appearance requirements. Enter outline width, offset, and colour.
Text on Background Checker
Test how readable text is on any background colour. Adjust font weight and size to check WCAG AA/AAA compliance.
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for text and UI components with live preview.
Frequently Asked Questions About Touch Target Size Checker
WCAG 2.5.8 Target Size (Minimum) is a WCAG 2.2 success criterion that requires interactive targets to be at least 24×24 CSS pixels. This applies to all pointer inputs (mouse, touch, stylus) and ensures that users with motor impairments can accurately interact with interface elements. It is a Level AA requirement.
The effective touch target size is calculated by adding the element's content dimensions to its padding. For example, a button with 16×16px icon and 8px padding on all sides has an effective size of 32×32px (16 + 8 + 8 = 32). Margin spacing is not included in the effective target size but can qualify for the spacing exception.
If your target is smaller than 24×24px, it fails the minimum requirement. However, you may still pass if there is at least 4px of spacing between this target and all adjacent targets. Our tool evaluates both the minimum size and the spacing exception, showing a "Conditional Pass" status when spacing alone meets the requirement.
The spacing exception allows targets smaller than 24×24px to pass if there is at least 4px of space between them and adjacent targets. This recognises that well-spaced small targets are more usable than tightly-packed ones. The spacing must be present on all sides where adjacent targets exist - sporadic spacing on only some sides may not be sufficient.
Yes. The Touch Target Size Checker is 100% free with no signup required, no premium features, and no usage limits. Check unlimited element configurations without any restrictions or hidden costs. There are no ads blocking the interface.
Yes. The tool accepts element width and height, separate padding values for all four sides (top, right, bottom, left), and separate margin values. This covers all CSS box-model configurations including asymmetric padding, zero padding, negative margin (not recommended), and elements with only horizontal or only vertical padding.
WCAG 2.5.5 is a Level AAA criterion that requires targets to be at least 44×44px - a much stricter standard. WCAG 2.5.8 is a newer Level AA criterion from WCAG 2.2 that requires only 24×24px. Most organisations target Level AA compliance (24×24px), but if you're aiming for AAA, your targets should be 44×44px.
Yes. While WCAG 2.5.8 applies to web content, the same 24×24px principle is widely adopted for mobile app accessibility (iOS and Android Human Interface Guidelines). The tool's inputs are platform-agnostic, so you can use it to audit any UI - web, mobile, desktop, or design prototypes.