Visualización de datos (para principiantes): El color

Introducción

La teoría del color es un campo de estudio tan amplio que era inevitable traerlo al terreno de la visualización de datos.

Muchas compañías se encuentran con el reto de tener que aplicar los colores de su marca también a la presentación de datos. El problema es que no se solía pensar en ese aspecto cuando se elaboraba una guía de estilo.

Es fácil entender el problema subyacente. La mayoría de usuarios no sentían un vínculo ni arraigo al ver presentaciones fuera de las paletas cromáticas de la marca. Y las que sí seguían las guías no cumplían con las necesidades de diferenciación o contraste básicas para una correcta comprensión de las mismas.

Afortunadamente las marcas empiezan a tener en cuenta la visualización de datos en sus paletas cromáticas corporativas. Muchas elaboran gamas de color extensas más o menos basadas en sus colores corporativos primarios o secundarios. Incluso segmentadas por uso o aplicación (ej. Paleta de color de Repsol).

La accesibilidad y la presencia de la marca en la visualización de datos cada vez disfruta de más atención.

Sin embargo, muchas otras compañías conservan guías de estilo antiguas o con una gama de colores escasa y muy orientada a imprenta.

En este último caso podemos encontrarnos con la necesidad de representar una gráfica con una docena de variables que dibujar. Pero solo contamos con apenas dos o tres colores de marca que merezca la pena utilizar.

Obviamente encontrar una gama efectiva partiendo de tan escasa aportación va a ser complicado. Más aún cuando debemos lograr que la información destaque a cierta distancia y diferenciar nítidamente cada valor.

Parapetarse detrás de pequeñas leyendas o etiquetas para descifrar la información no es tampoco una solución eficaz ni escalable.

Rellenar ciertas áreas de formas, líneas, puntos, etc. es una opción estética habitual cuando los datos se van a visualizar en soportes monocromáticos. Pero, aunque contar con cuantas más armas mejor nos da mayor cintura para resolver problemas, no sería la primera opción a utilizar.

Simbolismo

Pero los escollos no acaban ahí. En la selección de una paleta de color para visualizar datos influyen más apectos relevantes. Seguro que ya habéis echado de menos la mención al simbolismo de los colores.

Más allá del significado personal que cada uno le demos a los colores, es evidente el consenso acerca del simbolismo de algunos de ellos. No vamos a entrar en detalle sobre este asunto ahora pero es evidente que debemos reservar un hueco a los llamados “colores semánticos”. Rojo, ambar y verde tienen su espacio en todos los sistemas de diseño y también su función en la representación de datos porque universalmente se ha consensuado su uso de una determinada manera. Rojo para representar precaución, peligro o información negativa. Verde para valores positivos, crecimiento o validación.

Accesibilidad

Aspectos como la forma, la posición o el tamaño del área afectan a cómo se relacionan los colores entre sí. Así, encontramos que colores bien contrastados en una gráfica de sectores pueden no funcionar en otra cuyos valores se representan con líneas muy próximas.

Ciertos colores gozan de un simbolismo que social y culturalmente se les ha otorgado y que hay que tener muy en cuenta al crear una paleta de color.

Tampoco es lo mismo visualizar los colores sobre un fondo claro que sobre uno oscuro donde tendremos que usar una paleta más contrastada y brillante.

Y por supuesto no podemos ignorar a las personas con dificultad visual. Afortunadamente existen herramientas para probar esquemas de color y verificar su compatibilidad con varias formas de daltonismo.

Algunas referencias que pueden seros útiles: Colorblind web page filter; Chroma.js color palette helper.

En resumen

Está claro que nos enfrentamos a una situación compleja, con muchas variables y una combinatoria casi infinita.

Trataremos de arrojar un poco de luz y, fijándonos en cómo grandes empresas han afrontado este problema, dar algunos consejos de buenas prácticas para seleccionar la paleta de color más adecuada para nuestra visualización de datos.

Crear una paleta de color

Ya hemos comentado ligeramente que no todas las compañías cuentan con una paleta específica para visualización de datos. Hemos hablado de lo importante que es contar con una eficaz gama de colores que aporten el ratio de contraste suficiente y que mantengan una relación con la imagen de la marca lo más estrecha posible.

Puestos a pedir, que tal si además tenemos colores semánticos, neutros, secuenciales y categorizados. Bueno, igual nos hemos venido muy arriba. Pero ya que nos remangamos, hagámoslo bien. Seamos organizados.

Tomarse en serio crear varias paletas de color para visualizar datos y prever su escalabilidad es el mejor punto de partida.

