← Volver al lab

Área táctil

Cinco pantallas llenas de botones, enlaces e íconos. Marca cada control cuya área táctil sea menor que el mínimo y luego mira los tamaños reales.

Qué hace

  • Cinco pantallas: un visor de fotos, un carrito, un carrusel, un campo de mensaje y una tabla
  • Controles dibujados con su área táctil real, así que un ícono pequeño con relleno no es un objetivo pequeño
  • Tres mínimos: 24 px (WCAG 2.2 AA), 44 px (Apple y WCAG AAA) y 48 px (Material)
  • El tamaño real de cada control tras cada ronda, con la razón de cada fallo

Preguntas frecuentes

¿Cuál es el tamaño mínimo de un área táctil?

WCAG 2.2 AA (criterio 2.5.8) pide al menos 24 por 24 píxeles CSS. Apple recomienda 44 por 44 puntos y Material Design 48 por 48 dp, y WCAG AAA (2.5.5) también usa 44.

¿Puede un ícono ser pequeño si su área táctil es grande?

Sí. El tamaño que cuenta es el área que reacciona al toque. El relleno alrededor de un ícono de 20 px puede crear un objetivo de 44 px sin cambiar cómo se ve.

¿Cuentan el ancho y el alto?

Sí. Un objetivo debe llegar al mínimo en ambos lados, así que un botón ancho pero bajo, como uno de 56 por 40, igual falla un mínimo de 44 px.

📖 Tamaño del área táctil: 24, 44 y 48 px explicados (WCAG 2.5.8)

Más herramientas gratuitas

  • Generador de paletas - Elige un tono y una armonía y obtén una paleta accesible completa con verificación de contraste AA/AAA en vivo.
  • Verificador de contraste - Pega dos colores, mira el ratio WCAG y corrige una combinación que falla con un clic.
  • Imagen → Paleta - Sube una imagen, extrae sus colores dominantes y descubre qué combinaciones se pueden usar juntas.
  • Simulador de daltonismo - Mira una paleta con protanopia, deuteranopia, tritanopia y acromatopsia, y detecta los colores que se confunden.
  • Generador de escala tipográfica - Elige un tamaño base y una proporción y obtén una escala tipográfica completa con vista previa, clamp() fluido y tokens.
  • Generador de degradados - Degradados lineales, radiales, cónicos o de malla: arrastra los puntos, mezcla colores y copia el CSS.
  • Explorador de estados de componentes - Botones, campos y tarjetas en todos sus estados (hover, foco, presionado, deshabilitado, error) con verificación de contraste.
  • Convertidor de design tokens - Pega tokens W3C, Tokens Studio o Variables de Figma y obtén CSS, SCSS, Tailwind v4 o SwiftUI, con alias incluidos.
  • Laboratorio de movimiento - Arrastra curvas cubic-bezier, ajusta un resorte real, míralos competir y exporta tokens de movimiento.
  • Recorte automático - Suelta tus PNG y recupéralos sin los bordes transparentes vacíos, en lote, en tu navegador y en un solo ZIP.
  • Prueba de expansión de texto - Mira cómo se rompe una interfaz en alemán, español o pseudotraducción, y qué CSS la hace resistir la traducción.
  • Mini auditoría de accesibilidad - Pega HTML y encuentra textos alternativos y etiquetas que faltan, botones sin nombre, saltos de títulos, objetivos táctiles pequeños y bajo contraste.
  • Vista previa multiformato - Un mensaje en tamaños de redes sociales y anuncios display, con zonas seguras y punto focal arrastrable. Exporta cada PNG.
  • Vista previa móvil - Abre cualquier sitio web dentro de marcos de iPhone, Pixel, Galaxy y iPad a su tamaño real. Gíralo o compara cuatro dispositivos a la vez.
  • Caza de color - Iguala cinco colores a ojo con tono, saturación y luminosidad. Puntaje por distancia perceptual y un reto diario para compartir.
  • Pasa o falla - Veinte rondas rápidas: ¿este texto pasa el contraste WCAG AA? Confía en tu ojo y luego mira las proporciones reales.
  • Ojo óptico - Corrige siete detalles de layout a ojo: centra un ícono de play, iguala padding y ajusta un círculo frente a un cuadrado. Algunas respuestas son ópticas, no matemáticas.
  • Pánico de estados - Los componentes caen con algo pasándoles. Elige hover, focus, presionado, cargando, error o deshabilitado antes de que toquen el piso.
  • Golf de curvas - Minigolf con curvas de animación: dale forma a un cubic-bezier para que el disco pase cada bandera a tiempo y tira. El par es tres.
  • Supervivencia de contraste - El fondo no deja de cambiar. Ajusta la luminosidad del texto para que pase WCAG AA, luego AAA, el mayor tiempo posible.
  • Carrera de tokens - Reemplaza valores fijos con los design tokens correctos, rápido. Mismo valor no es el mismo token. Luego cambia el tema y mira qué se rompe.
  • Ajusta el kerning - Espacia seis palabras a ojo. Cada una tiene un par de letras muy junto o muy separado; la respuesta es el kerning del diseñador de la fuente.
  • Orden del Tab - Toca los botones, enlaces y campos de una pantalla en el orden en que debería recorrerlos la tecla Tab. Cinco pantallas, una regla de WCAG.
  • Ajusta a la grilla - Cinco componentes con el espaciado desviado de la escala. Ajusta cada relleno y espacio a su paso de 4 y 8 px antes de que se acabe el tiempo.
  • Lee la tipografía - Una muestra esconde su peso, tamaño o interlineado. Mueve la tuya hasta igualarla, seis rondas, con el valor real después de cada una.
  • Radio concéntrico - Una caja redondeada dentro de otra. Mueve el radio interior hasta que el espacio sea parejo. La regla: radio exterior menos relleno.
  • Repara la rampa - Nueve tonos de un color, de claro a oscuro, y uno está roto. Encuéntralo antes de perder tus vidas.
  • Nombra el componente - ¿Tooltip o popover? ¿Pestañas o control segmentado? Nombra diez componentes de interfaz a partir de un dibujo.