Nunca dependas solo del color

«Nunca dependas solo del color» es la forma en lenguaje llano del criterio de éxito 1.4.1 de las WCAG, Uso del color: el color no debe ser el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento de otro. No prohíbe el color: prohíbe el color como único portador del significado. La solución es la redundancia: acompaña cada señal codificada por color con una segunda pista, ya sea un icono, una etiqueta de texto, una forma, un subrayado o una posición. Es la regla de accesibilidad que cuesta casi nada cumplir mientras construyes y una fortuna incorporar después del lanzamiento, porque para entonces las pistas que faltan están repartidas por todas las pantallas.

Por qué el color necesita un acompañante, para empezar, conecta directamente con la fisiología de nuestra guía de contraste: una parte significativa de los usuarios no puede distinguir el tono en el que te apoyas. Pero la regla va más allá del daltonismo: también cubre las condiciones de bajo contraste, la impresión en escala de grises y sencillamente no percibir un tinte sutil. La redundancia responde a todas ellas a la vez.

¿Qué exige exactamente la WCAG 1.4.1?

El criterio apunta a cuatro tareas que el color suele hacer en solitario: transmitir información, indicar una acción, provocar una respuesta y distinguir un elemento visual. En cada caso el color puede hacer la tarea; solo que no puede ser lo único que la hace. Un mensaje de error en rojo está bien; un mensaje que es un error solo porque es rojo no lo está.

Vale la pena enunciar el porqué intuitivo, porque hace que la regla se sienta menos como cumplir una norma y más como ingeniería. El color es un canal rápido —el ojo lo lee de forma preatencional, antes de que enfoques—, pero no es universal: falla para los usuarios daltónicos, para la salida en escala de grises, bajo el sol intenso, en un proyector barato. Todo sistema de señalización robusto construido para el mundo real usa la redundancia exactamente por esta razón. El semáforo es el ejemplo canónico: codifica el parar frente al avanzar en la posición (arriba frente a abajo) además del color, así que sigue funcionando para un conductor daltónico al rojo-verde y para una lámpara descolorida por el sol. Las interfaces se ganan la misma durabilidad de la misma manera.

¿Qué aspecto tiene depender solo del color?

La galería de fallos es breve e instantáneamente reconocible:

• Campos obligatorios marcados con un asterisco rojo, donde el «rojo» es lo único que lo distingue de una estrella decorativa.
• Estados de error que solo tiñen de rojo el borde del campo, sin icono, mensaje ni cambio de forma.
• Enlaces distinguidos del texto del cuerpo solo por el color: el clásico, y la razón por la que existen los subrayados.
• Series de un gráfico separadas solo por el tono, de modo que la leyenda resulta ilegible para cualquiera que no pueda diferenciar las líneas.
• Puntos de estado que son verdes o rojos y nada más.
• Vistas de diff que marcan las adiciones y las eliminaciones solo con rellenos rojos y verdes.

Cada uno de estos se publica constantemente, y cada uno se vuelve accesible con una sola pista añadida.

¿Cuáles son los patrones de solución?

Acompaña el color con un segundo canal que transmita el mismo significado:

• un icono: una marca de verificación, una cruz, un triángulo de advertencia;
• una etiqueta de texto: «Obligatorio», «Error», «Oferta»;
• una forma: una insignia rellena frente a una con contorno;
• un patrón: tramas o líneas discontinuas en el relleno de un gráfico;
• un subrayado: la pista nativa de «esto es un enlace»;
• una posición: la jugada del semáforo, el orden portando el significado.

El color se queda. Está haciendo un trabajo útil: es rápido, y para la mayoría de los usuarios es lo primero que se lee. Le estás añadiendo un suelo por debajo para que el significado no se pierda cuando el color falla.

¿No es esto simplemente «evitar el color»? El matiz que la mayoría pasa por alto

No, y equivocarse en esto lleva a un diseño tímido y sin color en nombre de la accesibilidad. El criterio trata del significado, no de la decoración. Un botón primario con el color de la marca está perfectamente bien: el color decora, mientras que la forma del botón y su etiqueta («Guardar cambios») portan el significado. El color podría desaparecer y el botón seguiría siendo un botón etiquetado. Contrasta eso con un interruptor rojo frente a verde donde ambos estados son rectángulos idénticos con etiquetas idénticas: ahí el color es la única diferencia entre encendido y apagado, y eso es la infracción. Pregúntate de cualquier elemento: si el color desapareciera, ¿sobreviviría el significado? Si es que sí, el color está decorando; si es que no, está portando, y necesita un acompañante.

El documento oficial Understanding 1.4.1 es la referencia autorizada, y es donde vive una excepción estrecha. Los enlaces pueden distinguirse del texto que los rodea solo por el color si esa diferencia de color alcanza al menos 3:1 frente al texto del cuerpo y aparece otra pista visual al pasar el cursor y al enfocar. Es una excepción genuina, pero las condiciones son lo bastante estrictas como para que, en su mayoría, confirmen la regla: incluso el caso sancionado de solo color exige una segunda pista en cuanto el usuario interactúa. En la práctica, un subrayado es más sencillo y más seguro.

Ejemplo resuelto: un error de formulario, de tres maneras

Toma un campo de correo electrónico que no ha pasado la validación. Observa qué comunica cada versión, y qué sobrevive a una simulación de daltonismo rojo-verde.

La versión de solo color no es sutilmente peor: es invisible como error para quien ve en rojo-verde, que percibe un campo con un borde ligeramente descolorido y ni idea de que algo va mal. La solución de dos líneas (icono más mensaje) hace que el error sobreviva al daltonismo, a la escala de grises y a un vistazo distraído, sin coste alguno para el diseño de todos los demás.

Abre un conjunto de señales construidas con color más un segundo canal —roles de estado, estados de error e indicadores de foco, cada uno portando un icono o etiqueta junto al tono, mostrados con el canal de color eliminado por simulación.

¿Cómo auditas tu propia interfaz en busca de esto?

Apaga el color. Carga tu paleta y pásala por una simulación de daltonismo y luego recorre tus estados clave (obligatorio, error, éxito, activo, seleccionado) y hazte la única pregunta que decide cada caso: con el tono eliminado, ¿sobrevive el significado? Cada «no» es un lugar donde un icono, una etiqueta o un subrayado convierte una señal de solo color en una robusta, encontrado ahora, cuando cuesta una línea de marcado en lugar de un rediseño.