Tap target size is the area a finger can hit to press a button or link. For a mobile website, WCAG 2.2 sets a floor of 24 by 24 CSS pixels at level AA, and recommends 44 by 44 at the strictest level, AAA. Google's Android guidance asks for 48 by 48 dp, about 9 mm. The spacing exception is what most audits turn on.
What is the minimum tap target size for a mobile website?
The minimum is 24 by 24 CSS pixels. That is success criterion 2.5.8, Target Size (Minimum), at level AA. The W3C defines it as a solid 24 by 24 square that fits inside the clickable area. The bigger 44 by 44 pixel figure is criterion 2.5.5, which sits at the stricter AAA level.
So there are two numbers, and they answer different questions. 24 is the line between pass and fail at AA. 44 is the larger size the W3C asks for at AAA. I'd treat the first as the floor for your audit and the second as the size to design for on phones.
The exception that decides most audits: spacing
A button smaller than 24 pixels can still pass if it has enough empty room around it. The W3C's rule: imagine a circle 24 pixels across centred on the small target. If that circle touches no other target, and no circle from another undersized target, the small one passes.
This is the part the usual guides skim past, and it changes how you fix things. By our arithmetic, two 16-pixel icons need about 8 pixels of gap between them for their circles to clear each other. A row of icons packed edge to edge fails every time. The same row with a little air passes without making a single icon bigger. You pick: grow the target, or add space.
Google's Android advice points the same way. It recommends targets of at least 48 by 48 dp, roughly 9 mm whatever the screen size, separated by 8 dp or more. Size and spacing are two ways to buy the same thing.
Which targets are exempt?
Five cases pass without meeting the size or the spacing test, according to the W3C:
- Another control on the same page does the same job and is big enough.
- The target sits inside a sentence or is limited by the line height of surrounding text. Links in running paragraphs are the usual case.
- The browser sets the size and you haven't changed it, such as a default checkbox.
- A specific presentation is essential to the information, or required by law.
- The spacing exception described above.
Standalone footer links, tag clouds, pagination numbers, banner close buttons and icon-only toolbars are not on that list, so they have to meet the size or the spacing test.
Why 24 is not enough for real fingers
The W3C's own explanation of the stricter 44 pixel rule is blunt: some people cannot tap small objects. Touch is less precise than a mouse, and a finger can hide the exact spot being touched. It lists who benefits: people with hand tremors or limited fine motor control, people using one hand, people on a moving bus or train, people with large fingers, and people with low vision, who can see a big target more easily.
Notice how many of those are not a permanent disability. Anyone holding a phone in one hand while carrying a bag is on that list for a minute. That is why a pass at 24 pixels is a minimum and not a design goal.
How to fix small targets without redesigning the page
Enlarge the hit area, not the picture. Padding, or a minimum width and height on the link or button, makes the clickable zone bigger while the icon stays the same size. For an icon-only control, 44 by 44 pixels with the icon centred looks the same as before and is far easier to hit.
Then check the neighbours. Two 44-pixel buttons with no gap between them are fine. A 44-pixel button squeezed against a 16-pixel link is where the wrong thing gets tapped. Walk through the header menu, the footer, the cookie banner and any form with a small "show password" or "remove" control, on a real phone.
If your site was built without this in mind, it is a design-system fix, one change in the button and icon components, not a page-by-page cleanup. Our digital design work covers exactly that: interface components that stay comfortable at thumb size. onlyspell is a digital agency, and small sizing rules like this one are cheap to fix early and tedious to fix after launch. You can see the kind of sites we build in our projects.
If you'd like someone to look at your mobile pages, talk to us about your project.
Frequently asked questions
Is 44 pixels required by WCAG 2.2?
No. The 44 by 44 CSS pixel rule is criterion 2.5.5, which is level AAA, the strictest level and not usually the target of an audit. The level AA requirement in WCAG 2.2 is 24 by 24 CSS pixels, with exceptions for spacing, inline links and a few other cases.
Do text links in a paragraph need to be 24 pixels tall?
No. A target inside a sentence, or one whose height is limited by the line height of the surrounding text, is exempt from the minimum size rule. Links that stand alone, such as a footer menu or a row of tags, are not exempt.
Is a bigger icon the only fix for a small button?
No. You can leave the icon alone and enlarge its clickable area with padding, or keep a small target and give it enough space around it. Under WCAG 2.2, a small target passes when a 24 pixel circle centred on it touches no other target.
Sources
If you still need additional help in developing and designing your website, our magic is here to help. Contact us today, and our wizards will help you immediately with your digital marketing needs!
