Imaginate que estás en un cine. La película está en su clímax, la escena es oscura, llena de suspense. De repente, alguien en la fila de adelante enciende la pantalla de su celular al máximo brillo para contestar un mensaje. ¿Qué pasa? Tu cerebro tarda unos segundos en adaptarse, te duele la vista, y te perdiste ese detalle crucial de la trama.
Esa sensación de frustración y desconexión es la que experimentan todos los días las personas con baja visión o daltonismo cuando navegan por sitios web con mal contraste. O las personas que usan teclado cuando el indicador de foco desaparece misteriosamente.
En mnoc, sabemos que un diseño hermoso que no se puede leer o navegar es, simplemente, un mal diseño. Hoy vamos a encender la luz sobre dos pilares fundamentales de la UX/UI accesible: el Contraste de Color y el Estado de Foco (Focus State).
1. El Contraste: No es una sugerencia estética, es legibilidad
Muchas veces, como diseñadores, nos enamoramos de una paleta de colores pastel o de un gris suave sobre blanco porque «se ve limpio». El problema es que «limpio» para vos puede ser «invisible» para tu usuario.
Las WCAG (Web Content Accessibility Guidelines) nos dan reglas claras sobre esto (Criterios 1.4.3 y 1.4.11), y no son caprichos técnicos:
- Para texto normal: Necesitamos una relación de contraste de al menos 4.5:1.
- Para texto grande o componentes de interfaz (como iconos): Al menos 3:1.
¿Por qué esto es vital para tu negocio?
Pensalo un segundo. Si un usuario no puede leer la descripción de tu producto o no distingue el botón de «Pagar» del fondo, no va a comprar. Así de simple. Un buen contraste no solo ayuda a personas con discapacidad visual; también ayuda a alguien que está usando tu web en la calle bajo la luz del sol directa. Mejor contraste = mejor UX para todos = más conversiones.
2. El Estado de Foco: El GPS de la navegación por teclado
Hablemos ahora del gran olvidado: el :focus.
Mucha gente navega la web sin usar el mouse. Ya sea por una discapacidad motriz (permanente o temporal, como tener una mano enyesada), por fatiga visual o simplemente por preferencia de productividad (¡hola, power users!). Estas personas usan la tecla Tab para saltar de un elemento interactivo a otro.
El indicador de foco es el cursor del mouse de estos usuarios.
Si tu sitio no tiene un indicador de foco claro y visible, es como si le vendaras los ojos a estos usuarios. Están saltando por tu web, pero no tienen idea de dónde están.
El crimen del :focus { outline: none; }
Lamentablemente, una práctica muy común para que la web «se vea más linda» es quitar el borde azul que los navegadores ponen por defecto. Por favor, no lo hagas. A menos que lo reemplaces por un estilo de foco diseñado por vos que sea aún más visible.
Las nuevas WCAG 2.2 subieron la apuesta con el criterio 2.4.11 (Foco no oculto) y el 2.4.13 (Apariencia del foco). No solo debe haber un foco, sino que debe tener suficiente contraste y no puede quedar tapado por otros elementos (como un sticky header).
Enfoque Mnoc: Diseñando la visibilidad
No queremos que te sientas abrumado. Mejorar esto en tu proyecto es más fácil de lo que crees. Aquí tienes tu guía de acción para mañana por la mañana:
- Audita tu paleta hoy mismo: No confíes en tu ojo. Usa herramientas gratuitas (como el Color Contrast Analyser o extensiones de navegador) para medir tus colores. Si tu botón principal no pasa la prueba 4.5:1, cámbialo. Es una decisión de diseño y de negocio.
- No dependas solo del color: Recordá el criterio 1.4.1. No digas «Haz clic en el botón verde» para confirmar, porque un usuario daltónico podría no distinguirlo. Usa texto, iconos o formas adicionales.
- Abraza el
:focus: Diseñá el estado de foco como diseñás el estado de hover. Asegurate de que tenga un contraste alto con el fondo y con el elemento mismo. Una técnica excelente es usar un borde doble (uno claro y uno oscuro) para que sea visible en cualquier fondo.
La accesibilidad es empatía en acción
Al final del día, controlar el contraste y el foco no es solo una cuestión de cumplir una norma técnica. Es una forma de decirle a tu usuario: «Te veo, me importas y quiero que tengas la mejor experiencia posible, sin barreras».
En mnoc, creemos que la web debe ser un espacio donde nadie se quede a oscuras. Diseñar con visibilidad es diseñar con respeto.