Tendencias de Diseño

Color en visualización de datos: Gráficos, diagramas y mapas

9 min de lectura

El color en la visualización de datos no es decoración. Es codificación: un canal que lleva información igual que la posición, la longitud y el tamaño. Cuando el color se usa bien, los espectadores captan los patrones de inmediato. Cuando se usa descuidadamente, los gráficos engañan, confunden o excluyen a segmentos enteros de la audiencia.

Esta guía cubre los tres tipos canónicos de escala de color, cómo el daltonismo remodela las decisiones de visualización de datos, y los errores más comunes que socavan un trabajo por lo demás sólido.


Por qué el color es una codificación poderosa —y peligrosa—

Entre los atributos visuales pre-atentivos estudiados en la investigación de percepción, el color destaca por su velocidad bruta. Los espectadores detectan un punto de color distinto en un gráfico de dispersión de miles en milisegundos, sin búsqueda consciente. Este poder es real, pero viene con limitaciones.

El color codifica información de forma efectiva solo cuando:

  1. El espectador puede distinguir los valores codificados
  2. La codificación es intuitiva (no arbitraria)
  3. Las elecciones de color sobreviven diferentes condiciones de visualización (impresión, proyector, visión daltónica)

Viola cualquiera de estas condiciones y el color deja de ser una señal útil y se convierte en ruido. Los tipos de escala que se presentan a continuación son respuestas estructuradas a cada una de estas limitaciones.


Escalas de color secuenciales: De claro a oscuro

Las escalas secuenciales representan datos que se mueven en una dirección: típicamente de valores bajos a valores altos, o de escaso a denso. La característica definitoria es un solo tono que varía en luminosidad y a veces en saturación.

Cómo funcionan las escalas secuenciales

Una escala secuencial ancla el tinte más claro al valor de datos más bajo y el tono más oscuro al valor más alto. Cada valor intermedio recibe un color ubicado proporcionalmente a lo largo de ese continuo.

Una escala secuencial práctica de un solo tono para la densidad de población geográfica:

Valor Hex Descripción
Muy bajo #EFF6FF Azul casi blanco
Bajo #BFDBFE Azul cielo pálido
Medio #60A5FA Azul claro
Alto #2563EB Azul vívido
Muy alto #1E3A8A Azul marino profundo

Esta codificación es intuitiva: más azul significa más. Los espectadores con cualquier percepción del color pueden leer la escala porque opera sobre la luminancia, no sobre la diferenciación de tonos.

Orientación práctica

  • Evita los degradados arcoíris (espectrales) en contextos secuenciales. Los degradados espectrales —de rojo a naranja a amarillo a verde a azul— crean bordes perceptuales falsos en los límites de los tonos. Un cambio repentino de amarillo a verde alrededor del punto medio señala una ruptura categórica que no existe en los datos. Las paletas secuenciales perceptualmente uniformes (como las derivadas de OKLCH o CIELAB) evitan este artefacto.
  • Usa una progresión perceptualmente uniforme. Uniforme significa que pasos iguales en los datos producen pasos visualmente iguales en el color. Las progresiones no uniformes enfatizan en exceso ciertos rangos de valores.
  • Extremo saturado, origen desaturado. Un origen de casi blanco ligeramente saturado y un extremo saturado y oscuro dan el rango perceptual más amplio.

Puedes construir escalas secuenciales de un solo tono comenzando desde un tono base en el generador de paletas y combinándolo con el generador de tonos para asegurar pasos suaves.


Escalas de color divergentes: Dos extremos de tono

Las escalas divergentes representan datos que tienen un punto medio significativo. Cuando los valores por encima y por debajo de ese punto medio son conceptualmente diferentes —no solo cuantitativamente diferentes—, una escala divergente hace visibles ambas mitades simultáneamente.

Cuándo usar una escala divergente

Los casos de uso clásicos incluyen:

  • Resultados electorales: rojo para ventaja republicana, azul para ventaja demócrata, morado neutro o blanco para una división 50/50
  • Rendimiento financiero: rojo para pérdidas, verde para ganancias, neutro para punto de equilibrio
  • Anomalías de temperatura: azul para por debajo del promedio, rojo para por encima del promedio, blanco para la norma histórica
  • Puntuaciones de sentimiento: sentimiento negativo a sentimiento positivo, neutro en el centro

Diseñar una escala divergente

Una escala divergente requiere tres anclajes: los dos extremos de tono y el centro neutro.

Ejemplo para una escala de satisfacción de encuesta (muy insatisfecho → neutro → muy satisfecho):

Posición Hex Descripción
Muy insatisfecho #991B1B Rojo profundo
Insatisfecho #F87171 Rojo suave
Neutro #F5F5F4 Blanco roto
Satisfecho #4ADE80 Verde suave
Muy satisfecho #166534 Verde profundo

