Touch Target Size for Mobile Service Pages: What the Evidence Says
A tap-to-call link or menu icon that is too small turns a ready visitor into a frustrated one. Here is what WCAG 2.2, a thumb-input study, and Google's and Apple's guidelines say about touch target size, and how to apply it on a service site.
On a phone, a service website is operated by a thumb. The menu icon in the corner, the tap-to-call number, the checkbox that accepts the privacy notice: each one is a target the visitor has to hit, often one-handed, sometimes on a moving bus. When those targets are small or packed together, the visitor taps the wrong thing, backs out, and tries again. Some don’t try again.
Touch target size is the area of the screen that responds to a tap, which is not always the same as the icon or text you can see. This article sets the accessibility standard in WCAG 2.2 beside a controlled study of one-handed thumb use and the platform guidance from Google and Apple, and turns them into sizing rules a service site can follow.
Why small targets cost inquiries
Most of the important actions on a service site are a single tap: open the menu, call the office, submit the form. A missed tap on any of them stalls the visit at the exact point where the visitor was ready to act.
The problem is sharper for some people than for others. The W3C’s guidance on target size names hand tremors, spasticity, and quadriplegia among the conditions it addresses, and it also lists people using a phone with one hand, people on public transport, and people with large fingers. In other words, the reader with a disability and the reader holding a coffee meet the same obstacle.
What goes wrong when target size is left to chance
- Icon-only controls shrink to the icon. A 20-pixel menu icon with no padding leaves the tappable area at 20 pixels.
- Footer links stack too tightly. A column of small links with tight line spacing makes accidental taps on the neighbor likely.
- Tiny close buttons trap visitors. A cookie banner or chat popup with a small ”×” in the corner blocks the page until someone manages to hit it.
What WCAG 2.2 requires
The Web Content Accessibility Guidelines (WCAG) are the W3C’s standard for accessible web content. Version 2.2, which became a W3C Recommendation in October 2023, added Success Criterion 2.5.8, Target Size (Minimum), at Level AA, the conformance level most often used as a target.
The rule is that a target for pointer input, such as a tap or a click, must be at least 24 by 24 CSS pixels. A CSS pixel is a density-independent unit, not a physical pixel on the screen, and browsers are expected to keep it close to a standard reference size, so it looks roughly the same across devices. The criterion has five exceptions:
- Spacing: an undersized target passes if a 24-pixel circle centered on it does not overlap another target or another undersized target’s circle.
- Equivalent: another control on the same page performs the same function and meets the size.
- Inline: the target sits inside a sentence, such as a link in a paragraph.
- User agent control: the browser draws the control and the author has not resized it.
- Essential: the size is fundamental to the information, as with pins on a map.
The W3C’s explanatory document gives concrete cases. A row of 20-pixel icon buttons with 4 pixels of space between them passes through the spacing exception, while the same buttons with no gap fail. Menu items 24 pixels tall pass, and the same items at 18 pixels fail. The rule also applies to content that appears on top of the page, so the close button on a cookie banner counts.
The stricter level
A separate criterion, 2.5.5 Target Size (Enhanced), sets 44 by 44 CSS pixels at Level AAA, the highest conformance level. The W3C notes that the 24-pixel figure is a minimum and recommends larger targets when a control is used often, when its result is hard to undo, when it sits near the edge of the screen, or when it is part of a sequence of taps.
What the thumb research measured
Standards set a floor. Research helps explain where comfort lies above it.
In a study presented at MobileHCI 2006, Pekka Parhi, Amy Karlson, and Benjamin Bederson of the University of Maryland asked 20 right-handed participants to tap targets with the thumb of one hand while standing. The device was an HP iPAQ handheld with an 8.9 cm screen. The study had two phases: single taps on one target surrounded by distractors, similar to pressing a button, and sequences of taps on a numeric keypad, similar to entering a phone number.
The results followed a clear pattern:
- Speed kept improving as targets grew, even between the two largest sizes tested.
- Errors stopped differing significantly once single targets reached 9.6 mm, and once keypad keys reached 7.7 mm.
- Accuracy spread for 9.6 mm targets fit within a box of 9.1 by 8.9 mm for 95% of taps at any screen position.
- Comfort was lowest in three corners of the screen: top left, bottom left, and bottom right.
From these measurements, the authors recommended at least 9.2 mm for single targets and 9.6 mm for targets tapped in sequence.
| Source | Recommended size | Unit and status |
|---|---|---|
| WCAG 2.2, SC 2.5.8 | 24 × 24 | CSS pixels; Level AA requirement |
| WCAG 2.2, SC 2.5.5 | 44 × 44 | CSS pixels; Level AAA requirement |
| Android accessibility guidance | 48 × 48, with 8 dp spacing | Density-independent pixels (dp), about 9 mm |
| Apple Human Interface Guidelines (iOS) | 44 × 44 default, 28 × 28 minimum | Points (pt) |
| Parhi, Karlson & Bederson (2006) | 9.2 mm single taps, 9.6 mm sequences | Physical size; one-handed thumb study |
The platform guidance lands close to the research. Google’s Android accessibility help recommends touch targets of at least 48 by 48 dp, separated by 8 dp or more, and states that 48 dp works out to about 9 mm regardless of screen size. Apple’s guidelines list 44 by 44 points as the default control size on iOS and iPadOS, with 28 by 28 points as the minimum. The units differ and are not interchangeable, but each describes a target well above the WCAG floor.
What the study does not settle
The study’s scope is narrow by today’s standards. Twenty participants is a small sample, all of them right-handed, and the device was a 2006 handheld PDA rather than a modern phone. The authors themselves note that they tested only while standing, and that devices held differently might produce different results. The figures are best read as evidence that thumb accuracy improves up to roughly 9 to 10 mm, not as a precise specification for modern phones.
“Size the tappable area, not the icon. Visitors aim with a thumb, not a cursor.”
— Windware Studio Practice Note
Sizing targets on a service site
A useful mental model is a doorway. The sign on the door can be small, but the opening must fit the person walking through. In the same way, an icon can stay visually compact while its tappable area grows through padding. The comparison stops there: unlike a doorway, two targets that overlap create a new problem, so growth has to respect the neighbors.
Step 1: Inventory the targets that lead to inquiries
Start with the controls that carry the business: the menu toggle, header call-to-action, tap-to-call and email links, form fields, checkboxes and radio buttons, the submit button, and any banner or popup close button.
Step 2: Size them generously, and space the rest
- Primary actions and navigation reach about 44 to 48 CSS pixels in both dimensions.
- No standalone target falls below 24 by 24 CSS pixels unless it has enough clear space around it.
- Icon buttons use padding so the tappable area exceeds the visible icon. The W3C lists
min-heightandmin-widthon the target’s container as a sufficient technique. - Stacked footer and menu links have enough vertical spacing that their tappable areas do not touch.
- Custom-styled checkboxes and radio buttons keep a tappable area that includes their label.
- Close buttons on cookie banners, chat widgets, and modals meet the same size as primary actions.
Step 3: Mind the corners
The thumb study found the top-left and bottom corners least comfortable for one-handed use. That does not mean moving the menu icon, since visitors expect it in a familiar place, but it is a reason to make corner controls larger rather than smaller.
Step 4: Test on real phones
Browser developer tools can show each element’s box, but they cannot show how a thumb behaves. Check the key pages on a small phone, one-handed, and watch for accidental taps on neighbors.
Tradeoff to accept
Larger targets take space, and on a narrow screen space is limited. The W3C’s guidance notes that users with different disabilities can have different needs, and that some people with visual field loss prefer denser layouts. Spacing offers a middle path: the WCAG spacing exception and Android’s 8 dp gap both show that clear space around a target can do part of the work of size.
Practical takeaways for your next website
- Treat 24 by 24 CSS pixels as the floor, not the goal; WCAG 2.2 requires it at Level AA.
- Aim for 44 to 48 pixels on the controls that bring in inquiries, in line with WCAG’s AAA level and Google’s and Apple’s guidance.
- Grow the tappable area with padding, so icons can stay visually compact.
- Space small targets apart when they cannot grow, especially in footers and menus.
- Include overlays in the check, from cookie banners to chat widgets.
Ready to Discuss Your Website?
If you are planning a new website, a service redesign, or custom development for your business, we’re here to help shape the work.
- Explore Our Services: Web Design · Web Development · Website Redesign
- Start a Conversation: Tell us about your project via our Contact Form or email us directly at
[email protected].