# What Is Target Size?

Last updated: 2026-10-03

Traditional Chinese version：[https://accesserty.com/ai/glossary/target-size.md](https://accesserty.com/ai/glossary/target-size.md)

Page version：[https://accesserty.com/en/glossary/target-size/](https://accesserty.com/en/glossary/target-size/)

Target size is the area you can activate with a mouse, trackpad or touch screen—not just a mobile concern. Learn the WCAG 2.2 AA/AAA dimensions and exceptions, and how to check the actual hit area.

## In brief

- Target size is not only the visible icon size; it is the actual clickable or touchable area.
- Small or crowded targets increase accidental activation for people with motor needs, zoom users, and mobile users.
- Design and engineering should check operable areas for buttons, links, form controls, and icon buttons together.

## Why target size affects accessibility

Small controls are not merely inconvenient. For people with tremors, limited fine motor control, touch-screen use, zoom, or on-the-go contexts, small targets can cause task failure.

Common issues include icon buttons with tiny hit areas, adjacent links placed too close together, hard-to-select form controls, and mobile lists with insufficient interactive area.

## 24 and 44 CSS px apply at different levels

WCAG 2.2 2.5.8 (AA) requires pointer targets of at least 24 × 24 CSS px, subject to spacing, same-page equivalent controls, inline targets, unmodified user-agent controls, and essential-presentation exceptions. CSS px are not physical device pixels; the requirement is not limited to touch screens.

The spacing exception is not a blanket 24px gap. A 24 CSS px diameter circle centered on an undersized target’s bounding box must not intersect another target or the corresponding circle of another undersized target. Check all nearby targets.

2.5.5 (AAA) requires at least 44 × 44 CSS px with its own exceptions; the AA spacing exception does not apply. Larger targets do not automatically fix naming, keyboard, or focus problems.

## Do not check only the icon

An icon in the design may be 16 or 20px, but the real button can provide a larger operable area through padding. Conversely, something that looks like a large button may only make the text itself clickable.

Check DOM, CSS, hit area, spacing, and focus appearance, not just the visible size.

## How UI Kit and DevCheck relate

UI Kit helps standardize basic sizing, state, and keyboard behavior for common controls, reducing repeated defects across projects.

DevCheck helps page reviewers inspect the current page and decide whether target size, focus, and interaction states need manual review.

## Frequently asked questions

### Is visual size enough?

Not necessarily. Check the actual operable area, spacing from nearby controls, and behavior across input methods.

### Does target size matter only on mobile?

No. Mouse, trackpad, touch, zoom, and motor use can all be affected by target size.

## Related pages

- [Plan WCAG checks](https://accesserty.com/en/guides/wcag-testing-checklist/)
- [Understand AA/AAA focus indicators](https://accesserty.com/en/glossary/focus-indicator/)
- [Use components and check actual hit areas](https://accesserty.com/en/uikit/)

## References

- [W3C WCAG 2.2 - Target Size (Minimum)](https://www.w3.org/TR/WCAG22/#target-size-minimum)
- [W3C Understanding Target Size](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
- [W3C: Target Size (Enhanced, AAA)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html)