El centro neutro debe ser casi acromático —un gris claro o blanco roto— para que los valores a cada lado del punto medio se lean como categorías distintas.

Problemas comunes

  • Rango perceptual desigual en cada lado. El rojo y el verde no tienen la misma intensidad visual a niveles equivalentes de saturación. Usa una herramienta para comprobar que tus dos extremos sean perceptualmente equidistantes del neutro, no solo numéricamente equidistantes.
  • Elegir pares de tonos que colapsan para espectadores daltónicos. Las escalas divergentes rojo-verde son el culpable más común. Esto se cubre en detalle en la sección sobre daltonismo a continuación.

Escalas de color categóricas (cualitativas): Tonos distintos

Las escalas categóricas codifican datos nominales: categorías que no tienen orden inherente. El País A no es más o menos que el País B; simplemente es diferente. Esto requiere colores que sean tan perceptualmente distintos entre sí como sea posible, sin orden o jerarquía implícitos.

Principios de las buenas paletas categóricas

Distancia perceptual máxima. Los colores deben estar distribuidos alrededor del círculo de tonos, no agrupados. Una paleta que usa tres azules, dos verdes y un morado no funcionará porque los espectadores confundirán los tonos similares.

Luminosidad aproximadamente igual. Si algunas categorías son claras y otras oscuras, las oscuras dominarán visualmente aunque no sean más importantes. Apunta a una luminancia similar en todos los colores categóricos.

No más de 7-10 categorías, idealmente menos. La memoria a corto plazo humana retiene aproximadamente 7 fragmentos. Pedir a los espectadores que rastreen más de 7 asociaciones distintas de color a categoría impone una carga cognitiva que socava el gráfico. Si tienes 15 países, reconsidera si el color es la codificación correcta.

Una paleta categórica equilibrada de 6 colores:

Categoría Hex Tono
Categoría A #3B82F6 Azul
Categoría B #EF4444 Rojo
Categoría C #10B981 Verde azulado
Categoría D #F59E0B Ámbar
Categoría E #8B5CF6 Morado
Categoría F #F97316 Naranja

Azul, rojo, verde, ámbar, morado y naranja están ampliamente distribuidos alrededor del círculo de tonos y tienen valores de luminosidad similares.

Probar paletas categóricas

Antes de finalizar, verifica que tu paleta funcione cuando:

  • Se imprime en blanco y negro (comprueba que la similitud de luminancia no elimine las distinciones)
  • Se ve en tamaño pequeño en una leyenda
  • Lo ve alguien con daltonismo (ver a continuación)

El simulador de daltonismo maneja la tercera prueba.


Daltonismo en visualización de datos

Aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen alguna forma de deficiencia de visión del color hereditaria. En una audiencia típica de lugar de trabajo de 50 personas, 3-4 espectadores probablemente experimentan el color de forma diferente. En una visualización de acceso público, el número no es insignificante.

Tipos más relevantes para la visualización de datos

Deuteranopia / Deuteranomalía: Sensibilidad reducida al verde. La forma más común (aproximadamente el 5% de los hombres). El rojo y el verde parecen similares en tono; la distinción colapsa en un rango amarillo-marrón-gris.

Protanopia / Protanomalía: Sensibilidad reducida al rojo. Menos común (aproximadamente el 1% de los hombres). El rojo aparece más oscuro y menos saturado; se produce confusión rojo-verde.

Tritanopia: Rara (aproximadamente el 0.001%). Confusión azul-amarillo. Afecta a muy pocos pero se vuelve relevante cuando el azul es el color categórico principal.

El desastre del rojo-verde

El fallo de daltonismo más común en visualización de datos es la escala divergente rojo-verde, usada constantemente para datos financieros, mapas e indicadores de estado. Para los espectadores con deuteranopia y protanopia, los dos extremos de tono colapsan a tonos casi idénticos de marrón u oliva. El gráfico transmite casi ninguna información a aproximadamente el 6% de los espectadores masculinos.

Alternativas:

Reemplaza rojo-verde por:

  • Azul-naranja (#1D4ED8 a #EA580C): Ampliamente distinguible en todos los tipos comunes de visión del color
  • Morado-verde (#7C3AED a #059669): También robusto bajo deuteranopia y protanopia
  • Rojo-azul con fuerte diferencia de luminosidad: Funciona para la mayoría de las formas si el contraste de luminosidad es suficientemente fuerte

Los indicadores de estado semáforo (rojo-amarillo-verde) tienen el mismo problema. Reemplaza con formas y etiquetas como codificación primaria, y usa el color como pista redundante secundaria.

Estrategias de diseño para robustez al daltonismo

  1. Usa contraste de luminancia, no solo contraste de tono. Los colores que difieren significativamente en luminosidad siguen siendo distinguibles bajo la mayoría de las formas de daltonismo porque la percepción de luminancia se preserva en gran medida.

  2. Añade codificaciones redundantes. No confíes solo en el color. Usa:

  3. Estilos de línea diferentes (continua, discontinua, punteada) en gráficos de líneas
  4. Formas de puntos diferentes en gráficos de dispersión
  5. Etiquetas directas en las series de datos
  6. Rayado o patrones en los gráficos de barras

  7. Prueba con un simulador. Usa el simulador de daltonismo para ver tu paleta a través de filtros de deuteranopia, protanopia y tritanopia antes de publicar.

  8. Usa paletas accesibles establecidas. Wong (2011) publicó una paleta de 8 colores diseñada específicamente para ser robusta al daltonismo: negro, naranja, azul cielo, verde azulado, amarillo, azul, bermellón y morado rojizo.


Mejores prácticas y errores comunes

Mejores prácticas

Hacer coincidir el tipo de escala con el tipo de datos. Secuencial para datos continuos ordenados. Divergente para datos con un centro significativo. Categórica para datos nominales no ordenados. Mezclar estos (usar una escala secuencial para datos categóricos) crea un orden implícito que engaña.

Poner los colores más oscuros en los datos más importantes. Los valores más oscuros atraen más atención. Si tus valores más altos son los más accionables, anclarlos al extremo oscuro de una escala secuencial alinea la atención visual con la prioridad de los datos.

Considerar el fondo. Los colores aparecen diferentes sobre fondos blancos, grises u oscuros. Una escala diseñada sobre un fondo blanco puede verse plana o turbia en un dashboard gris. Prueba sobre el fondo real.

Usar una escala coherente a lo largo de gráficos relacionados. Si tres gráficos en un dashboard muestran todos las cifras de ventas, usa la misma escala de color para la misma métrica. La inconsistencia obliga a los espectadores a releer cada leyenda.

Mantener las leyendas cerca de los datos. Cuanto más lejos esté la leyenda, más trabajo cognitivo deben hacer los espectadores para decodificar los colores. Las etiquetas directas eliminan por completo la búsqueda en la leyenda.

Errores comunes

Escalas arcoíris para datos continuos. Como se señala anteriormente, los degradados espectrales introducen bordes perceptuales falsos y distorsionan los datos. Una escala de un solo tono perceptualmente uniforme es casi siempre superior.

Usar el color como única codificación. Si tu gráfico fallara completamente al convertirse a escala de grises, está dependiendo demasiado del color. Añade forma, posición o etiquetas directas.

Demasiados colores categóricos. Más de 7-8 colores distintos en una leyenda es una señal de que los datos necesitan reestructurarse, no de que necesitas una paleta más grande.

Colores de bajo contraste en rellenos de mapa. Los mapas geográficos muestran muchos colores simultáneamente en tamaños pequeños de polígonos. Los colores que parecen distintos en aislamiento pueden ser muy difíciles de distinguir a escala de mapa. Prueba en el tamaño de visualización real.

Ignorar el efecto del proyector. Los proyectores atenúan el color significativamente. Una paleta que se lee perfectamente en pantalla puede perder todas las distinciones de rango medio en una presentación en sala de conferencias. Añade margen de contraste.

Codificar con solo color en impresión. La impresión puede reproducir los colores de forma diferente a la pantalla, y la accesibilidad para los materiales impresos es igualmente importante. Diseña teniendo en mente la impresión en escala de grises.


Conclusiones clave

  • Usa escalas secuenciales (de claro a oscuro, un solo tono) para datos continuos ordenados donde un extremo significa "más" de algo.
  • Usa escalas divergentes (dos extremos de tono, centro neutro) para datos con un punto medio significativo: financiero, político, desviación de la línea de base.
  • Usa escalas categóricas (tonos perceptualmente distintos) para datos nominales sin orden implícito; limita a un máximo de 7-10 categorías.
  • Evita los degradados arcoíris para datos secuenciales: introducen bordes falsos y engañan la percepción.
  • La codificación rojo-verde falla para aproximadamente el 6-8% de los hombres; reemplaza con pares divergentes azul-naranja o morado-verde.
  • Prueba cada paleta con el simulador de daltonismo antes de publicar.
  • Añade codificaciones redundantes (formas, etiquetas, estilos de línea) para que la visualización siga siendo legible cuando el color falla.
  • Usa el generador de paletas para construir y evaluar paletas de color para tu tipo de datos específico.

Colores relacionados

Marcas relacionadas

Herramientas relacionadas