← Back to the lab

Fat Finger

A free game about tap target size: flag the buttons, links and icons under the 24, 44 or 48 px minimum, then see their real sizes and why they fail.

What it does

  • Five screens: a photo viewer, a cart, a carousel, a message composer and a table
  • Controls drawn with their real hit area, so a small icon with padding is not a small target
  • Three minimums: 24 px (WCAG 2.2 AA), 44 px (Apple and WCAG AAA) and 48 px (Material)
  • The real size of every control after each round, with the reason behind each miss

FAQ

What is the minimum touch target size?

WCAG 2.2 AA (criterion 2.5.8) asks for at least 24 by 24 CSS pixels. Apple recommends 44 by 44 points and Material Design 48 by 48 dp, and WCAG AAA (2.5.5) also uses 44.

Can an icon be small if its tap area is big?

Yes. The size that counts is the area that reacts to a tap. Padding around a 20 px icon can make a 44 px target without changing how it looks.

Do both width and height count?

Yes. A target has to reach the minimum on both sides, so a wide but short button, such as 56 by 40, still fails a 44 px minimum.

📖 Touch target size: 24, 44 and 48 px explained (WCAG 2.5.8)

More free tools

  • Palette Generator - Pick a hue, choose a color harmony, and get a full accessible palette with live AA/AAA contrast checking.
  • Contrast Checker - Paste two colors, see the WCAG ratio, and fix a failing pair with a single click.
  • Image → Palette - Drop in an image, pull out its dominant colors, and see which pairs are safe to use together.
  • Color Blindness Simulator - See a palette through protanopia, deuteranopia, tritanopia and achromatopsia - and catch colors that collapse.
  • Type Scale Generator - Pick a base size and a ratio, get a full type scale with live preview, fluid clamp() and tokens to copy.
  • Gradient & Mesh Generator - Linear, radial, conic or blobby mesh gradients - drag the points, shuffle the colors, copy the CSS.
  • Component States Explorer - Buttons, inputs and cards in every state - hover, focus, pressed, disabled, error - side by side with contrast checks.
  • Design Token Converter - Paste W3C tokens, Tokens Studio or Figma Variables JSON and get CSS, SCSS, Tailwind v4 or SwiftUI - aliases included.
  • Motion & Easing Playground - Drag cubic-bezier handles, tune a real spring, watch them race, and export motion tokens as CSS linear(), Framer Motion or SwiftUI.
  • Auto-Trim - Drop in PNGs and get them back without the empty transparent edges - in bulk, in your browser, as one ZIP.
  • Text Expansion Stress Test - See how a UI breaks in German, Spanish or pseudo-localized text - and which CSS fixes make it survive translation.
  • Mini A11y Audit - Paste HTML and find missing alt text and labels, unnamed buttons, heading jumps, tiny tap targets and low contrast.
  • Multi-size Preview - One message laid out across social and display-ad sizes, with platform safe zones and a draggable focal point. Export every PNG.
  • Mobile Preview - Open any website inside iPhone, Pixel, Galaxy and iPad frames at their real viewport sizes. Rotate it or compare four devices at once.
  • Hue Hunt - Match five colors by eye with hue, saturation and lightness. Scored by perceptual distance, with a daily challenge to share.
  • Pass or Fail - Twenty quick rounds: does this text pass WCAG AA contrast? Trust your eye, then see the real ratios.
  • Optical Eye - Fix seven layout flaws by eye: center a play icon, even out padding, size a circle against a square.
  • State Panic - Components fall with something happening to them. Pick the right UI state before they hit the floor.
  • Easing Golf - Mini golf with animation curves: shape a cubic-bezier so the puck hits every flag on time. Par is three.
  • Contrast Survival - The background keeps shifting. Hold the text lightness so it passes WCAG AA, then AAA, as long as you can.
  • Token Rush - Swap hard-coded values for the right design tokens, fast. Then flip the theme and see what breaks.
  • Kern Me - Space six words by eye. Each has one letter pair too tight or too loose; the answer is the font designer’s own kerning.
  • Tab Order - Tap a screen’s buttons, links and fields in the order the Tab key should visit them. Five screens, one WCAG rule.
  • Snap to Grid - Five components with spacing nudged off the scale. Snap every padding and gap back to its 4 and 8 px step before the clock runs out.
  • Weight Watcher - A sample hides its font weight, size or line height. Slide yours until the two match, six rounds, with the real value after each.
  • Radius Match - A rounded box inside a rounded box. Slide the inner radius until the gap is even. The rule: outer radius minus padding.
  • Ramp Repair - Nine shades of one color, light to dark, and one is broken. Spot it before your lives run out.
  • Name That Component - A tooltip or a popover? A tab or a segmented control? Name ten UI components from a drawing.