Skip to main content

Target size (minimum)

All interactive elements should have a minimum target size of at least 24 by 24 points.

Impact​

Small targets are harder to activate, especially for people with motor impairments. Ensure targets are large enough and have sufficient spacing to allow users to activate them easily. This reduces accidental activation and improves usability for everyone, including users operating devices with a single hand or on the go.

Description​

Interactive elements - such as buttons, links, icons, and checkboxes - must be large enough to be easily activated.

A minimum size of 24x24 points is required, except for the situations listed below.

Exceptions​

  • The small target (less than 24x24 points) is spaced far enough from others (i.e., a 24 points diameter circle centered on it does not intersect with any other target or circle).
  • The same function is available via another, larger control on the same screen.
  • The target is inline, such as a link or icon within a block of text.
  • The target size is defined by the platform (e.g. native iOS or Android components) and not modified by the developer.
  • A smaller size is essential or legally required.

Note:

  • Targets that allow values to be selected based on position - such as sliders, color pickers, or editable areas — are treated as a single target.
  • For inline targets, line-height should be interpreted perpendicular to the text flow. For example, in vertically displayed languages, line-height would be horizontal.

Examples​

A settings screen in Android app contains three icon-only buttons: Edit, Delete, and Share. Each button is 20x20 dp, but there is at least 4 dp of spacing around each one. A 24 dp circular area, centered on each button, does not overlap with the area of another.

Failures​

A tab bar in iOS app contains five icon-only buttons for different sections (e.g. Home, Search, Favorites, Bookings, Profile). Each icon is 20x20 pt and placed directly next to each other, with no extra spacing.

Five targets are positioned in an app on an Android device. For each target, the width, height and spacing are calculated to determine whether they pass or fail the target size requirements.Five targets are positioned in an app on an Android device. For each target, the width, height and spacing are calculated to determine whether they pass or fail the target size requirements.

Testing​

Procedure​

On Android, density-independent pixels (dp) is a unit based on the physical density of the screen, used for consistent scaling across different screen resolutions.

To determine the size of an element in the dp unit, please follow the steps below.

Step 1: Find device model​

  1. Open the Settings app.
  2. Navigate to About phone or About device.
  3. Find your product name, e.g. Galaxy M12.

Step 2: Find display properties​

  1. Search the Web for documentation about your device, e.g. by searching for Galaxy M12 screen size.
  2. Find the width, height, and screen size at a reputable source, such as the manufacturer.
  3. Calculate the DPI using the following formula: √(width² + height²) ÷ size. (Calculator)

Example:

PropertyValue
Width720
Height1600
Size6.5"
DPI270

Step 3: Find element size in pixels​

  1. Take a screenshot, share it to your computer.
  2. Open the screenshot in an image editor.
  3. Use the select tool to draw a rectangle around the element.
  4. Read the dimensions of your selection, e.g. 50x50 (width x height).

Step 4: Calculate element size in DP​

The formula is: Pixels ÷ (DPI ÷ 160) (Formula source)

Example: 50 ÷ (270 ÷ 160) ≈ 36 DP

Expected result​

  • If the element has a target size of at least 24x24 points, it passes.
  • If the element has a target size that is less than 24x24 points and none of the exceptions apply, it fails.

Solutions​

Resources​