Un diseño puede verse bien y aun así fallar para una persona con baja visión o que navega con teclado. Estas cuatro revisiones, del nivel AA de WCAG 2.2, detectan errores frecuentes antes de entregar.
1. Contraste del texto (1.4.3)
El texto necesita una relación de contraste de al menos 4.5:1 contra su fondo. El texto grande admite 3:1 (W3C). Son umbrales exactos: un 4.499:1 no cumple. También aplica al texto de ayuda (placeholder) y al que aparece al pasar el cursor o al enfocar. Si el texto va sobre una imagen o un degradado, mide en la zona más desfavorable.
2. Contraste de componentes (1.4.11)
Los bordes de los campos, los íconos y los estados necesitan al menos 3:1 frente a los colores que los rodean (W3C). No se exige un borde si el control ya se identifica por su texto o su ícono visible. El estilo neomorfismo suele fallar aquí, porque separa los controles del fondo solo con sombras sutiles.
3. Foco visible (2.4.7)
Quien navega con teclado debe ver dónde está el foco (W3C). No quites el contorno por defecto sin reemplazarlo. El W3C documenta como técnica usar la pseudoclase :focus-visible:
:focus-visible {
outline: 3px solid #1a56db;
outline-offset: 2px;
}Ajusta el color a tu paleta y comprueba que se distinga del fondo: el indicador de foco también debe tener buen contraste (relación con el criterio 1.4.11).
4. Tamaño del objetivo (2.5.8)
Los controles para puntero deben medir al menos 24 por 24 píxeles CSS, o tener suficiente espacio a su alrededor si son más pequeños (W3C). Se corrige con relleno (padding) o con ancho y alto mínimos:
.icon-button {
min-width: 24px;
min-height: 24px;
padding: 8px;
}En realidad virtual la vara es más alta: la guía de Meta fija 48dp por 48dp para toque directo, como cuento en el artículo sobre Meta Quest 3.
Qué más revisar
- Etiquetas visibles en los campos de formulario, no solo texto de ayuda que desaparece al escribir.
- No transmitir información solo con color: suma texto, ícono o patrón.
- Elementos nativos (button, a, input) antes que un div con eventos.
- Texto alternativo en las imágenes que informan.
Checklist antes de entregar
- Texto con 4.5:1 (3:1 si es grande).
- Bordes, íconos y estados con 3:1.
- Foco visible en cada elemento interactivo.
- Objetivos de al menos 24 por 24 píxeles CSS, o con espacio suficiente.
- Campos con etiqueta visible.
- Prueba completa solo con teclado.