Generalmente nos vamos a encontrar con cuatro usos del color en gráficas dependiendo de la audiencia y la historia que queramos contar:

• Los colores categóricos ayudan a los usuarios a asignar un significado no numérico a los objetos en una visualización. Están diseñados para ser visualmente distintos entre sí.
• Los colores secuenciales tienen un significado numérico. Se trata de una gradación de colores que van de claros a oscuros siendo estos últimos los de mayor valor.
• Los colores divergentes también tienen un significado numérico. Son útiles cuando se trata de valores negativos o rangos que tienen dos extremos con una línea de base en el medio.
• Los colores de acento o destacados se combinan con colores neutros como grises para resaltar una información especialmente relevante.

Así que al menos deberíamos plantear una paleta de color para las aplicaciones enumeradas con anterioridad.

Y no es una tarea irrelevante que podamos delegar en usuarios inexpertos. Cuando planteamos la posible personalización de un producto digital hay que decidir cuánto peso tiene esa funcionalidad para el usuario. Si el porcentaje de relevancia es menor deberíamos limitar esa personalización en lo posible para controlar el resultado final. Y si es a la inversa, debemos ser conscientes de que la imagen del producto se va a ver mermada y asumirlo.

Seleccionar las paletas de color adecuadas es una labor compleja que requiere de experiencia y especialización.

Hay que prever qué grado de personalización de color se va a permitir al usuario, si se da el caso, y controlarlo.

Selección de color

Antes de empezar debemos tener algunos factores en cuenta:

• Soporte. No es lo mismo elegir colores para dispositivos digitales como smartphones o tabletas que para visualizarse en una televisión o un medio impreso.
• Accesibilidad. Identificar los posibles problemas de contraste y percepción por parte de personas con dificultades visuales nos ayuda a reducir considerablemente el impacto de una ineficaz paleta de color.
• Semántica. Cada entorno cultural posee sus propias percepciones acerca del simbolismo de los colores. Por ejemplo, para culturas occidentales el color verde significa buena suerte entre otras cosas. Sin embargo, en oriente es el color rojo el que asume ese papel.
• Audiencia. Conocer de antemano quién va a visualizar los datos y qué colores se usan mayoritariamente en su sector orienta nuestro vector de selección. Por ejemplo, para una compañía orientada al turismo nos conviene una paleta alegre y luminosa. Nada que ver con una funeraria.
• Historia. Esto enlaza con los tipos de aplicación de color anteriormente mencionados (colores categóricos, secuenciales, etc.). Además, si tenemos varias gamas de color podemos aplicar unas u otras en función de la historia que queramos contar. Por ejemplo, si el objetivo de la gráfica es reflejar el retorno de inversión del departamento de I+D igual nos interesa dotar a la gráfica de una paleta con colores alegres que cuenten una historia positiva y optimista. Tal vez así consigamos un mayor presupuesto para el año que viene.

Técnicas para crear paletas

Imaginemos que contamos con un armario escaso de colores. Vamos a ampliarlo un poco. Hay varias técnicas para ello.

• Partiendo de los colores de marca más representativos, disminuir progresivamente la saturación y oscurecer o aclarar los tonos. Contras: genera una paleta grisácea y poco brillante en la que los colores se acaban empastando con facilidad.
• Recurrir a colores terciarios o usados por la compañía en otros soportes y crear una amplia gama de colores aleatorios. Contras: el sesgo con respecto a los colores más representativos de la compañía se acentúa y es posible que aparezca cierta incoherencia.

• Crear una paleta más limitada de colores y otras sub paletas derivadas de ella más sencillas con un contraste más controlado para gráficas básicas. Contras: aún así es posible que necesitemos gradaciones de color específicas para ciertos tipos de gráficos.

Esta última opción es la más recomendable por su equilibrio entre las dos primeras. Un truco para hacer esto es seleccionar unos cuantos colores originales de la marca de entre los primarios y secundarios. Duplicarlos. Colocar los clones de manera alterna mezclados con los originales. Por último, modificarles el tono, la saturación y la luminosidad para crear suficiente contraste.

Si realmente tenemos poco material con el que trabajar y se nos permite ponernos más creativos, podemos utilizar algunos trucos más para crear nuestra paleta.

• Usar las paletas de color que nos da la naturaleza. Si se va a usar un degradado para una paleta secuencial o divergente de color es mejor usar en los extremos colores que aparecen asociados comunmente en la naturaleza. Como por ejemplo, en una puesta de sol. De lo contrario notaremos que la transición de color es artificial, poco realista y nos provocará rechazo.

