El tamaño de los botones de la web de tu despacho tiene ahora un mínimo técnico: la WCAG 2.2 lo fija en 24 por 24 píxeles CSS, salvo excepciones concretas. No es un capricho de diseño: un botón de contacto o un icono de redes sociales demasiado pequeño multiplica los clics fallidos en el móvil, donde ya se consulta la mayoría del tráfico de un despacho. Si gestionas la web desde el panel de tu plantilla o has encargado un rediseño, conviene saber qué mide un botón conforme, qué casos se libran del mínimo y cómo comprobarlo sin abrir el código.
Un botón cumple la WCAG 2.2 si mide al menos 24 por 24 píxeles CSS o si, siendo más pequeño, queda rodeado de 24 píxeles libres hasta el siguiente elemento clicable. Por debajo de eso, el Criterio de Éxito 2.5.8 se considera incumplido, salvo que el botón vaya dentro de una frase o tenga un equivalente más grande en la misma página.
El tamaño de los botones que fija la WCAG
La WCAG 2.2 incorporó en 2023 un criterio que no existía antes: el Criterio de Éxito 2.5.8, Tamaño del Objetivo (Mínimo), de nivel AA. Exige que cualquier elemento interactivo —botón, icono, enlace que no vaya dentro de un párrafo— mida al menos 24 por 24 píxeles CSS en su área clicable, no en lo que se ve dibujado encima.
El criterio no salió de una cifra al azar: el W3C documentó tasas de error más altas en personas con temblor, artritis o control motor reducido cuando los objetivos bajan de ese tamaño. Por debajo de 24 píxeles, y sin ninguna excepción, la web incumple el nivel AA, el mismo que ya exige buena parte de la normativa de accesibilidad europea.
Las excepciones que libran a un botón pequeño
El criterio admite un botón de menos de 24 píxeles en cinco situaciones. La más habitual en una web de despacho es el espaciado: si alrededor del botón pequeño cabe un círculo imaginario de 24 píxeles sin tocar otro elemento clicable, el diseño cumple igual.
Las otras cuatro son más estrechas: equivalente (el mismo enlace existe en otro punto con tamaño suficiente), en línea (un enlace dentro de una frase, cuyo tamaño lo marca la línea de texto), control del agente de usuario (lo dibuja el navegador, no el despacho) y esencial (una norma obliga a esa presentación exacta).
Un objetivo táctil es toda la zona de la pantalla que responde al clic o al toque de un elemento interactivo, y puede ser mayor que lo que se ve dibujado: un icono de 16 píxeles con suficiente relleno alrededor tiene un objetivo táctil de 24 píxeles o más.
Un objetivo táctil más grande para el pulgar
El mínimo de 24 píxeles no salió de una intuición de diseño: lo precedió investigación con usuarios reales. Un estudio de la Universidad de Maryland con usuarios sosteniendo el móvil a una mano y pulsando con el pulgar encontró que los objetivos necesitan al menos 9,2 milímetros para tareas puntuales, como pulsar un botón, y 9,6 milímetros para tareas en serie, como rellenar varios campos seguidos.
Ese dato explica por qué un botón que se ve bien en el monitor falla en el móvil del cliente: un ratón apunta con precisión de un píxel, pero un pulgar cubre una zona entera de la pantalla y tapa lo que pulsa. El botón de «Pedir cita» o el icono de WhatsApp suelen diseñarse mirando la maqueta de escritorio y se encogen al pasar al móvil, por donde entra la mayoría de las visitas desde el buscador.
Lo que marcan Apple y Google frente al mínimo
El Criterio 2.5.8 fija un suelo, no un objetivo cómodo. Apple recomienda en sus guías de interfaz un área táctil mínima de 44 por 44 puntos, unos 9,5 milímetros. Google pide 48 por 48 dp en Android, unos 9 milímetros, como base de su sistema de diseño.
Las dos cifras quedan por encima de los 24 píxeles de la WCAG: el criterio de accesibilidad marca el mínimo legal que evita la discriminación, mientras las guías de plataforma apuntan a la comodidad general. Diseñar al límite de 24 píxeles cumple la norma, pero sigue por debajo de lo que Apple y Google consideran cómodo para cualquier usuario, no solo para quien tiene una limitación motora.
Errores de botón pequeño en despachos de abogados
Los mismos fallos se repiten en webs construidas con plantillas genéricas o heredadas de un diseñador que priorizó la estética sobre la usabilidad:
- Iconos de redes sociales en el pie de página, apretados entre ellos, donde el círculo de 24 píxeles de uno invade el del siguiente.
- El aspa de cerrar el banner de cookies o el aviso de newsletter, dibujada a 12 o 16 píxeles sin relleno adicional alrededor.
- Botones de envío en formularios de contacto reducidos a la altura del texto, cuando el formulario decide si el cliente potencial llega a escribir o abandona.
- Migas de pan y menús de filtro en el blog, con enlaces consecutivos separados por un solo espacio en blanco.
- Botones de «leer más» en tarjetas de artículo, convertidos en un enlace de texto diminuto al final de un resumen.
Ninguno de estos elementos es decorativo: cada uno decide si una visita se convierte en una llamada, un formulario enviado o una cita agendada. Un botón de llamada fijo mal dimensionado pierde el beneficio de estar siempre visible si, encima, cuesta pulsarlo a la primera. Y un formulario de contacto con un botón de envío diminuto suma una barrera más a las que ya tiene de por sí.
Comprobar si los botones de tu web dan de sobra
No hace falta pedir una auditoría externa. Con las herramientas para desarrolladores del navegador (tecla F12 o clic derecho, Inspeccionar), seleccionar un botón muestra su caja de tamaño real en el panel de estilos, incluyendo el relleno que no se ve a simple vista.
Otra comprobación rápida, sin tocar el código: en un móvil real, con el dedo en lugar del cursor, intentar pulsar cada botón del menú, del formulario de contacto y del pie de página sin ampliar la pantalla con los dedos. Si hace falta hacer zoom para acertar a la primera, ese botón está por debajo del mínimo cómodo, aunque técnicamente cumpla los 24 píxeles.
La técnica CSS que agranda el área sin rediseñar
La corrección casi nunca exige rehacer el botón. La técnica que recoge el propio W3C consiste en fijar un min-height y un min-width de 24 píxeles en el contenedor del botón, aunque el icono o el texto de dentro sigan siendo más pequeños visualmente. El relleno extra absorbe la diferencia y el diseño no cambia de aspecto en el escritorio.
Para iconos apretados, el caso típico del pie de página, basta separar los elementos con un margen que deje al menos 24 píxeles de hueco entre un borde y el siguiente, sin tocar su tamaño visible. En la mayoría de plantillas de WordPress esto se arregla en una línea de la hoja de estilos, no en una reconstrucción del tema.
La relación entre tamaño de botón y tu SEO
Google no penaliza directamente un botón pequeño, pero sí penaliza sus consecuencias. Una visita que no consigue pulsar el botón de contacto a la primera, se frustra y vuelve atrás a los resultados de búsqueda, está generando la señal de rebote rápido que Google asocia con una mala experiencia de página.
El efecto es mayor en el móvil, donde ya llega la mayoría del tráfico de búsqueda de un despacho y donde el dedo sustituye al cursor. Una web que supera bien las métricas de velocidad pero falla en el tamaño de sus botones sigue perdiendo clientes potenciales en el último paso, justo el que convierte una visita en un contacto real. El criterio encaja además con otro requisito que ya exige la ley a muchos despachos: el texto alternativo en imágenes que marca la misma WCAG.
Preguntas frecuentes sobre el tamaño de los botones
Lo que más preguntan los despachos al revisar este punto de su web:
¿Qué pasa si los botones de mi web no llegan a 24 píxeles?
No hay una sanción automática: el Criterio 2.5.8 forma parte del nivel AA de la WCAG 2.2, el estándar que exige la normativa de accesibilidad europea a los servicios esenciales. En la práctica, el coste real es de conversión: clics fallidos, formularios abandonados y una peor experiencia en el móvil.
¿El mínimo de 24 píxeles también afecta a los enlaces de texto?
No, si el enlace va dentro de una frase: la excepción «en línea» lo libra porque su tamaño lo decide la altura de la línea de texto. Sí afecta a un enlace suelto que funcione como botón, un «leer más» al final de una tarjeta, aunque esté escrito solo con texto.
¿Qué botones se libran del mínimo de 24 píxeles?
Los que tienen espacio suficiente alrededor aunque sean pequeños, los que repiten una función ya disponible en otro botón más grande de la misma página, los que dibuja el propio navegador, como un desplegable nativo, y los que una norma obliga a mostrar con un formato concreto.
¿Hace falta rediseñar la web entera para cumplirlo?
No. La técnica más habitual es añadir relleno alrededor del botón o separar los iconos muy juntos, sin tocar ni el tamaño visible ni el diseño general. En la mayoría de plantillas de WordPress es un cambio de pocas líneas en la hoja de estilos, no una reconstrucción del tema.
