Usar el color en un diseño

Cerca del 8 por ciento de los hombres tiene deficiencia de visión del color rojo-verde, así que un formulario que marca los errores solo en rojo deja a muchos de ellos adivinando.

Nunca dejes que el color lleve solo el mensaje

El criterio de conformidad 1.4.1 de WCAG 2.2, Uso del color, es de nivel A, el más básico. Dice que el color no debe ser el único medio visual para transmitir información, indicar una acción, pedir una respuesta o distinguir un elemento visual. Un borde rojo en un campo de formulario con un error está bien, siempre que haya también un icono o una línea de texto que diga qué está mal. Un gráfico de líneas con cinco líneas de colores necesita además etiquetas, distintos estilos de línea o marcadores. Los enlaces dentro de un párrafo necesitan subrayado u otra señal además del color.

La razón tiene que ver en parte con la visión del color. El texto de neurociencia de OpenStax explica que algunas personas tienen una variación genética que les da dos tipos de conos en lugar de tres, o un pigmento de cono que funciona de forma distinta. No son ciegas a un color, pero algunos colores que la mayoría distingue les parecen iguales. Las formas rojo-verde son las más comunes y afectan a cerca de 8% de los hombres. Otras razones también importan: un teléfono bajo el sol fuerte, un proyector barato, una impresión en blanco y negro. Un diseño que sigue funcionando en escala de grises funciona en todos estos casos.

La luminosidad hace el trabajo pesado

Por eso, los diseñadores con experiencia planean una paleta en dos pasadas. Primero deciden los pasos de luminosidad: un fondo muy claro, un tono medio para los bordes, un tono oscuro para el texto. Luego eligen los tonos. Comprobar cada par de texto y fondo con la relación de contraste de la unidad 6 es la forma más rápida de saber si los pasos están suficientemente separados. Los tonos complementarios no garantizan contraste. En el modelo, el naranja de marca y su complemento azul tienen la misma saturación y luminosidad HSL, y la relación entre ellos es de solo 1.06:1. Dos colores pueden estar lo más lejos posible en tono y aun así ser difíciles de leer uno sobre otro.

Un método de trabajo sencillo reúne las unidades de este curso. Empieza con un tono que encaje con el tema. Usa una armonía de la unidad 4 para elegir uno o dos tonos de apoyo. Da al color dominante la mayor parte del área, más o menos 60%, a un color secundario 30% y a un acento 10%, la regla práctica de la guía de la Universidad de Delaware. Elige la luminosidad de cada combinación de color del texto y del fondo hasta que todas lleguen a al menos 4.5:1, o 3:1 para títulos grandes e iconos. Por último, comprueba que nada dependa solo del color: los errores tienen palabras, los enlaces tienen subrayado, los gráficos tienen etiquetas.

Los gráficos merecen su propio cuidado, porque a menudo necesitan muchos colores a la vez. La guía de la Universidad de Delaware remite a ColorBrewer, una herramienta hecha para paletas de mapas y gráficos. Para valores que van de bajos a altos, una paleta secuencial de un solo tono que pasa de claro a oscuro sigue funcionando en escala de grises. Para categorías, usa la menor cantidad de colores posible, pon una etiqueta a cada una junto a la línea o la barra y no solo en una leyenda, y mantén pasos de luminosidad lo bastante distintos para que dos vecinos nunca se parezcan.