Capítulo 16 Selección de colores
La selección de colores debe obedecer a un propósito. El principal, que la visualización sea efectiva. Pero el contexto puede indicar que se utilicen ciertas gamas de colores.
Munzner (Munzner 2008) menciona que es un gran problema “la cacofonía del color”. Añade: “Un documento infovis pierde credibilidad cuando se toman decisiones de diseño sin tener en cuenta hechos básicos de la percepción del color. Por ejemplo, tener grandes áreas de color muy saturado, con la esperanza de que la codificación del color podrá distinguirse en las regiones pequeñas, utilizar más categorías nominales que las, aproximadamente una docena, que pueden distinguirse con códigos de color, o utilizar un esquema secuencial para datos divergentes. Utilizar una codificación de tonos rojo/verde sólo se justifica cuando existan fuertes convenciones en el área de dominio, y normalmente debería codificarse de forma redundante con diferencias de luminancia para que sea distinguible para los daltónicos. No se debe intentar codificar visualmente tres variables a través de los tres canales de rojo, verde y azul; no son separables porque el sistema visual las integra en una percepción combinada. Estos principios han sido claramente explicados por muchos autores.”
Un diseñador de visualizaciones, sin ser un esteta, debe conocer de la teoría del color. Ya se ha presentado acerca de los colores sustractivos y aditivos primarios y modelos de color.
A continuación algunos consejos dados por Perryman (Perryman 2021) al escoger unos pocos colores:
Diada: Combinación de dos colores que dejan dos espacios (libres) entre sí en el círculo cromático de 12 colores (3 primarios - tradicionalmente amarillo, azul y rojo -, 3 secundarios - naranja, verde y morado - y los 6 intermedios). Presentan una armonía natural en que la separación crea interés visual.
Triada: Combinación de tres colores separados de manera equidistante. Suele funcionar mejor con un color dominante y dos colores acento dentro de la paleta.
El color dominante es el color principal del diseño y debe ser el color más prominente y visible. El color secundario es un color complementario que apoya al color dominante y proporciona interés visual. El color de acento es un toque de color que agrega un poco de emoción y contraste al diseño.
Tetrada: Combinación de cuatro colores separados uniformemente, o dos grupos de opuestos complementarios. Para diseños atrevidos que den a la vez contraste y armonía.
Colores cálidos y fríos: Son cálidos los amarillos naranjas y rojos. Son fríos los azules. Los verdes y violetas pueden ser de ambos, dependiendo de qué tanto rojo o azul tengan.
Perryman7 aconseja considerar:
- Contrastes por cantidad, entre un color dominante y dos secundarios.
- Contrastes por saturación, entre colores con varios grados de iluminación de la misma gama, que pueden dirigir la atención hacia los detalles importantes.
- Contrastes por tono. Intente enmarcar una zona clara entre dos zonas oscuras para crear un fuerte centro visual.
- Contrastes por saturación y luminosidad, combinando dos tonos con grados de saturación pero con la misma intensidad. Para lograr impacto, tres o cuatro colores con alto grado de saturación que combinen juntos.
- Contraste de negros y saturados. Una paleta de tonos neutros puede alegrar los tonos más sutiles y llevará la atención hacia una función o detalle fundamental. Se puede utilizar una combinación acromática de negro y blanco para suavizar o enmarcar colores con un alto grado de saturación.
- Contrastes por temperatura. Ponga un cálido sobre fondo de azules y la atención se irá hacia la calidez. También es útil con combinaciones de bajo grado de saturación para fomentar la atención sin cansar la vista.
En la percepción del color pueden influir mucho las percepciones culturales y connotaciones profundamente arraigadas relacionadas a menudo con la religión o la tradición. Pero también es una experiencia personal asociada a estados de ánimo e ideas e influencias a las que hemos estado expuestos.
Cuando una marca tiene asociado como canal un color de relleno y un borde, un buena práctica es enmarcar el relleno oscuro con una menor iluminación, o el relleno claro con una mayor iluminación. Proporciona mayor elegancia, sin que el observador perciba la sutileza conscientemente. Además, si se está trabajando una visualización donde las barras están adyacentes, se elimina el efecto de las bandas de March, aquel en donde el ojo humano acentúa los cambios bruscos de brillo, de modo que las regiones de brillo constante cerca de los bordes parecen tener un brillo variable.
Ejemplo.
Se presentan nueve barras con color. El primer grupo de tres, a la izquierda, con el borde negro, el segundo grupo con el borde en el mismo tono y el tercero con el borde con menor iluminación. La diferencia es sútil, pero útil.
Figura 16.1: Tres tipos de borde: negro, el mismo y menor iluminación
También se debe tener cuidado con el contraste. La prominencia de rojo en el relleno compatibiliza con la prominencia de rojo en el borde, pero contrasta con una prominencia de azul en el borde, así parecieran de la misma gama.
Ejemplo. Se presentan cuatro barras que contienen dos colores. Un color con mayor cantidad de rojo y el otro con mayor cantidad de azul. Al par de barras de la izquierda se las enmarca con otros dos colores, una en que se intensifica el rojo y la otra en que se intensifica el azul. La segunda no se ven bien.
Al par de barras de la derecha se las enmarca con otros dos colores, una en que se intensifica el rojo y la otra en que se intensifica el azul. La primera no se ven bien.
Figura 16.2: Dos tipos de contraste
Lecturas adicionales:
Una buena fuente de paletas son las notas de Paul Tol, si bien el autor lo orienta a visualizaciones científicas.
Styling charts for accessibility de la Royal Statistical Society es una breve compilación de buenas prácticas.
Un comentario final acerca del uso de paletas secuenciales. Evítese usar paletas estilo arcoiris. Healy (Healy 2019) advierte que la distancia perceptual entre dos tonos de estas paletas no es uniforme. Hay paletas que sí cuidan de que dicha distancia perceptual entre dos tonos sea uniforme. Por ejemplo: Viridis, plasma, inferno, magma y cividis.
Se habla de distancia perceptual puesto que el sistema visual no responde de forma lineal a todas las variaciones de contraste, frecuencia y luminancia; existen regiones en las que pequeñas diferencias no se perciben y otras donde se amplifican. Los modelos de color de calidad perceptual incorporan esas propiedades para aproximar qué diferencias son visibles para un observador humano.