Touch Target Sizes: 24, 44 and 48 Pixels, Who Says What

The four rules

Who	Size	Status	At reference size	Notes
WCAG 2.2, SC 2.5.8 Target Size (Minimum)	24 × 24 CSS px	Level AA	6.35 mm	Exceptions for spacing, an equivalent control, inline links, user agent controls and essential presentations
WCAG 2.1 and 2.2, SC 2.5.5 Target Size (Enhanced)	44 × 44 CSS px	Level AAA	11.64 mm	Exceptions for an equivalent control, inline links, user agent controls and essential presentations
Apple Human Interface Guidelines, iOS, iPadOS and watchOS	44 × 44 pt default, 28 × 28 pt minimum	Recommendation	not defined in the source	macOS: 28 × 28 pt default, 20 × 20 pt minimum; spacing described as being as important as size
Android accessibility guidance	48 × 48 dp	Recommendation	7.62 mm	Larger is better; smaller allowed for precise input such as a mouse or trackpad

Only the WCAG criteria are pass or fail rules for a web page, and only 2.5.8 sits at Level AA. Apple's and Android's figures are design guidance for native apps, and they are larger. A web interface that gives its controls 44 by 44 CSS px meets 2.5.5 at AAA and is in the range both platforms recommend; 48 px covers everything in the table.

CSS px, pt and dp

The three documents use three units, and the units are defined by three different bodies. CSS defines the pixel as an absolute length, 1 px = 1/96 of an inch, and the point as 1/72 of an inch, so 1 pt is 1.333 CSS px. A CSS pixel is not a device pixel: on a high-density screen the browser maps one CSS pixel to two or three hardware pixels, and the specification anchors the unit to a reference pixel that is about 0.26 mm at arm's length. Android's dp is defined the same way: one dp is one pixel on a 160 dpi screen, and the system scales it, so 48 dp is 7.62 mm at that baseline. Apple's point is its own layout unit, and the Human Interface Guidelines state the control sizes in points without a conversion, so the pt in Apple's table is not the CSS pt. The practical consequence: a web page cannot borrow Apple's or Android's numbers as CSS values and call them equivalent, but 44 and 48 CSS px are the right order of magnitude. In rem at a 16 px root, 24 px is 1.5rem, 44 px is 2.75rem and 48 px is 3rem; the PX to REM converter handles other root sizes.

What 2.5.8 requires

The criterion is one sentence: the size of the target for pointer inputs is at least 24 by 24 CSS pixels, except in five cases. The target is the area that responds to a click or tap, which is the element's box including padding, not the visible icon or the text. The exceptions:

Spacing. An undersized target passes if a circle 24 CSS px in diameter, centered on its bounding box, does not intersect another target or the circle of another undersized target. The Understanding document's example: 20 px buttons with 4 px between them pass; 20 px buttons touching each other fail.
Equivalent. The same function is available through another control on the same page that meets the size.
Inline. The target is in a sentence, or its size is otherwise set by the line height of text that is not a target.
User agent control. The size comes from the browser and the author has not changed it, as with a native checkbox left unstyled.
Essential. The particular presentation is essential or legally required.

The size is measured in CSS pixels regardless of zoom, so a page cannot pass by relying on the user to zoom in. The enhanced criterion 2.5.5 raises the figure to 44 by 44 CSS px at Level AAA and keeps the equivalent, inline, user agent and essential exceptions, but has no spacing exception: at AAA, small targets with gaps do not pass.

Making a small icon pass

Icons are drawn at 16, 20 or 24 px, and that is fine. The rule applies to the target, so the fix is padding, not a larger glyph. A 20 px icon inside a button with 12 px of padding on every side has a 44 by 44 target. For a row of such buttons, the padding also provides the spacing. In CSS:

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
}
.icon-btn svg { width: 20px; height: 20px; }

/* Minimum for 2.5.8 at AA when 44 px does not fit the layout */
.icon-btn.compact { min-width: 24px; min-height: 24px; padding: 2px; }

Technique C42 in the WCAG documentation uses exactly this: min-height and min-width on the target. The background of the button may stay transparent; the criterion measures the area that responds, not the area that is painted. For a round button the spacing circle is centered on its bounding box, and a 44 px circle made with the border radius generator is 44 px across in both directions. Keep the icon's color against the button background at a readable contrast too; the color contrast checker computes the ratio, which is a separate criterion from size.