• Usar esquemas de color de fotografías relacionadas con los valores de la compañía. Si se cuenta con la ayuda de un experto se pueden seleccionar los colores directamente. Si no, es mejor usar software que descomponga la imagen para extraer los colores predominantes y elaborar a partir de ahí nuestra paleta.

Por supuesto, la selección de colores, también para la visualización de datos, es una tarea muy personal y subjetiva. Pero hay muchos condicionantes, como hemos visto, y variables a tener en cuenta si queremos obtener un resultado efectivo.

Independientemente del branding de nuestra compañía o nuestros gustos personales hay algunas paletas que se han revelado como realmente prácticas y eficaces y que deberíamos conocer. Particularmente las secuenciales, por la base científica que hay detrás de ellas.

Introduction to the Viridis color maps.

Estas paletas secuenciales se han elaborado teniendo en cuenta, entre otras, variables percentuales de contraste y de percepción para prevenir problemas de accesibilidad a personas con deficiencia visual provocada por daltonismo o sus variaciones.

De esta manera, cualquier persona podrá percibir las mismas variaciones de tono y contraste en la secuencia de valores de una presentación de datos. Incluso aunque se imprima en blanco y negro.

Se elaboraron estas paletas de color para ser utilizadas originalmente en un lenguaje de programación llamado R creado especialmente para su uso académico y de investigación.

R es un lenguaje de programación gratuito para computación estadística y gráficos. Es ampliamente utilizado por investigadores de diversas disciplinas para estimar y mostrar resultados y por profesores de estadística y métodos de investigación.

Estas escalas de color han sido creadas y depuradas por equipos de investigación muy cualificados y tal es el valor de las mismas que hasta compañías como Adobe se han rendido a sus beneficios desarrollando sus propios esquemas de color para presentación de datos a partir de ellas.

En último lugar, una variable a tener muy en cuenta y que ya hemos mencionado, es el color base, esto es: el tema.

Si vamos a presentar los datos sobre dos temas, uno claro y otro oscuro, habrá que elaborar dos paletas adaptadas a cada fondo.

Sobre un fondo claro los colores muy vibrantes u oscuros pueden fatigar y el aspecto de la aplicación se verá muy apagado. Son recomendables colores menos saturados y bien contrastados. Pero en un entorno oscuro debemos añadir un plus de brillo a nuestra paleta pero sin saturar demasiado los tonos.

¿Significa esto que debemos hacer dos paletas diferentes? Si queremos ser consistentes la respuesta es no. Pero sí debemos adaptar algunos de los colores según su contexto.

Uso de las paletas de color

Asumamos que ya tenemos nuestras paletas de color para visualizar datos. Que entendemos las variables de diferenciación perceptual, de accesibilidad y de simbolismo.

Debemos asumir también que si nuestra paleta es amplia vamos a encontrar imperfecciones. Que no siempre el ratio de contraste con el fondo, entre colores adyacentes y con el texto va a ser el óptimo.

Es por esto que solo tenemos un 50% del problema solucionado. Saber usar los colores es tan importante como saber seleccionarlos. Veremos algunas claves.

Tener un martillo no significa que todo sean clavos. Igual de importante que saber usar los colores es saber cuándo NO usarlos.

Es importante recordar que el color necesita un propósito. Si la información se puede entender sin él, es mejor no agregarlo. En general, si la visualización solo contiene dos dimensiones de datos, como la evolución de un valor a lo largo del tiempo, solo necesita un color.

No es necesario complicar la rápida comprensión de una gráfica añadiendo colores solo para conseguir un efecto estético más agradable.

Básicamente, se aplican paletas de color a dos tipos de representaciones de datos:

• Cualitativas: donde no se puede aplicar un orden numérico lógico.
• Cuantitativas: el orden numérico tiene una relevancia que es necesario representar.

Datos cualitativos

Hablamos de datos de naturalezas diferentes cuyo valor no representa una correlación con los demás datos y por tanto deben distinguirse.

En estos casos aplicamos paletas de color categóricas. Es decir:

• Colores bien diferenciados sin un simbolismo marcado.
• Con un brillo y saturación similar.
• Con un tono suficientemente diferente para no generar agrupaciones visuales o sensación de orden.

Es recomendable no usar paletas de más de 6 colores. Está demostrado que las personas no pueden distinguir de forma fiable más de entre 5 y 8 colores al mismo tiempo.

Datos cuantitativos

Hablamos de datos con una misma naturaleza pero que difieren en su valor: por ejemplo la densidad de población de un país.

