Target Size (Minimum)
Tier 1 · The normative floor
Baseline compliance
What the normative text of WCAG 2.2 requires, and nothing more. Only a failure of this tier is a WCAG failure.
The bare minimum
Pointer targets are at least 24 by 24 CSS pixels, except when: a 24 CSS pixel circle centered on each smaller target doesn't overlap another target or another such circle; the same function is available through another control on the page that meets this criterion; the target is in a sentence or limited by the line height of surrounding text; the browser sets the size and the author hasn't changed it; or the presentation is essential or legally required.
Normative text
Verbatim from WCAG 2.2, W3C Recommendation 12 December 2024. Underlined terms are defined below.
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:
- Spacing
- Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
- Equivalent
- The function can be achieved through a different control on the same page that meets this criterion;
- Inline
- The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
- User Agent Control
- The size of the target is determined by the user agent and is not modified by the author;
- Essential
- A particular presentation of the target is essential or is legally required for the information being conveyed.
Not required by the normative text
Common claims that this criterion does not support. Don't log these as WCAG failures.
- 44 by 44 targets. That's 2.5.5 (AAA) and platform guidance.
- A 24 by 24 visible size. A smaller target passes if it has enough space around it.
Definitions used (7)
Glossary definitions are normative. Their notes are informative.
- target
-
region of the display that will accept a pointer action, such as the interactive area of a user interface component
Informative notes (1)
If two or more targets are overlapping, the overlapping area should not be included in the measurement of the target size, except when the overlapping targets perform the same action or open the same page.
- pointer input
-
input from a device that can target a specific coordinate (or set of coordinates) on a screen, such as a mouse, pen, or touch contact
Informative notes (1)
See the Pointer Events definition for "pointer" [[pointerevents]].
- CSS pixel
-
visual angle of about 0.0213 degrees
A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the CSS Values and Units Module Level 3 reference pixel [[css3-values]], which takes into account the physical dimensions of the display and the assumed viewing distance (factors that cannot be determined by content authors).
- minimum bounding box
-
the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such as hypertext links), the bounding box is based on how the component would appear on a single line.
- user agent
-
any software that retrieves and presents web content for users
- presentation
-
rendering of the content in a form to be perceived by users
- essential
-
if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform
Notes in the criterion Informative
WCAG 2.2 lists notes among its informative material, which "does not create requirements that impact a conformance claim." They help interpret the criterion but are not part of the floor.
Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.
Tier 2 · The gap
Usability & user impact
Where content can meet this criterion and still make things harder for people with disabilities. These are not failures of SC 2.5.8, so raise them as usability defects. Known failures, including failures of related criteria, are listed in Tier 1.
24 by 24 is still small for people with tremors or limited dexterity. Targets that pass only through spacing are easy to miss.
Tier 3 · The golden path
Recommended best practice
The pattern that meets the floor, closes the gap, and avoids audit disputes. A recommendation, not a requirement.
Use 44 by 44 for primary and touch targets, and enlarge the clickable area of small icons with padding rather than relying on spacing.
W3C's Understanding document and techniques for SC 2.5.8 ↗ are informative: sufficient techniques show ways to pass, and documented failures show common ways to fail, but neither changes what the criterion requires.
How SC 2.5.8 maps to the WCAG 3 draft
From this site's reviewed map to the WCAG 3 editor's draft. It's an interpretation: W3C has not published a mapping.
No provision in the current draft covers target size.
From WCAG 2.2, section 5.1: “The main content of WCAG 2.2 is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are informative (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.”