Target Size (Minimum)

In brief

Tiny controls are hard to hit. People with tremors, large fingers, limited dexterity or low vision, and anyone using a phone on a bus, will tap the wrong thing, or miss altogether. When targets are close together, errors multiply.

This criterion, new in WCAG 2.2, requires that the size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where there is enough spacing, an equivalent control exists, the target is inline in text, its size is controlled by the browser, or the size is essential.

What does it cover?

• The rule: Each pointer target is at least 24 by 24 CSS pixels. CSS pixels do not change with browser zoom.
• Spacing exception: Smaller targets are allowed if a circle of 24 CSS pixels in diameter, centred on each target, does not overlap another target or another small target's circle.
• Equivalent: The same function is available through a different control on the same page that does meet the size requirement.
• Inline: A target inside a sentence or block of text, or whose size is limited by the line height of non-target text, is exempt. Links in a paragraph are the main example.
• User agent control: Size controlled by the browser and not changed by the author, such as a native checkbox with default styling.
• Essential: A particular presentation is essential to the information, or legally required.
• What counts as a target: The area that accepts the pointer input, including padding that is part of the control. A slider or a text area is one target.
• Out of scope: The enhanced Level AAA target size (2.5.5) asks for more. Dragging is 2.5.7. Spacing between lines of text is 1.4.12.

Who does it affect?

People with tremors, limited dexterity or motor disabilities. People with larger fingers, and people who use touch screens on the move. People with low vision who cannot see small targets clearly. People who use a mouse, trackball, head pointer or eye-gaze system with limited precision.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Targets that are easy to hit are part of "operable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 2.5.8 by reference and turns it into separate clauses for each kind of ICT.

Because this criterion is new, check clauses 10 and 11 of V4.1.1 for the rows that apply to documents and software. Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: Criterion 2.5.8 is new in WCAG 2.2, so it is not part of EN 301 549 V3.2.1, which is based on WCAG 2.1. It appears in EN 301 549 V4.1.1 (September 2026), the first version prepared specifically for the EAA. V4.1.1 has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. It is a Level AA criterion.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. An icon button that is too small

Give the control, or a container around it, a min-width and min-height of 24 CSS pixels (C42).

.icon-btn { width: 16px; height: 16px; padding: 0; }

.icon-btn { min-width: 24px; min-height: 24px; padding: 4px; }
/* For primary actions, 44 by 44 is more comfortable */

2. Small targets that are well spaced

A target smaller than 24 pixels can pass if a 24 pixel circle centred on it does not touch another target or circle.

.chip { width: 18px; height: 18px; margin: 0; } /* touching neighbours */

.chip { width: 18px; height: 18px; margin: 3px; } /* 24 px circles do not overlap */

3. Closely packed icons

A row of small icons with no space between them fails both size and spacing.

.toolbar button { width: 20px; height: 20px; margin: 0; }

.toolbar button { min-width: 32px; min-height: 32px; margin: 0 2px; }

4. Checkboxes and radio buttons

A native control with default styling is controlled by the browser. A custom, smaller one needs its own size, and a label that is also clickable helps.

.box { width: 14px; height: 14px; }

.box { width: 24px; height: 24px; }
<label><input type="checkbox"> Subscribe to updates</label>

5. Links in text are exempt, links in lists are not

A link inside a sentence is exempt. A list of links, such as a footer menu, is not inline, so each link needs the minimum size or spacing.

.footer a { display: inline; line-height: 1; }

.footer a { display: inline-block; min-height: 24px; padding-block: 4px; }

6. An equivalent larger control

If a small control has an equivalent on the same page that is large enough, it can stay small.

<a class="tiny" href="/x">×</a>

<a class="tiny" href="/x">×</a>
<!-- The same action is also available as a full-size "Remove" button on this page -->

Code examples for mobile

WCAG 2.2 sets a minimum of 24 by 24 CSS pixels. The platform guidelines ask for more: about 44 by 44 points on iOS and 48 by 48 dp on Android. Aim for the larger size on primary actions.

iOS (SwiftUI)

import SwiftUI

struct CloseButton: View {
    var body: some View {
        Button { dismiss() } label: {
            Image(systemName: "xmark")
                // The icon can stay small, the tappable area should not
                .font(.system(size: 14))
                .frame(minWidth: 44, minHeight: 44)
                .contentShape(Rectangle())
        }
        .accessibilityLabel("Close")
    }
}

Android (Jetpack Compose)

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable

@Composable
fun CloseButton(onClose: () -> Unit) {
    // IconButton keeps a 48 dp touch target around the small icon
    IconButton(onClick = onClose) {
        Icon(Icons.Filled.Close, contentDescription = "Close")
    }
}

How to test

• Measure the targets: Use the browser developer tools to inspect the clickable area of buttons, icons, checkboxes, tabs, pagination and close controls. Are they at least 24 by 24 CSS pixels?
• Apply the spacing test: For smaller targets, imagine a 24 pixel circle centred on each. Does it touch a neighbouring target or its circle?
• Find the exceptions: Is a small target inline in text, controlled by the browser, equivalent to a larger control, or essential?
• Check dense areas: Toolbars, tables, calendars, pagination, tag lists and footers are where targets are most often too small.
• Check at different sizes: Test on a phone and at a narrow width. Layouts that shrink can make targets smaller.
• Check mobile: Use the platform accessibility inspector to measure touch targets.
• Use a checker as a starting point: Automated tools can measure sizes and spacing, but the exceptions need a person to decide.

Common mistakes

• Icon buttons with no padding: A 16 pixel icon is also a 16 pixel target.
• Tightly packed controls: Small targets with no gaps.
• Small close and dismiss buttons: Often 12 or 16 pixels.
• Tiny checkboxes and radios with no clickable label: Make the label part of the target.
• Lists of links with a tight line height: They are not inline text.
• Relying on the browser exception for custom controls: It applies only to unmodified native controls.
• Shrinking targets on mobile layouts: Mobile is where they matter most.
• Treating 24 pixels as the goal: It is the minimum. Aim for 44 pixels on important controls.

Sources

• Understanding SC 2.5.8: Target Size (Minimum) (W3C), opens in a new tab
• C42: Using min-height and min-width on target container to ensure sufficient target spacing (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.