Separate visible shape from hit region
For a small icon such as a pause button, let the clickable container extend beyond the painted symbol. Keep neighboring actions far enough apart that a finger does not activate both ambiguously. In a canvas game, draw the object and calculate its hit region from the same layout data; duplicating coordinates in separate code paths invites drift.
WCAG 2.2 Success Criterion 2.5.8 uses 24 by 24 CSS pixels as a minimum with defined exceptions, including spacing and equivalent controls. Evaluate it as an accessibility requirement, not a design ceiling: a moving target or primary action may need more area. Do not rely on color or a subtle border alone to show where touch registers.
Check hit testing at real screen sizes
Test taps near each edge and corner, between adjacent controls and while the play surface scales. Confirm that the visible control, DOM hit region and game-world coordinate refer to the same action. For tiny moving objects, consider forgiving hit testing that is larger than the art while still preserving meaningful separation from hazards.
Test different viewport sizes with touch. A mouse can land where a finger cannot. Convert pointer positions into the surface’s coordinate system and verify after resizing. W3C’s explanation documents the criterion and exceptions.
Questions about game touch target size
Should every game target be at least 24 pixels?
WCAG 2.2 Success Criterion 2.5.8 defines a 24 by 24 CSS pixel minimum with exceptions. A game should evaluate the criterion and choose larger hit areas when its context needs them.
Can a hit area be larger than its artwork?
Yes. A padded interactive region can make a small icon easier to activate, provided overlapping controls still have clear, predictable outcomes.