Date Add / Subtract Calculator
About WCAG Touch Target Checker
The WCAG 2.2 Target Size (Minimum & Enhanced) Touch Target Validator evaluates interactive buttons, links, and icons against WCAG 2.2 Success Criterion 2.5.8 ($24 \times 24\text{ px}$) and Level AAA 2.5.5 ($44 \times 44\text{ px}$ / Apple HIG $44\text{ pt}$ / Android $48\text{ dp}$).
How to Use WCAG Touch Target Checker
Step 1
Enter element visual width and height in pixels (or select a preset).
Step 2
Enter CSS padding and adjacent spacing margin.
Step 3
Review compliance status across WCAG 2.2 Level AA (24px), Level AAA (44px), Apple HIG, and Android specs.
Step 4
Click "Copy CSS Target Fix".
Practical Use Cases for WCAG Touch Target Checker
Mobile App & Responsive Web Touch Target Compliance Audits
Verify that mobile hamburger buttons, pagination links, and floating action buttons meet mandatory WCAG 2.2 touch target dimensions.
E-Commerce Checkout Button Ergonomics & Mobile Friction Reduction
Ensure critical "Add to Cart" and "Checkout" touch targets adhere to Apple HIG ($44\times 44\text{ pt}$) and Material Design ($48\times 48\text{ dp}$) guidelines.
Input & Output Examples
Evaluating 20px Icon Button with 4px Padding (28x28px Total)
Element Width: `28px`, Height: `28px`, Spacing: `8px`
WCAG 2.2 SC 2.5.8 (24px Minimum): `PASS (Level AA)` | WCAG 2.5.5 (44px Enhanced): `FAIL (Needs +16px for AAA)`
Key Features & Performance
- ✓WCAG 2.2 SC 2.5.8 Validator: tests compliance with the modern 24px minimum touch target size and spacing exception rules.
- ✓Mobile Platform Standard Benchmarks: compares against Apple Human Interface Guidelines ($44\times 44\text{ pt}$) and Google Material Design 3 ($48\times 48\text{ dp}$).
- ✓Visual Target Previewer: interactive visual canvas showing touch target hit-boxes and CSS click padding overlays.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy CSS touch target code.
Key Terminology & Definitions
WCAG 2.2 SC 2.5.8 (Target Size Minimum)
A Level AA accessibility requirement introduced in WCAG 2.2 stating that interactive targets must be at least 24 by 24 CSS pixels, except where sufficient spacing surrounds the target.
Hit Area (Touch Target)
The active interactive bounding box of a clickable UI component that responds to finger tap or pointer click gestures.