# Touch target

> A touch target is the area that responds to a tap, which can be larger than the control people see. Apple gives 44 by 44 points as the default control size on iPhone, and Material asks for at least 48 by 48 dp.

Page: https://www.appetiteui.com/academy/glossary/touch-target. What is a touch target? iOS and Android sizes. Also called Tap target, Hit area.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Hit region, 44 by 44 pt by default, 28 by 28 pt at the smallest | Touch target, 48 by 48 dp minimum | platform/min-touch-target |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |

## In practice

A small icon can keep its size on screen while its target grows to the minimum around it. Targets that are too small are the commonest reason a mobile screen fails an accessibility review.

In Appetite UI the minimum is one Platform variable, platform/min-touch-target, so a component reads 44 on iOS and 48 on Android from the mode of its frame.

## Questions

### What is the minimum touch target size on iOS and Android?

Design to 44 by 44 points on iOS and 48 by 48 dp on Android. Apple’s accessibility guidance lists 44 by 44 points as the default control size and 28 by 28 as the smallest; WCAG 2.2 asks for at least 24 by 24 CSS pixels at Level AA.

### Can a control look smaller than its touch target?

Yes. The hit area can extend past what is drawn, which is how a 24 point icon stays tappable: the icon keeps its size and the target around it meets the minimum.

## Sources

1. [Apple Human Interface Guidelines: Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility)
2. [Apple Human Interface Guidelines: Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons)
3. [Android Accessibility Help: Touch target size](https://support.google.com/accessibility/android/answer/7101858)
4. [W3C: Understanding Success Criterion 2.5.8, Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)

## Related

- Screens: [Dashboard screens](https://www.appetiteui.com/screens/patterns/dashboard)
- Screens: [Sign in and sign up screens](https://www.appetiteui.com/screens/patterns/sign-in)
- Screens: [Profile screens](https://www.appetiteui.com/screens/patterns/profile)
- Screens: [Chat screens](https://www.appetiteui.com/screens/patterns/chat)
- Screens: [Detail screens](https://www.appetiteui.com/screens/patterns/detail)
- Docs: [Dimensions](https://www.appetiteui.com/docs/dimensions)
- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Article: [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android)
- Glossary: [Safe area](https://www.appetiteui.com/academy/glossary/safe-area)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)
- Glossary: [Spacing scale](https://www.appetiteui.com/academy/glossary/spacing-scale)