Botones pequeños: amplía la zona táctil sin agrandar el icono

Hay barras de herramientas llenas de iconos de 20 píxeles que parecen limpias en Figma y se vuelven un pequeño campo de minas al usarlas con el pulgar. El problema no suele estar en el dibujo del icono. Está en el rectángulo invisible que responde al toque.

Separar esas dos medidas permite conservar una interfaz compacta sin obligar a acertar en una diana diminuta. Parece un detalle menor, hasta que intentas cerrar un aviso en un autobús en marcha.

El icono no mide el botón

Un icono puede medir 20 × 20 y vivir dentro de un botón de 44 × 44. El espacio interior amplía la zona activa, mientras el símbolo mantiene su peso visual. Apple recomienda, como regla general, una región de pulsación de al menos 44 × 44 puntos para sus botones; también pide espacio suficiente alrededor y un estado visible al pulsar, según sus Human Interface Guidelines.

Conviene aplicar el tamaño al elemento interactivo real, no a un parche transparente colocado encima. Así coinciden la pulsación, el foco de teclado y los estados de hover y pressed. En una fila densa, el hueco entre botones cuenta tanto como su caja.

24 CSS px y 44 pt responden a preguntas distintas

WCAG 2.2 fija para la web un mínimo de 24 × 24 píxeles CSS en el criterio AA 2.5.8, con excepciones para controles pequeños que tengan separación suficiente, enlaces dentro de texto y algunos casos esenciales. La explicación completa está en la guía de W3C sobre tamaño de objetivo.

Ese mínimo de conformidad no convierte 24 CSS px y 44 pt en dos versiones de la misma medida. Apple describe una recomendación para sus plataformas; WCAG marca un suelo para contenido web. En el archivo de diseño, crea un token de zona activa para cada plataforma y deja el tamaño del icono en otro token. Mezclarlos acaba llenando el sistema de excepciones.

Revisa zonas activas, no sólo componentes

Antes de entregar, muestra en el prototipo las cajas que realmente se pueden pulsar y prueba tres lugares: barras con varios iconos, controles pegados a una esquina y acciones destructivas junto a una acción segura. Si un objetivo queda por debajo del mínimo web, comprueba la separación con la técnica C42 de W3C; usar min-width y min-height en el contenedor suele resolverlo sin agrandar el símbolo.

Haz también una pasada en un móvil real, con una mano y el pulgar. Sobre el lienzo todo puede quedar impecable; el dedo revela enseguida qué controles sólo eran cómodos en teoría.