Using the spacing exception

Where 24 px per target is not possible, the spacing exception lets smaller targets pass as long as their 24 px circles do not overlap another target. For square targets of side s laid out in a row, the circle extends (24 − s) ÷ 2 beyond each edge, so the gap between two undersized targets must be at least 24 − s. The table runs that arithmetic:

Target side	Circle overhang per edge	Gap needed between two such targets	Gap needed to a full-size target
12 px	6 px	12 px	6 px
16 px	4 px	8 px	4 px
18 px	3 px	6 px	3 px
20 px	2 px	4 px	2 px
22 px	1 px	2 px	1 px

The last column shows a gap to a neighbor that is already 24 px or larger, where only one circle has to clear the other target's box. Pagination links, toolbar glyphs and tag chips are the usual cases. The exception does not exist at AAA, so a design that aims for 44 px should give every control the full size instead.

Links in text

Links inside a paragraph are exempt in both criteria, because their height is the line height of the sentence around them. The exemption covers the sentence case only. A navigation menu, a footer link list or a tag cloud is a set of targets, not a sentence, and each link there needs a 24 px box or the spacing. A line height of 1.5 on 16 px text gives a 24 px line box, so a menu whose links are display: block with that line height meets the minimum on its own; padding of 10 px top and bottom on the same text brings each link to 44 px for the enhanced level.

What Apple and Android say

Apple's accessibility guidance in the Human Interface Guidelines gives a default and a minimum control size per platform. On iOS, iPadOS and watchOS the default is 44 by 44 points and the minimum 28 by 28; on macOS, where a pointer is the usual input, 28 by 28 and 20 by 20. It adds that spacing between controls is as important as size. Android's accessibility guidance asks for a touch target of at least 48 by 48 dp, says larger is better, and allows smaller targets for precise input such as a mouse or trackpad. Both documents are about native controls, but they describe the same thing WCAG does: the responsive area, not the drawing, and room between neighbors.

Checklist

Every button, link outside a sentence, and form control has a box of at least 24 by 24 CSS px, or 44 by 44 if you aim for AAA or match the app guidelines.
Icon buttons get their size from min-width, min-height and padding, not from a bigger icon.
Rows of small controls keep a gap of 24 px minus the control size between them.
Native controls that are left unstyled count as user agent controls; styled ones must meet the size.
Measure in CSS px in the browser's inspector at 100 percent zoom.

Frequently asked questions

What is the minimum touch target size?

For a website, 24 by 24 CSS pixels is the minimum that WCAG 2.2 requires at Level AA, with an exception for small targets that are spaced apart. The AAA level asks for 44 by 44. Apple sets 44 by 44 points as the default control size on iPhone and 28 by 28 as the minimum, and Android guidance asks for 48 by 48 dp. The units differ, but 48 CSS px is the largest of the three figures and a common choice for a design that wants to clear all of them.

Does a 16 px icon fail WCAG 2.2?

Only if the clickable area is 16 px. The criterion measures the target, which is the whole area that responds to a tap or click, not the drawing. Give the button padding so that its box is at least 24 by 24 CSS px, or 44 by 44 if you aim for the enhanced level, and the icon can stay small.

What is the spacing exception in 2.5.8?

A target smaller than 24 by 24 CSS px passes if a circle 24 px across, centered on its box, does not touch another target or the circle of another undersized target. In practice that means a row of 20 px buttons needs 4 px of space between them. The Understanding document shows exactly that case: 20 px buttons with 4 px gaps pass, with no gap they fail.

Do links inside a paragraph need to be 24 px tall?

No. Both target size criteria exempt a target that is in a sentence, where the line height of the surrounding text sets its size. A list of links laid out as a menu is not a sentence, though, so those links need the full size or the spacing.

Are CSS pixels, points and dp the same thing?

They are three units from three systems. CSS defines a pixel as 1/96 of an inch, so 24 px is 6.35 mm and 44 px is 11.6 mm at the reference size. Android defines a dp as one pixel on a 160 dpi screen, so 48 dp is 7.62 mm. Apple's point is the layout unit of its platforms, and its guidelines give control sizes in points without converting them, so the three numbers are not directly comparable, but they land in the same range.

Sources

Written by Tobias. Updated October 24, 2026.