Make Primary Mobile Buttons at Least 44 Pixels Square
WCAG 2.2, the web accessibility standard published by the W3C, sets 44 by 44 CSS pixels as the touch target size at its highest conformance level, AAA, in success criterion 2.5.5 (W3C WAI, 2023). For a business website, that is the right size for the buttons that matter most on a phone.
What the guideline covers
SC 2.5.5, Target Size (Enhanced), applies to the things a user taps: buttons, menu toggles, form controls, and icons. The reasoning is physical. A fingertip is far less precise than a mouse pointer, and small or crowded targets lead to missed taps and taps on the wrong control.
WCAG also sets a smaller minimum at the AA level. That smaller size is a compliance floor, not a target. The 44 pixel size is the level recommended for important controls.
What it means for a business website
On most small business sites, the controls that drive revenue on mobile are few: call, book, get a quote, add to cart, and open the menu. Many templates render header icons, popup close buttons, and small text buttons well under 44 pixels. They look fine on a desktop preview and fail under a thumb.
Heat maps help find these. On a mobile tap map, clusters of mis-taps around a small control, or taps on empty space next to it, point to a target that is too small or too close to its neighbors.
What to do
- Make the primary call, booking, quote, and menu controls at least 44 by 44 CSS pixels on mobile.
- Measure the tappable area, not just the visible icon. Padding can enlarge the target without making the icon bigger.
- Check popup close buttons and header icons, which are often the smallest controls on the page.
- Review mobile tap maps for mis-tap clusters after any layout change.
Sources
- Understanding SC 2.5.5 Target Size (Enhanced). W3C WAI, 2023.