Editorial Craft Bible
Color y codificación en infografía
Inicio Infografía editorial Color y codificación en infografía
Infografía editorial

Color y codificación en infografía

11 reglas ColorBrewer (Brewer, Penn State) · Cairo, The Truthful ArtColorBrewer2.org · Cairo, How Charts LieColorBrewer2.org · Brewer & Harrower, cartografía temáticaColorBrewer2.org (diverging schemes) · Cairo, The Truthful Art
71

Color y codificación en infografía

11 reglas
756

Un tipo de escala por variable, nunca mezclado

El color de datos cae en tres familias, y cada una responde a una pregunta distinta. Categórica: matices distintos sin orden (regiones, líneas de producto). Secuencial: un solo matiz de claro a oscuro para una magnitud ordenada (densidad de población). Divergente: dos matices desde un punto medio neutro para valores por encima y por debajo de una referencia (superávit vs. déficit). Clasifica el dato primero, luego elige la familia; nunca combines lógicas en el mismo mapa o gráfico.

Correcto
Categórica
Secuencial
Divergente
Cada familia coincide con la naturaleza de su dato.
Evitar
Densidad
Un arcoíris de matices codifica una magnitud ordenada: el ojo no lee el orden de menor a mayor.
ColorBrewer (Brewer, Penn State) · Cairo, The Truthful Art
757

Categórica: 6 a 8 colores distinguibles, no más

Más allá de 8 categorías el ojo humano ya no discrimina matices de forma fiable en una sola vista, y a partir de ahí la leyenda se vuelve una tarea de búsqueda. Limita la paleta a 6 u 8 colores claramente separados; agrupa la cola larga en un bloque de otros, o rediseña como small multiples para que cada categoría tenga su panel. En tinta CMYK el techo seguro es aún menor, porque los matices vecinos se ensucian bajo registro y ganancia de punto.

Correcto
Seis matices bien separados siguen siendo nombrables uno a uno.
Evitar
Catorce categorías se funden en vecinos casi idénticos que nadie distingue.
ColorBrewer2.org · Cairo, How Charts Lie
758

Secuencial: 3 a 7 escalones, nunca degradado crudo en impreso

Un degradado continuo se ve bien en una pantalla calibrada pero pierde sus escalones en tinta CMYK bajo calibración despareja de imprenta, así que el lector no distingue un nivel del siguiente. Rompe la rampa en 3 a 7 clases discretas (estilo ColorBrewer) con una leyenda de rangos explícita, para que cada banda mapee a un intervalo declarado. Las clases discretas también sobreviven la fotocopia y la impresión de bajo costo mucho mejor que un desvanecido suave.

Correcto
0255075100
Cinco clases etiquetadas: cada banda mapea a un rango declarado.
Evitar
claro = ?oscuro = ?
Degradado crudo: sin escalones legibles, imposible leer un valor.
ColorBrewer2.org · Brewer & Harrower, cartografía temática
759

Divergente: punto medio neutro, nunca blanco puro

Una escala divergente pivota sobre un valor de referencia (cero, un promedio, una meta), y ese punto medio debe leerse como sin efecto, no como dato faltante. Usa un neutro apagado (gris o beige) en el centro, nunca blanco puro si el fondo de página también es blanco, o la banda del cero desaparece y el lector la confunde con un hueco en los datos. Los dos brazos deben ser parejos en saturación y valor para que ningún lado se vea más fuerte por accidente.

Correcto
−    0 (neutro)    +
Un punto medio beige se lee claramente como cero efecto.
Evitar
el cero blanco se funde con la página
El blanco puro al centro desaparece y se lee como hueco de datos.
ColorBrewer2.org (diverging schemes) · Cairo, The Truthful Art
760

Verifica siempre en simulación de daltonismo

Aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen una deficiencia de visión de color, predominantemente rojo–verde (deuteranopia y protanopia). Nunca codifiques un binario crítico, como aprobado/reprobado o alza/baja, solo con rojo y verde, porque esos dos matices colapsan en el mismo tono turbio para millones de lectores. Pasa la pieza por un simulador de deuteranopia antes de aprobar, y acompaña cada matiz crítico con una segunda señal.

Correcto
vs
Azul vs. naranja sobrevive la deuteranopia: distintos en valor y matiz.
Azul/naranja sigue separable para la deficiencia rojo-verde.
Evitar
vs
Cómo se ve el mismo par rojo/verde bajo deuteranopia simulada.
Rojo vs. verde colapsa en un solo tono indistinto.
National Eye Institute · WCAG 2.1 SC 1.4.1 Use of Color
761

