Touch Target Size
Touch target size is the minimum dimension of interactive elements on touchscreen devices. WCAG 2.2 introduced Target Size (Minimum) as a Level AA requirement: pointer targets must be at least 24 by 24 CSS pixels, with exceptions for inline links, equivalent targets, and essential controls.
§ 1 Definition
Touch target size refers to the minimum physical or CSS pixel dimension of an interactive element on a touchscreen interface. Small targets are difficult or impossible to tap accurately for users with motor disabilities, tremors, large fingers, or anyone using a device while in motion. WCAG 2.2 added Success Criterion 2.5.8 Target Size (Minimum) at Level AA, which requires that pointer targets (touch, mouse, stylus) be at least 24 by 24 CSS pixels. This is a reduction from the earlier draft's 44 by 44 pixels in WCAG 2.1's proposed (but never finalised) criterion. Exceptions apply if the target is an inline link in a paragraph, the target is part of an equivalent larger control, or the small size is essential to the function (e.g., a map pin). The general guidance remains: bigger is better. Apple's Human Interface Guidelines recommend 44 by 44 points, and Material Design recommends 48 by 48 dp. The 24 by 24 CSS pixel target in WCAG 2.2 is a minimum, not a recommended target.
§ 2 Why touch target size matters
Small touch targets cause errors, frustration, and abandonment. A user with Parkinson's disease, a user navigating a phone one-handed on a crowded train, and a user with disproportionately large fingers all experience the same problem: they try to tap a 16-pixel button and either miss it entirely or accidentally trigger the wrong element. The result is form errors, unintended navigation, and uninstalled apps. WCAG 2.2's 2.5.8 Target Size (Minimum) at Level AA directly addresses this. The criterion also applies to non-touch pointer inputs: mouse users with motor impairments also benefit from larger click targets.
§ 3 Exceptions and edge cases
Inline links (a link within a sentence of text, where every word is potentially a tap target) are exempt from the 24 by 24 requirement because forcing all inline links to button size would disrupt reading. If a target's function has an equivalent larger control nearby, the small target is exempt. For example, a small edit icon next to a large row of text where tapping the whole row triggers the same action is acceptable. Essential small targets (a map pin, a colour swatch in a design tool) are also exempt. All other interactive elements should meet 24 by 24 CSS pixels.
§ 4 Common questions
- Q. Does the 24 by 24 rule apply to spacing or the visible element?
- A. The target size is the area that responds to pointer input, which includes the visible element plus its surrounding padding. For example, a 16px icon with 4px padding on each side is 24px total. The measurement is the total clickable area, not just the visible graphic.
- Q. What about spacing between targets?
- A. WCAG 2.5.8 does not directly specify spacing between targets, but close proximity of small targets compounds the problem. A row of 24px buttons with 2px gaps is still hard to tap accurately. Sufficient spacing (at least 8-16px) reduces accidental taps. Apple's and Google's design guidelines recommend both adequate size and spacing.
- WCAG 2.2 Level AA requires pointer targets to be at least 24 by 24 CSS pixels.
- Exceptions: inline links, equivalent larger controls, and essential small targets.
- Bigger is always better: aim for 44-48px per platform guidelines.
- Target size includes padding, not just the visible element.
- Small targets cause errors for users with motor disabilities and on mobile.
Atomic Glue designs and builds with touch-accessible target sizes from the start. We do not squeeze navigation into 16px icons and call it minimal. Our Web Development services respect both design and usability. Get in touch.
Get in touchTouch target size is the minimum dimension of interactive elements on touchscreen devices. WCAG 2.2 introduced Target Size (Minimum) as a Level AA requirement: pointer targets must be at least 24 by 24 CSS pixels, with exceptions for inline links, equivalent targets, and essential controls.
Category: Accessibility (also: Mobile Development, UX)
Author: Atomic Glue Team
## Definition
Touch target size refers to the minimum physical or CSS pixel dimension of an interactive element on a touchscreen interface. Small targets are difficult or impossible to tap accurately for users with motor disabilities, tremors, large fingers, or anyone using a device while in motion. WCAG 2.2 added Success Criterion 2.5.8 Target Size (Minimum) at Level AA, which requires that pointer targets (touch, mouse, stylus) be at least 24 by 24 CSS pixels. This is a reduction from the earlier draft's 44 by 44 pixels in WCAG 2.1's proposed (but never finalised) criterion. Exceptions apply if the target is an inline link in a paragraph, the target is part of an equivalent larger control, or the small size is essential to the function (e.g., a map pin). The general guidance remains: bigger is better. Apple's Human Interface Guidelines recommend 44 by 44 points, and Material Design recommends 48 by 48 dp. The 24 by 24 CSS pixel target in WCAG 2.2 is a minimum, not a recommended target.
## Why touch target size matters
Small touch targets cause errors, frustration, and abandonment. A user with Parkinson's disease, a user navigating a phone one-handed on a crowded train, and a user with disproportionately large fingers all experience the same problem: they try to tap a 16-pixel button and either miss it entirely or accidentally trigger the wrong element. The result is form errors, unintended navigation, and uninstalled apps. WCAG 2.2's 2.5.8 Target Size (Minimum) at Level AA directly addresses this. The criterion also applies to non-touch pointer inputs: mouse users with motor impairments also benefit from larger click targets.
## Exceptions and edge cases
Inline links (a link within a sentence of text, where every word is potentially a tap target) are exempt from the 24 by 24 requirement because forcing all inline links to button size would disrupt reading. If a target's function has an equivalent larger control nearby, the small target is exempt. For example, a small edit icon next to a large row of text where tapping the whole row triggers the same action is acceptable. Essential small targets (a map pin, a colour swatch in a design tool) are also exempt. All other interactive elements should meet 24 by 24 CSS pixels.
## Common questions
Q: Does the 24 by 24 rule apply to spacing or the visible element?
A: The target size is the area that responds to pointer input, which includes the visible element plus its surrounding padding. For example, a 16px icon with 4px padding on each side is 24px total. The measurement is the total clickable area, not just the visible graphic.
Q: What about spacing between targets?
A: WCAG 2.5.8 does not directly specify spacing between targets, but close proximity of small targets compounds the problem. A row of 24px buttons with 2px gaps is still hard to tap accurately. Sufficient spacing (at least 8-16px) reduces accidental taps. Apple's and Google's design guidelines recommend both adequate size and spacing.
## Key takeaways
- WCAG 2.2 Level AA requires pointer targets to be at least 24 by 24 CSS pixels.
- Exceptions: inline links, equivalent larger controls, and essential small targets.
- Bigger is always better: aim for 44-48px per platform guidelines.
- Target size includes padding, not just the visible element.
- Small targets cause errors for users with motor disabilities and on mobile.
## Related entries
- [Accessible Forms](atomicglue.co/glossary/accessible-forms)
- [Keyboard Navigation](atomicglue.co/glossary/keyboard-navigation)
- [WCAG (2.1, 2.2)](atomicglue.co/glossary/wcag)
Last updated July 2026. Permalink: atomicglue.co/glossary/touch-target-size