Tamaño del área táctil: por qué 24px se queda corto y la regla de 44pt y 48dp
Un icono de 24px está bien, un sitio de 24px donde tocar no. Apple pide 44 pt, Android 48 dp, y los 24 px de WCAG son solo un mínimo. Cuatro arreglos, reconstruidos lado a lado, y el código para pasarle a tu desarrollador.
Un icono de 24 px está bien. Un sitio de 24 px donde tocar no. La gente usa la yema del dedo, a menudo con una sola mano y en movimiento, y un objetivo tan pequeño se falla o acierta al vecino. Dibuja el icono pequeño y el área táctil grande, y sigue los números de abajo.
Por qué 24 px es el número que todo el mundo dibuja
Los iconos se dibujan a 24. Material Symbols, por ejemplo, se entrega con 24 px como tamaño preferido. Así que el diseñador entrega un icono de 24 px, el desarrollador hace el botón del tamaño del icono, y el área táctil acaba del tamaño de un sello de correos.
La segunda fuente del número es la accesibilidad. WCAG 2.2 pide objetivos de puntero de al menos 24 por 24 píxeles CSS en el nivel AA. Eso es un mínimo, y viene con excepciones. Es fácil leer un suelo como una meta, y un diseño que se queda justo en el suelo pasa un verificador y aun así frustra a la gente.
Los cuatro números que debes conocer
| Fuente | Tamaño | Qué es |
|---|---|---|
| Apple, iOS y iPadOS | 44 por 44 pt | El tamaño de control por defecto |
| Apple, iOS y iPadOS | 28 por 28 pt | El tamaño de control más pequeño |
| Android, Material | 48 por 48 dp | El objetivo táctil recomendado |
| WCAG 2.2, 2.5.8 (AA) | 24 por 24 px CSS | El mínimo, con excepciones |
| WCAG 2.2, 2.5.5 (AAA) | 44 por 44 px CSS | El objetivo mejorado |
La guía de Apple es directa: un botón necesita una región táctil de al menos 44 por 44 puntos. Los puntos, los dp y los píxeles CSS son unidades independientes de la densidad, así que los diseñadores los usan juntos en una misma cuadrícula, como hace la imagen.
Una de las excepciones de WCAG merece conocerse. Se permiten dos objetivos pequeños si un círculo de 24 px centrado en cada uno no toca al otro objetivo. Es una regla de espaciado, y por eso una fila de iconos diminutos muy separados puede pasar mientras los mismos iconos apretados fallan.
Arreglo 1: rellena el icono hasta 44
Área táctil de 24 x 24
Área táctil de 44 x 44
El área táctil es el marco del botón, no la imagen que lleva dentro. Así que el arreglo es dimensionar el botón, no el icono: deja el glifo en 24 y da al botón al menos 44 por cada lado. Vale para todo control pequeño que va solo: la flecha de volver, los botones de compartir y más en una barra de herramientas, el botón de info en una fila, una estrella de favorito, una casilla, el más y el menos de un stepper.
Cuando dos van juntos, las cajas pueden tocarse. Está bien, porque cajas que se tocan no dejan hueco por el que fallar.
Arreglo 2: que toda la fila sea tocable
Solo el interruptor
Toda la fila
La fila ya está ahí, ya es legible y es mucho más grande que 44. Envuelve la etiqueta y el control en un solo elemento tocable para que toda la fila alterne. También ayuda a quien usa lector de pantalla o acceso por interruptor, porque hay un control con un nombre, no una etiqueta y un interruptor solitario.
Arreglo 3: dale al botón de cerrar un área real
16 x 16
44 x 44
Lo mismo vale para el botón de descartar de un banner, el botón de borrar dentro de un campo de búsqueda y el pequeño icono de quitar en una etiqueta. Dibuja la marca ligera y el área táctil pesada.
Arreglo 4: pon la acción principal abajo
Esquina superior
Abajo, ancho completo
Esta es una regla de diseño, no una estadística medida: lo importante es que dónde está un control importa tanto como lo grande que es. La acción principal va abajo y ancha. Cancelar y otras acciones secundarias pueden quedarse en la barra de arriba.
Cómo construirlo
En la web, dimensiona el botón, no el icono:
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }
/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }
En Android, la guía de Google es usar android:minWidth y android:minHeight para fijar un límite inferior cuando un control se dimensiona según su contenido:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="48dp"
android:minHeight="48dp" />
En iOS con SwiftUI, dale un frame al control y haz que todo el frame responda:
Button(action: close) { Image(systemName: "xmark") }
.frame(minWidth: 44, minHeight: 44)
.contentShape(Rectangle())
Los tres fragmentos son ejemplos nuestros de la regla, no código copiado de una plataforma.
Revisa tus propias pantallas en cinco minutos
- En tu archivo de diseño, dibuja todo lo tocable como una caja de 44 por 44, encima del icono. Cualquier caja que no quepa es un objetivo que hay que agrandar.
- Filas de lista, pestañas, chips y controles de paginación: ¿se puede tocar el elemento entero, o solo la parte con la palabra?
- Encuentra todos los controles de cerrar, borrar y quitar. Cada uno necesita sus propios 44.
- Encuentra la acción principal de cada pantalla. ¿Está donde está el pulgar?
- En un móvil real, con una mano, recorre el flujo principal. Todo lo que falles dos veces es demasiado pequeño.
FAQ
¿Cuál es el tamaño mínimo de un área táctil?
En iPhone, el valor por defecto de Apple es 44 por 44 puntos y el tamaño de control más pequeño es 28 por 28. En Android la recomendación es 48 por 48 dp. En la web, WCAG 2.2 fija un mínimo de 24 por 24 píxeles CSS en el nivel AA, con excepciones.
¿Qué tamaño debe tener un botón en el móvil?
Al menos 44 por 44 puntos en iOS y 48 por 48 dp en Android, tanto de ancho como de alto. Un botón principal de ancho completo en la parte inferior de la pantalla ya supera ampliamente ambos.
¿Tiene que medir 44 px el icono en sí?
No. El icono puede seguir en 24 px o menos. Lo que tiene que medir 44 es el área que responde al toque, que es el botón alrededor del icono. Añade relleno o un ancho y alto mínimos al botón.
¿Basta un área de 24 por 24 px para WCAG?
Para el nivel AA, sí, en la mayoría de los casos: el criterio pide al menos 24 por 24 píxeles CSS, con excepciones por espaciado, enlaces en línea y alguna más. El nivel mejorado, AAA, pide 44 por 44. Pasar AA es un mínimo de cumplimiento, no un buen tamaño para diseñar.
¿Cuál es la diferencia entre pt, dp y px?
Son todas unidades independientes de la densidad. El punto es la unidad de iOS, el dp la de Android y el píxel CSS la de la web. No son físicamente idénticas, pero los diseñadores las colocan en la misma cuadrícula, así que 44 pt y 48 dp se tratan como un tamaño más o menos igual.
¿Dónde debe ir el botón principal en un móvil?
En la parte inferior de la pantalla, a ancho completo, donde descansa el pulgar. Pon las acciones secundarias, como Cancelar, en la barra superior. Es una regla práctica de maquetación, no una cifra medida.
Fuentes
- Apple Human Interface Guidelines, Accessibility: tamaño de control por defecto en iOS e iPadOS de 44 por 44 puntos, tamaño mínimo de control de 28 por 28 puntos.
- Apple Human Interface Guidelines, Buttons: un botón necesita una región táctil de al menos 44 por 44 puntos.
- Android Accessibility Help, Touch target size: al menos 48dp de ancho y alto, y
android:minWidthyandroid:minHeightcomo límite inferior para controles dimensionados por contenido. - W3C, WCAG 2.2, 2.5.8 Target Size (Minimum): al menos 24 por 24 píxeles CSS en AA, incluida la excepción de espaciado, y 2.5.5 Target Size (Enhanced): 44 por 44 en AAA.
- Google Fonts, Material Symbols guide: 24 px como tamaño de icono preferido.
- Las pantallas de arriba son ejemplos nuestros. El consejo de colocación abajo es una regla de diseño, no una estadística.
- Más posts de una sola regla como este en UX Brainy.
Want every tap in your app to land the first time? Our team designs and builds mobile UI with the hit areas decided once, in the system.
Get Started
