Plenty of visitors will reach your website on a phone. On a small screen, a finger is far less precise than a mouse pointer. Buttons and links that are too small or too close together get missed. Visitors end up tapping the wrong thing and leaving frustrated.
Web standards now set clear minimum sizes for these targets. Meeting them is not hard, and it makes a site easier for everyone to use. This post covers what the standard says and how to apply it in a real design. It also looks at the exceptions that catch designers out.
What a target is
A target is any area of the page that reacts when someone clicks or taps it. Buttons, menu items, icons and form controls are all targets. Links are targets too. The size that matters is the area that responds to the tap, not just the visible text or icon.
This difference is useful for designers. A small icon can still have a larger tappable area around it. Padding inside a link or button is part of its clickable area. That means you can often fix a problem without making the visible icon any bigger.
The WCAG minimum of 24 by 24 pixels
The Web Content Accessibility Guidelines are published by the W3C. Version 2.2 became a W3C Recommendation on 5 October 2023 and added a new rule on target size. Success criterion 2.5.8 sits at level AA. It says the size of the target for pointer inputs should be at least 24 by 24 CSS pixels.
The W3C page Understanding Target Size (Minimum) explains who this helps. It names people with hand tremors, limited dexterity or other fine motor difficulties. It also names people using touchscreens, people using a phone with one hand and people with large fingers. Anyone tapping a screen on a bumpy bus benefits too.
Spacing can stand in for size
A target smaller than 24 by 24 pixels can still pass if it has enough space around it. The test uses an imaginary circle 24 pixels across, centred on each small target. If that circle does not overlap another target or another small target’s circle, the spacing is enough. In plain terms, small controls need breathing room.
This is where many layouts fail. A row of social media icons or a set of tiny arrows can sit almost touching. Each one may look fine on its own. Packed together, they are easy to hit by mistake.
The exceptions
The minimum rule has a handful of exceptions. A small target can pass if the same function is available through another control on the page that meets the size. Links inside a sentence are excluded, because their size depends on the line height of the text. Controls sized by the browser are excluded too, as long as the designer has not changed their default size.
The last exception covers cases where a particular size is essential to the information. The W3C gives dense map pins and legally required form layouts as examples. These exceptions are narrow. Most buttons and menus on a business website will need to meet the size or the spacing test.
The stricter 44 pixel level
There is also a stricter rule, success criterion 2.5.5, at level AAA. It asks for targets of at least 44 by 44 CSS pixels. The W3C page Understanding Target Size (Enhanced) sets out similar exceptions, although spacing is not one of them. The guidance for the minimum rule suggests considering this stricter level for important links and controls.
Level AAA is a stricter level than AA. Even so, 44 pixels is a sensible target for the controls that matter most. Think of the main call to action, the menu button and the form submit button. These are the taps that decide whether a visitor becomes a customer.
Applying it in your design
Start by listing the controls on your key pages. Look closely at the header, the mobile menu, the footer and any forms. Then check the tappable area of each one in the browser’s developer tools. You are measuring the area that responds, so include any padding.
Some common fixes cover most problems. They rarely need a full redesign of the page. Try these first:
- Add padding to small links and icons so the tappable area grows
- Put more space between buttons that sit side by side
- Give each menu item its own full row on small screens
- Make checkboxes and radio buttons part of a larger clickable label
- Keep a clear gap between a Submit button and a Cancel button
The W3C’s own example puts the problem simply. A person with a hand tremor presses Cancel when they meant to press Submit, because the two buttons are too close. More space between them solves it. Small changes like this can make a real difference to completed forms.
Test on real phones
Measuring in developer tools is a good start, but it is no substitute for using a real phone. Try your site with one hand while standing up. Try it with your thumb rather than a fingertip. Ask someone who did not build the site to try it too.
Watch for places where people pause or tap twice. Those are often signs that a target is too small or too crowded. Our web design guide for new webmasters covers more of the basics worth checking before launch. Target size fits naturally into that kind of review.
Build it into regular updates
Some older websites were designed with a mouse in mind. Buttons were small and menus were tight because the pointer was precise. If your site has not been reviewed for a while, target size is a good reason to look again. Our post on how often you should update your web design discusses timing for a refresh.
If you are building a new site, set target sizes from the first draft. It is far easier to plan generous buttons than to squeeze them in later. Themes and page builders vary, so check the defaults before you rely on them. Our tips for creating a new WordPress website cover other early decisions that save rework.
When a designer gets these details right, it is worth telling them. Usability work is often invisible when it is done well. Our post on giving web designers positive reviews has ideas for recognising good work. Specific praise helps good habits stick.
Frequently asked questions
Does the 24 pixel rule apply to links in a paragraph?
No. Links inside a sentence are an exception, because their size is set by the line height of the text. Links that stand on their own, such as menu items, still need to meet the rule.
Can I keep a small icon if it has space around it?
Yes. A small target passes if a 24 pixel circle centred on it does not overlap another target or another small target’s circle. Adding padding to grow the tappable area also works.
Is 44 by 44 pixels required?
The 44 pixel size belongs to a level AAA criterion, which is the strictest level. The level AA minimum is 24 by 24 pixels. Many designers still use 44 pixels for the most important controls.
What is a CSS pixel?
It is the unit used in web design code, not a physical dot on the screen. The WCAG rules on target size are written in CSS pixels. That is why you measure targets in CSS pixels in the browser’s developer tools.