Hay gráficas cuantitativas que pueden representarse de dos formas diferentes:

• De forma secuencial. Se utiliza un degradado de color para reflejar cuando los valores son bajos o altos.

Algunos consejos:

Haz gradaciones de dos colores siempre que puedas. Aporta mayor contraste y diferenciación que usar un solo color.

La luminosidad de los extremos debe mostrar claramente un orden y qué valores son más grandes y cuáles más pequeños.

La diferencia entre pasos de color debe ser proporcional de manera que se pueda determinar qué tan lejos están dos valores entre sí desde cualquier punto de la paleta. 5 pasos es un buen número para empezar.

• De forma divergente. Se utilizan dos degradados de color que se encuentran en el medio, representado por un tono neutro. Se usa en los casos en los que hay rangos de valores dentro de una escala común. Imaginad un termómetro o una encuesta de satisfacción.

Algunos consejos:

Coloca en el medio un color blanco o gris, incluso un amarillo pálido puede funcionar, como tu rango medio de tonos neutros.

Al igual que en la paleta secuencial, la luminosidad de los extremos debe mostrar claramente un orden. Qué valores son más grandes y cuáles más pequeños.

También como en la paleta secuencial, la diferencia entre pasos de color debe ser proporcional de manera que se pueda determinar qué tan lejos están dos valores entre sí desde cualquier punto de la paleta. Entre 3 y 5 pasos es un buen número para empezar.

¿Y si rompemos las reglas?

Verás a continuación que de vez en cuando podemos romper algunas normas para conseguir una presentación más efectiva de nuestra historia.

Hemos visto hasta ahora que hay paletas de color secuenciales, categóricas y divergentes. Pero como ya mencionamos, podemos crear paletas de acento para destacar datos.

Es una forma común de romper ciertas reglas para conseguir un impacto visual diferente con el que poder jugar.

Es obvio que en muchas ocasiones el uso del color es arbitrario porque no es aplicado siguiendo las paletas de color definidas, si es que existen, o no las aplican expertos y se siguen gustos personales.

En otras situaciones encontramos que no es posible destacar un valor concreto sobre una paleta de colores que hemos definido precisamente para que no destaquen unos sobre otros.

También es complicado que, sobre una gama extensa de colores específicos para visualización de datos, podamos aplicar la personalidad de nuestra compañía de manera que percibamos la marca.

Sobre paletas extensas o con colores no predominantes es muy difícil destacar conceptos o aplicar la marca de la compañía.

Estas situaciones nos plantean escenarios en los que una amplia gama de colores pueden no ser la solución más eficaz. En cambio contar con una gama de grises puede ser un gran aliado. Algunos usos pueden ser:

• Acentuar para enfocar. El gris combinado con color hace que este destaque y se enfatice su valor.
• Crear referencias de interpretación. Si se crea un gradiente de grises secuencial un color negro nos puede servir para destacar un valor o progreso, por ejemplo.
• Ver la forma general. Si se usa un mismo tono de gris para las líneas de un gráfico por ejemplo podemos fácilmente intuir la forma general de una tendencia y detectar valores atípicos.
• Crear referencias destacar una posición. Gracias al contraste con un color podemos fácilmente detectar la posición de un objeto o valor.
• El gris se puede utilizar como un elegante recurso para acentuar el color de marca destacándolo sobre el resto de valores.
• Está socialmente aceptado que los tonos grises representan también valores nulos, deshabilitados o no seleccionados.

Excepciones

Hemos hablado de colores simbólicos con anterioridad. Son aquellos a los que socialmente se les atribuyen connotaciones de algún tipo: rojo, verde, amarillo, negro, blanco, gris principalmente.

Pero ¿qué ocurre si los colores de nuestra compañía coinciden con alguno de estos colores simbólicos? Evidentemente tenemos un problema que hemos aprendido a sortear.

• Si el color principal de su marca es el rojo, puede usarlo para resaltar valores atípicos, destacados o características especiales. Puede usarlo en algunos titulares o en detalles gráficos en otras partes del informe. Si, por ejemplo, está hablando del volumen de ventas de automóviles en una región concreta de su continente puede valorar pintar el resto de regiones en escalas de grises según sus ventas. Estará creando marca y además su gráfica contará la historia eficazmente. Si necesita representar valores negativos, culturalmente asociados al rojo, puede usar otros colores con simbolismos parecidos, como el negro. Para valores positivos no se recomienda el uso del rojo ya que la mayoría de personas perciben ese color en sentido contrario. El verde clásico es una mejor e inequívoca opción.

