Yubi overlays a web page with a finger or thumb touch target, useful for testing how touchable page elements are. To install, simply drag Yubi to your bookmarks.

Yubi will launch a dialog to select thumb or finger touch size. The inner circle represents touch target size with an outer halo target boundary.

To remove Yubi from a page, just click the bookmarklet again.

Yubi works on modern desktop and mobile browsers but touch size may be inaccurate on mobile and tablet browsers that rely on a viewport meta tag to set viewport scale but with no viewport meta tag present. Yubi will warn you if this is the case.

Due to CSS limitations, touch size may be slightly off on some devices (see limitations below).

Touch sizes are based on Nokia recommendations: for thumbs, an 8mm touch target with 2mm boundary and for fingers, a 7mm touch target and 1 mm boundary.

There are numerous usability studies with varying touch size recommendations but I prefer Nokia’s as its finger touch sizes are close to what Apple recommends in their iOS Human Interface Guidelines but Nokia also includes thumb sizes. We use our thumbs with touch devices, a lot.

In a prefect would, I would set the touch size using millimetres but unfortunately this doesn’t work so I have to convert millimetres to pixels. To do this, I calculated millimetre to pixel conversions for a number of popular devices when viewport width is set to device-width (device independent pixels):

Based on this, I selected safe pixel sizes: for thumbs, a 52 pixel target with 13 pixel boundary and for fingers, a 45 pixel target and 6 pixel boundary. These sizes will be a little large on devices like the iPad but it’s better to have too large rather than too small touch targets.