Target Size

Target size is the minimum area for any tappable or clickable element so users can activate it without error. WCAG 2.2 requires 24 by 24 CSS pixels at AA level with exceptions for spacing. The rule exists because fingers are imprecise, screens are small, and tiny hit areas create constant mistakes on mobile. Designers open Figma to pick icons and buttons. This concept forces them to think about real human motor control instead of just visual balance.

It is not the same as making every button huge. It is not a suggestion that you can ignore for aesthetic reasons. It is not limited to mobile apps. The common mistake is treating the visible icon as the target when the actual tappable area must be larger. Plenty of teams ship beautiful 16 pixel icons with zero padding then act shocked when usability data shows high error rates.

Shopify resized every primary action in their checkout flow in 2024 after analytics showed 14 percent of mobile users hitting the wrong button. They moved from 22 pixel targets to 48 pixel targets with proper spacing. Task completion jumped 21 percent. Figma makes this trivial. Draw a frame, measure it, or drop the Stark plugin on your file. The design phase checklist catches this before it reaches developers. The article states 70 percent of accessibility failures get decided in Figma. Target size leads that list.

Another concrete case is Notion's 2025 mobile navigation overhaul. Their original icon buttons sat at 20 pixels with tight packing. After WCAG 2.2 audits they added invisible padding to reach 44 pixels effective size. User testing with motor impaired participants showed 40 percent fewer misactivations. Apple pushed 44 points years ago in their HIG. Google matched it with 48 dips. WCAG finally made it a spec instead of a platform recommendation.

Use target size rules on every product that ships responsive or mobile interfaces. It earns its keep in forms, navigation, CTAs, and any high frequency action. Skip the strict 48 pixel recommendation on dense desktop data tables built for mouse users who rely on precision and keyboard shortcuts. The tradeoff is obvious. Dense power user interfaces lose clarity when every element gets ballooned. Choose density when your audience expects it and compensate with command palettes or bulk operations.

Teams that win here bake the rule into their component library once. They set auto layout frames at minimum 48 by 48 and stop solving the same problem on every screen. Run the design phase checklist before handoff. Verify in browser during the build phase because CSS can collapse your padding. Audit production monthly because marketing banners love to break the rule with tiny close buttons.

The overlap with visual hierarchy is total. Good scale compression and weight hierarchy usually deliver decent target size by default. A button that follows proper typography scale and contrast ratio rarely ends up too small. The article links both concepts because they solve the same human perception problem from different angles.

Stop treating target size as a compliance checkbox. It is respect for how actual humans hold phones in one hand on the subway. Ignore it and your analytics will show the cost even if nobody files an accessibility complaint.

Make every interactive element at least 24 by 24 CSS pixels or watch users tap the wrong thing and leave.