• Si el color de su marca es mayoritariamente verde entenderá que no es apropiado representar valores negativos con ese color. Así que no debe usarse para enfatizar este tipo de gráficas. En cambio para valores positivos como ganancias, crecimientos, etc. no encontramos obstáculos para asociar su marca. Tampoco para enfatizar valores con menos carga simbólica, como por ejemplo el número de trabajadores de sus departamentos.

Algunos trucos extra

Creo que llegados a este punto, todos tenemos claro que lo fundamental en la visualización de datos es que nos cuente una historia de forma clara y concisa. Sin distracciones ni adornos superfluos.

Hemos aprendido a crear una paleta de colores adecuados para su correcta presentación y hemos descubierto cómo usarla eficazmente.

Y aún así podemos subir el listón un poco más con algunos trucos. Por ejemplo:

• Ejes accesibles. Los gráficos rectangulares, como los mapas de calor, deben incluir ejes x e y accesibles por contraste 3:1 para ayudar a definir los límites del gráfico. De esta manera aseguramos la accesibilidad de todos los colores contiguos, tanto vertical como horizontalmente.

• Contornos activos. En los mapas es conveniente delimitar las regiones activas o destacadas con un borde de color accesible al menos 3:1 contra el fondo. Sobretodo si usamos paletas secuenciales. Debemos utilizar todas las herramientas a nuestro alcance para hacer destacar los valores deseados y, a menudo, los contornos son los grandes olvidados.

• Bordes de contraste. Cuando una paleta secuencial se usa en determinadas gráficas es posible que, dependiendo del color de fondo, los tonos de los extremos de nuestra paleta estén en los límites de la legibilidad. En esos casos podemos agregar un borde en un tono accesible para ayudar a la lectura. Suele ocurrir en gráficas con áreas de color como las de barras.

• Límites o fronteras. Para visualizaciones con una densidad contenida de datos a veces es conveniente delimitar las áreas con un borde de color accesible (suele ser el del fondo u otro color neutro para que no tenga carga semántica). Por ejemplo, para las fronteras de mapas.

• Líneas divisorias. Es realmente complicado hacer que la accesibilidad 3:1 que hemos logrado contra el fondo se mantenga al combinar unos colores con otros. Las líneas divisorias facilitan esta tarea tanto en paletas categóricas como secuenciales.

• Texturas. Una forma clásica de identificar categorías sin recurrir al color son las texturas. Son útiles cuando no se tiene acceso a impresoras a color o cuando se busca causar un efecto específico en el usuario. Es conveniente delimitar las áreas con contornos y hacer estas lo suficientemente amplias para que la textura pueda ser percibida y diferenciada con claridad respecto de las adyacentes. Lo ideal es encontrar patrones categóricos y secuenciales que reflejen la densidad del valor que representan. Aunque pueden verse junto a áreas de color sólidas o incluso combinadas no recomendamos este uso. Complejiza la experiencia, fatiga la vista, requiere un esfuerzo de percepción que ralentiza el mensaje y la comprensión de la historia y, en ocasiones, pueden generar efectos ópticos no deseables.

• Información flotante. Siempre que la gráfica lo requiera se pueden incorporar descripciones emergentes. Dan acceso a información más detallada que de otra forma sería inaccesible o permanecería oculta. Aportan interactividad e incluso pueden llegar a personalizar el informe según nuestras necesidades usando filtros, por ejemplo. Pueden variar desde lo mas sencillo hasta paneles flotantes realmente complejos.

• Tablas de datos. Casi se pueden considerar una forma de vitaminar la accesibilidad de la presentación de datos. Obviamente, no disfrutan de la inmediated e impacto visual del resto de gráficas pero a cambio aportan una neutralidad difícilmente manipulable y la posibilidad de moverse solo usando el teclado. La posibilidad de ver una gráfica como tabla de datos debe ser siempre una opción en el menú adicional de visualización.

Conclusión

Lo cierto es que podríamos seguir hablando largo y tendido. La experiencia guarda en la mochila de cada uno prácticas aconsejables, errores a evitar o trucos personales para conseguir una visualización de datos adecuada. Hemos reunido aquí algunas técnicas con base científica para empezar a trabajar minimizando los errores. Pero como con casi todo lo relativo al diseño, al final cada caso particular debe estudiarse y resolverse individualmente.

A modo de consejo final podríamos concluir que si conseguimos una presentación de datos contenida, nítida, rápidamente comprensible y accesible habremos cumplido nuestro objetivo.