Tap target size: 24px, 44pt or 48dp, and why they differ

Ask three sources how big a button should be and you get three answers. Designers quote 44, Android developers quote 48, and accessibility audits quote 24. All of them are right about different things. This post explains where each number comes from, which one to design to, and how to fix the targets that fail most often: icon buttons, inline and footer links, close buttons and crowded navigation.

The four numbers side by side

If your goal is WCAG 2.2 AA, 2.5.8 is the one you have to meet. The other three describe a better experience on touch screens. Material notes that 48dp works out at about 9mm on screen, whatever the screen size, and that iOS recommends 44.

WCAG 2.5.8: the 24-pixel minimum

The criterion says the target for pointer inputs must be at least 24 by 24 CSS pixels. In practice it must be possible to draw a solid 24×24 square, aligned with the page, completely inside the target. Rounded corners can leave too little room for that square, so a round icon button 24px across still counts as undersized.

Why so small? The W3C explains that most research on target size is about touch, but 2.5.8 covers mouse, trackpad and stylus too. Requiring touch-sized targets for every pointer would not have been appropriate, so after reviewing the average target size on high-traffic sites, the Working Group settled on 24 pixels. The size is also independent of zoom: you cannot pass by saying the target gets bigger when the user zooms in.

There are five exceptions:

• Spacing. An undersized target passes if it has enough clear space around it (see below).
• Equivalent. Another control on the same page does the same thing and meets the size.
• Inline. The target sits in a sentence, or its size is set by the line height of the text around it.
• User agent control. The browser draws the control, such as the calendar inside <input type="date">, and you haven't restyled it.
• Essential. The size or position carries meaning, such as pins on a map, or a law requires it.

How the spacing exception works

Draw a 24px circle centred on each undersized target. If no circle touches another target, or another undersized target's circle, the targets pass. The W3C's own example is a row of icon buttons: 20×20 buttons with 4px between them pass, while the same buttons with no gap fail. Buttons only 16px tall can pass when nothing sits above or below them, but fail when another row is stacked 1px away.

Note: The W3C points out that a very small target with no neighbours can technically pass. It encourages authors to meet the 24px size anyway, and to aim for the stricter 44px criterion on important controls.

Two more details catch teams out. Targets hidden behind something the user opened, such as a dropdown or a dialog, are exempt while they are covered. But the requirement applies to targets in any new content that appears on top, so the buttons on a cookie banner or a pop-up must meet it.

The touch sizes: WCAG AAA, Apple and Material

2.5.5 Target Size (Enhanced) is the AAA version: 44×44 CSS pixels, with the same exceptions except spacing. The W3C recommends going larger still when a control is used often, when its result cannot easily be undone, when it sits near the edge of the screen, or when it is part of a sequence of steps.

Apple's Human Interface Guidelines list a default control size of 44×44 points on iOS and iPadOS, and a minimum of 28×28 points. Material Design 3 says to consider touch targets of at least 48×48dp and pointer targets of at least 44×44dp. Android's developer guidance gives the same 48dp figure and adds that larger is even better.

For a website, treat 24 as the floor everywhere and 44 as the target for anything people tap on a phone: primary buttons, navigation, form controls and anything destructive. If your design system is built on Material, use 48. The gap between 44 and 48 matters far less than the gap between 16 and 24.

Fitts's law: why size and distance both matter

Fitts's law, from Paul Fitts's 1954 research, says the time it takes to reach a target depends on its size and its distance. Small, far-away targets are slow to hit and easy to miss. Nielsen Norman Group sums up the practical side: bigger targets are faster to hit and produce fewer errors, and closer targets are faster to reach.

Two lessons follow for web pages. First, make the whole visible control clickable. NN/g notes that a text label next to an icon only enlarges the target if the label is part of the clickable area. Second, keep frequent actions close to where the pointer or thumb already is. NN/g also notes that screen edges help mouse users, because the cursor stops there, but that advantage does not carry over to touch screens.

Spacing between targets

Size is only half of the problem. Touch screens guess which control is closest to a tap, so the W3C notes that enough spacing can work as well as a larger target. Every guideline gives a figure:

• WCAG 2.5.8: undersized targets need a clear 24px circle each, as described above.
• Apple: about 12 points of padding around elements with a bezel, and about 24 points around elements without one.
• Material: targets separated by 8dp or more.

Spacing is the fix to reach for when the design cannot grow, such as a toolbar of small icons. It is not a reason to keep tiny targets elsewhere.

Common failures and how to fix them

Icon buttons

A 16px or 20px icon with no padding is the most common failure: share, edit, delete, the cart icon. Keep the icon the size it is and grow the hit area around it. Material's own example is a 24dp icon inside a 48dp target. In CSS, padding counts towards the target and margin does not, so use something like .icon-button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }.

Inline and footer links

Links inside a sentence are exempt, so you don't need to make body text links 24px tall. But a stacked list of footer links, a row of "Terms · Privacy · Cookies" or a tag cloud is not a sentence. Give each link enough vertical padding to reach 24px, or space the rows so the 24px circles don't overlap.

Close buttons

The small "×" on a modal, cookie banner or chat widget is often 16px and pushed into a corner. Because it is new content on top of the page, WCAG applies to it. Give it a 44×44 hit area, keep it inside the panel rather than on the edge of the screen, and make sure it never sits right next to the main action.

Crowded navigation

Tabs, filter chips and desktop menus squeezed onto a phone screen fail on size, spacing or both. Below your layout breakpoint, collapse the menu behind a labelled control, keep only the one or two most important links visible, and make each item a full-width row at least 44px tall.

How to check your own site

1. Measure in the browser. Inspect each control in DevTools. The box model shows the size including padding, which is what WCAG measures.
2. Test with your thumb. Use the page on a real phone, one-handed. Anything you miss once, your visitors miss often.
3. Check spacing where size fails. For anything under 24px, picture the 24px circle and look for overlaps with neighbours.
4. Add it to your checklist. Target size is one of the WCAG 2.2 AA items on our accessibility checklist.

ProCurveUX does this measuring for you. It loads your page in a real browser at desktop and mobile sizes and runs two checks. "Target size below minimum" fails any control under 24×24 CSS pixels and warns below 44×44, skipping links inside sentences. "Tap targets too small for a thumb" measures every control on the first screen at a 390×844 phone size with touch on, and flags anything under 24×24, or under 44×44 with less than 8px of clear space around it. Each finding comes with a screenshot, the CSS selector and a fix. See a sample report.

Size is not the only way a tap goes wrong. A correctly sized button still gets missed if the page moves under the finger, which is what Cumulative Layout Shift measures.

Frequently asked questions