Da a cada color un segundo canal redundante

Todo color que codifica una categoría o estado debe llevar una segunda señal: la forma de un icono, un patrón de trama, o una etiqueta directa. Esto es lo que mantiene la pieza legible para quien no percibe el matiz, o lo ve en escala de grises, una fotocopia, un fax, o una impresión de respaldo en blanco y negro. El color solo es un punto único de falla; la codificación redundante es WCAG 1.4.1 y sencillamente un seguro de impresión.

Correcto
Menudeo · diagonal
Mayoreo · puntos
En línea · borde punteado
Color más patrón: sigue leyéndose en escala de grises.
Evitar
Menudeo
Mayoreo
En línea
Solo matiz: la fotocopia o el lector daltónico pierde la clave.
WCAG 2.1 SC 1.4.1 Use of Color · ISO 14289 (PDF/UA)
762

Haz la prueba de escala de grises antes de aprobar

Convierte la pieza entera a blanco y negro y míralo de nuevo. Si dos categorías codificadas por color se vuelven indistinguibles y nada más las diferencia, la codificación falló y debes corregirla en valor (luminosidad), no solo en matiz. Dos colores pueden diferir fuerte en matiz pero compartir casi la misma claridad, así que desaparecen en escala de grises, con luz tenue, y para muchos lectores daltónicos a la vez.

Correcto
color
grises
Los dos matices difieren en valor, así que siguen distintos en gris.
Evitar
color
grises
Matices de igual valor se funden en un gris: se pierden las categorías.
WCAG 2.1 SC 1.4.1 · Tufte, Envisioning Information
763

Reserva el acento de marca para el dato clave

Si el color de marca aparece en cada elemento, fondo y borde, deja de significar este es el importante. Gasta el acento saturado solo en el dato o serie protagonista, el punto que la pieza existe para comunicar, y dibuja todo lo demás en una escala neutra de grises. La escasez es lo que le da al acento su poder de señalar; el abuso aplana todo el gráfico a un solo campo ruidoso e indiferenciado.

Correcto
Una barra con acento: el ojo aterriza en el punto al instante.
Evitar
Toda barra con acento: nada resalta, el acento es ruido.
Tufte, The Visual Display of Quantitative Information · Cairo
764

Mantén la codificación cromática consistente en la serie

Si Producto A es azul en la ficha 1, debe ser azul en toda pieza relacionada de la misma campaña. Cambiar el color de una categoría entre piezas destruye la memoria visual que el lector acumula y lo obliga a re-aprender la clave cada vez. Fija el mapeo dato–color en un token/leyenda compartido al inicio del proyecto y reúsalo, igual que reusarías el color de un logotipo.

Correcto
FICHA 1
Producto A
Producto B
FICHA 2
Producto A
Producto B
A sigue azul entre fichas: el lector conserva la clave.
Evitar
FICHA 1
Producto A
Producto B
FICHA 2
Producto A
Producto B
Los colores se invierten entre fichas: el lector re-aprende la clave.
Cairo, The Functional Art · principios de sistema de marca
765

Verifica el contraste del label contra cada color de dato, no la página

Los data labels encima de barras o áreas de color deben cumplir WCAG AA, 4.5:1 para texto normal, contra el color específico de esa barra, no contra el fondo general de la página. Un label blanco funciona sobre un azul profundo pero es ilegible sobre un amarillo claro de la misma escala secuencial. Cambia el label a oscuro o claro según la banda, ponle una placa sutil detrás, o sácalo del relleno por completo.

Correcto
64
41
22
El color del label cambia por banda, así cada uno mantiene 4.5:1.
Evitar
64
41
22
Un solo label blanco para todas las bandas: ilegible sobre la clara.
WCAG 2.1 SC 1.4.3 Contrast (Minimum) · W3C
766

Nunca uses un degradado decorativo que no codifica nada

Un degradado en un fondo o forma que no lleva ningún dato se lee como una codificación secuencial genuina cuando hay una de verdad al lado, así que el espectador busca un significado que no está. Reserva los degradados exclusivamente para donde representan magnitud; rellena las superficies decorativas con un tinte plano o un neutro sólido. Si una forma no es una escala, no debe desvanecerse.

Correcto
ENCABEZADO
Un tinte plano de encabezado: nada finge codificar magnitud.
Evitar
ENCABEZADO
Un desvanecido decorativo imita una escala secuencial y confunde.
Tufte, chartjunk · Cairo, How Charts Lie