search

Found

info About

A browser-based a11y tap target size checker tool. No data sent to server.

📘 How to Use

  1. Select the target device (e.g., iPhone, Android, Web)
  2. Adjust the width and height of the tap target using the sliders
  3. Review the compliance check results and physical size in the report
  4. Download the accessibility report as a PNG image

A11y Tap Target Size Checker

44
44

info UI Actual Size Preview

*Actual physical size may vary slightly depending on your monitor.

touch_app

verified_user About Criteria

  • WCAG 2.2 AA: ≥ 24x24 CSS px (with exceptions)
  • WCAG 2.2 AAA: ≥ 44x44 CSS px
  • Apple HIG: ≥ 44x44 pt
  • Android Material: ≥ 48x48 dp

Tap Target Accessibility Report

Target Device: iPhone 15

Target Size

Logical (px/pt/dp)
44 × 44
Physical (mm)
7.3 × 7.3

Compliance Check

WCAG 2.2 AA
≥ 24×24 px
Pass
WCAG 2.2 AAA
≥ 44×44 px
Pass
Apple HIG
≥ 44×44 pt
Pass
Android Material
≥ 48×48 dp
Fail
Actual Size Preview
(Standard Display)
* Rendered at 96 PPI equivalent.

grid_view Related

  • No related tools configured.
Article

Tap Target Size Checker | Visualize & Validate for WCAG & HIG Compliance

This tool helps developers and designers verify that tap targets (like buttons and links) meet crucial accessibility standards. Instantly calculate the physical size of UI elements on different devices and check compliance with WCAG, Apple Human Interface Guidelines (HIG), and Android Material Design guidelines.

💡 Tool Overview

  • Physical Size Calculation: Converts logical units (px, pt, dp) into actual physical dimensions (mm) based on the selected device's screen density (PPI).
  • Multi-Platform Compliance Check: Automatically validates your tap target size against WCAG 2.2 (AA & AAA), Apple HIG, and Android Material Design standards.
  • Real-time Previews: Instantly visualize both the logical size on a UI and the rendered physical size as you adjust the dimensions.
  • Exportable Report: Generate and download a clean, shareable report as a PNG image, perfect for documentation, pull requests, or team collaboration.

🧐 Frequently Asked Questions

Q. Why does physical size (mm) matter more than logical pixels (px/pt/dp)?

A. Physical size corresponds directly to the size of a user's fingertip, which is constant regardless of screen resolution. A 44px button might be physically large on a low-density display but tiny on a high-density "Retina" display. Accessibility guidelines aim to ensure a consistently tappable physical area, which is why converting to millimeters is essential for accurate validation.

Q. What's the difference between px, pt, and dp?

A. They are all logical, density-independent units used to create scalable UIs. - px (CSS Pixels): The standard for the web. It's not a physical screen pixel. - pt (Points): Used by Apple for iOS/macOS. 1pt corresponds to 1 physical pixel on a @1x screen, 2 physical pixels on a @2x screen, and so on. - dp (Density-Independent Pixels): The unit used by Android. It's equivalent to one physical pixel on a 160 dpi screen, providing a baseline that scales with screen density. This tool correctly interprets these units based on the selected device preset.

📚 Fun Facts about Tap Target Sizing

The importance of adequate tap target size is scientifically supported by a principle known as Fitts's Law. This is a predictive model of human movement that states the time required to move to a target area is a function of the distance to and the size of the target. In UI design, this means larger and closer buttons are inherently faster and easier for users to interact with.

This principle is especially critical for users with motor impairments, users in distracting environments (like walking), or anyone using a touch screen. The minimum size requirements in guidelines like WCAG (e.g., 44x44 CSS pixels for AAA) are not arbitrary numbers; they are practical applications of Fitts's Law, designed to ensure a baseline level of usability for everyone.