Color y accesibilidad

El 8% de los hombres y el 0,5% de las mujeres tienen alguna forma de daltonismo. En un equipo de trabajo de doce personas mixto, hay cuatro posibilidades entre diez de que alguna no distinga bien el rojo del verde — y resulta que rojo-verde es exactamente el código de color más usado en dashboards, mapas de calor y semáforos de KPIs. Un gráfico que codifica "bueno" en verde y "malo" en rojo excluye silenciosamente a esa persona. No falla porque sea feo, ni porque los datos estén mal: falla porque usa un canal de información — el color — que para parte de tu audiencia está roto. Y lo peor: tú no lo notas, porque tú lo ves bien. El gráfico puede ser correcto, vistoso e intuitivo para el 96% de la sala, y completamente inútil para la persona que tiene que tomar la decisión.

Y aquí esta lo importante, que es lo que te ahorro aprender a base de verguenza en una reunion: el color en un gráfico no es decoración. Es un canal de información. Y como cualquier canal de información, puede estar roto sin que tu lo notes — porque tu lo ves bien. Esta lección va de eso: de usar el color para informar sin excluir a nadie, de elegir paletas que signifiquen algo, y de la regla de oro que evita el problema: si quitas el color y solo queda escala de grises, el gráfico se sigue entendiendo?

## El color es un canal, no un adorno

Piensa en un semáforo. El rojo no esta ahi porque quede bonito — esta ahi porque SIGNIFICA "para". El verde SIGNIFICA "avanza". El amarillo SIGNIFICA "atención, va a cambiar". Cada color codifica una instrucción. Si pintas un semáforo con tres tonos de azul, deja de funcionar: sigue siendo bonito, pero ya no comunica. En un gráfico pasa exactamente lo mismo. Cada color que usas tiene que SIGNIFICAR algo, y si no significa nada — si es solo para que el gráfico no sea monocromo — está ocupando un canal de información sin decir nada. Y lo peor: está confundiendo al lector, que buscara que significa esa diferencia de color.

La regla es sencilla: antes de asignar un color, pregúntate "que comunica este color que no comunica la posicion o la etiqueta?". Si la respuesta es "nada, es solo para que sea más visual", no necesitas el color. Y si la respuesta es "diferencia entre categorías" o "intensidad de una variable", entonces el color está haciendo un trabajo real — y tienes que elegirlo con criterio, no con el primer arcoiris que ofrezca la herramienta.

## Tres familias de paleta: secuencial, divergente y cualitativa

No todas las situaciones piden el mismo tipo de color. Hay tres familias de paleta, cada una diseñada para un tipo de dato distinto. Elegir la familia equivocada es como usar un destornillador como martillo: algo harás, pero mal. La analogia que me ayudo a distinguirlas: piensa en un termómetro, un examen y un equipo de fútbol.

• ▹Paleta secuencial (el termómetro) — un solo color que va de claro a oscuro. Cuanto más oscuro, más intenso el valor. Como la columna de mercurio: de menos a más, sin saltos. Úsala para métricas continuas que van de poco a mucho: ingresos por tienda, densidad de poblacion, número de pedidos.
• ▹Paleta divergente (el examen) — dos colores opuestos con un neutro en el centro. Un lado es "bueno" (por encima del objetivo), el otro es "malo" (por debajo), y el centro es "justo en el objetivo". Como una nota: suspenso en rojo, aprobado en verde, el 5 en blanco. Úsala para desviaciones respecto a un punto de referencia: cumplimiento de objetivo, variacion respecto al mes anterior, NPS (satisfaccion).
• ▹Paleta cualitativa (el equipo de fútbol) — colores distintos que no implican orden ni intensidad. Cada color es una categoría diferente, como la camiseta de cada equipo: no hay un equipo "más" que otro por tener un color más oscuro. Úsala para categorías sin jerarquía: regiones, canales de adquisicion, segmentos de cliente.

## Cuando usar cada tipo de paleta

La decisión es mecánica una vez que la interiorizas. Hazte dos preguntas sobre tus datos: 1) los valores tienen un orden natural (de menos a más, de peor a mejor)? 2) hay un punto de referencia desde el que se mide la desviacion (un objetivo, una media, un cero)? Con esas dos respuestas, la paleta se elige sola:

1. 01.Si los valores tienen orden y NO hay punto de referencia: secuencial. Ejemplo: ventas por tienda (de 0 a mucho, sin un "objetivo" al que compararte). Usas un solo color de claro a oscuro.
2. 02.Si los valores tienen orden y SI hay punto de referencia: divergente. Ejemplo: variacion de ventas respecto al mes anterior (puede ser +20% o -15%, y el cero es el punto neutro). Usas dos colores con un neutro en el centro.
3. 03.Si los valores NO tienen orden (son categorías): cualitativa. Ejemplo: ventas por canal (web, tienda física, marketplace). No hay un canal "más" que otro: son distintos. Usas colores diferentes.

El error más común que veo en equipos junior: usar una paleta cualitativa (arcoiris) para un mapa de calor de ventas. El resultado es que el ojo no puede ordenar los colores — no sabes si naranja es más o menos que morado — y el gráfico pierde toda capacidad comunicativa. Un mapa de calor SIEMPRE pide secuencial o divergente, nunca cualitativa.

## El daltonismo: el 8% que no ves

Aproximadamente el 8% de los hombres y el 0,5% de las mujeres tienen alguna forma de deficiencia en la visión del color, lo que comunmente llamamos daltonismo (discromatopsia, en terminologia médica). No es que vean en blanco y negro — eso es extremadamente raro. Lo más frecuente es la dificultad para distinguir entre rojo y verde (protanopia y deuteranopia), que afecta a cerca del 6% de los hombres. En una reunion de diez personas mixta, es probable que al menos una no distinga tu rojo del verde. Y si tu gráfico depende de esa distinción, esa persona no puede leerlo.

La analogia que uso para explicar esto en equipos: imagina que escribes un informe en un idioma que el 8% de tu audiencia no habla. No es un error menor — es una barrera de acceso. Y la ironía es que rojo-verde es exactamente la combinación que la gente elige "intuitivamente" para bueno/malo, arriba/abajo, positivo/negativo. Parece natural, pero excluye a uno de cada doce hombres en tu publico — una de cada veinticuatro personas en un grupo mixto.

## La alternativa que siempre funciona: azul y naranja

Si necesitas dos colores que signifiquen "positivo vs negativo" o "categoría A vs categoría B", la combinación azul-naranja es tu mejor amiga. Se distingue perfectamente con cualquier tipo de daltonismo, tiene buen contraste entre si, y además el convenio cultural funciona: el azul es "frío/neutro" y el naranja es "calido/alerta" — no tan agresivo como el rojo, pero suficientemente diferente. Las paletas de Tableau, por ejemplo, usan azul-naranja como par predeterminado por exactamente este motivo.

Otros pares seguros: azul-rojo (se distinguen en todas las formas de daltonismo porque difieren en luminosidad), morado-amarillo, negro-naranja. La clave no es memorizar pares: es entender el principio. Dos colores son distinguibles con daltonismo si difieren en LUMINOSIDAD, no solo en tono. El rojo y el verde tienen una luminosidad similar — por eso se confunden. El azul es oscuro y el naranja es luminoso — por eso no se confunden incluso si el tono se percibe distinto.

## La regla de oro: el test de la escala de grises

Si imprimes tu gráfico en blanco y negro — o si le quitas la saturacion con un filtro — y ya no puedes leerlo, tu gráfico depende DEMASIADO del color. El color debería ser un refuerzo, no el único vehículo de información. Un gráfico de líneas bien hecho se entiende en escala de grises porque las líneas tienen etiquetas directas, grosores distintos o estilos diferentes (sólida vs punteada). Un gráfico de barras bien hecho se entiende porque las barras están etiquetadas y su posicion ya comunica el valor.

La excepción son los mapas de calor: ahi el color ES el dato, porque no hay posicion ni longitud que lo codifique. En ese caso, la paleta secuencial tiene que funcionar en escala de grises por si sola — y las buenas (viridis, inferno, plasma) están diseñadas exactamente para eso: su luminosidad va monotonamente de oscuro a claro, así que en blanco y negro siguen siendo legibles. La paleta jet (arcoiris) falla este test estrepitosamente: el amarillo y el cian salen casi iguales en gris.

## El exceso de color: la regla de los 6 colores

El ojo humano es bueno distinguiendo 5 o 6 colores a la vez. A partir de 7, empieza a confundirlos — sobre todo si no están uno al lado del otro. Si tienes un gráfico de barras con 12 categorías, cada una de un color distinto, el lector va a pasarse más tiempo yendo de la leyenda al gráfico y de vuelta que entendiendo el mensaje. Y en una pantalla pequeña o impreso, la distinción se pierde del todo.

La solucion no es poner 12 colores mejores: es repensar la estructura del gráfico. Si tienes 12 categorías, seguro que puedes agrupar las 7 menores en "Otros" y quedarte con 5+1. O seguro que puedes usar un gráfico de barras horizontales ordenado por valor, donde el color es UNIFORME y es la longitud de la barra la que comunica — así no necesitas 12 colores porque la posicion ya hace el trabajo. El color solo diferencia lo que la posicion no puede diferenciar.

## Contraste: texto que se lee vs texto que decora

El daltonismo es un problema de distinguir colores entre si. El contraste es otro problema distinto: es no poder leer un texto porque su color es demasiado parecido al del fondo. El gris claro sobre blanco, el azul claro sobre fondo celeste, el texto dentro de una barra de color que se funde con ella. No necesitas daltonismo para que esto te afecte — basta con una pantalla en una sala iluminada, un proyector lavado por la luz del día, o simplemente ojos cansados a las seis de la tarde.

Las directrices WCAG (Web Content Accessibility Guidelines, es decir, las pautas de accesibilidad de contenido web) establecen un ratio mínimo de contraste de 4.5:1 para texto normal y 3:1 para texto grande. En la practica para gráficos, la regla es: si tienes que entrecerrar los ojos para leer una etiqueta o una leyenda, el contraste es insuficiente. Los ejes en gris claro que tanto gustan a los disenadores "minimalistas" suelen ser ilegibles con un proyector. Los números blancos dentro de barras de color amarillo o verde claro desaparecen. Y las leyendas con punto de color de 8 píxeles son indescifrables para cualquiera con vista normal pasados los 40.

La solucion practica: usa texto oscuro sobre fondos claros y texto claro sobre fondos oscuros. Si el texto va sobre una barra de color, comprueba que el contraste funciona con el tono MAS CLARO de la paleta — el más oscuro probablemente funcione, pero el claro es el que falla. Y si la barra es demasiado clara para texto oscuro dentro, pon la etiqueta fuera de la barra.

## Verificar la accesibilidad: herramientas y flujo

No necesitas memorizar tablas de daltonismo ni ratios de contraste. Hay herramientas que lo comprueban en un clic:

• ▹Coblis (Color Blindness Simulator, gratuito en web) — subes tu imagen y te la muestra simulando protanopia, deuteranopia, tritanopia y achromatopsia. Es la comprobación más rapida.
• ▹Color Oracle (descarga gratuita para Windows y Mac) — aplica un filtro de daltonismo a toda tu pantalla en tiempo real. Activas el filtro, miras tu dashboard y ves exactamente lo que ve una persona con deficiencia de color. Lo uso antes de cada presentación.
• ▹WebAIM Contrast Checker — pones el color de texto y el color de fondo, y te dice si el ratio de contraste cumple WCAG AA o AAA. Para etiquetas de gráficos, apunta a 4.5:1 mínimo.
• ▹Matplotlib: plt.style.use("tableau-colorblind10") — activa una paleta de 10 colores diseñada para ser distinguible con cualquier forma de daltonismo. Es el cambio más barato: una línea de código.

## Más allá del color: canales redundantes

La forma más robusta de hacer un gráfico accesible no es elegir "los colores correctos" — es no depender SOLO del color. Si además del color usas un segundo canal de información, el gráfico funciona incluso si el color falla completamente. Estos son los canales redundantes más útiles:

• ▹Forma o patron — en un gráfico de dispersión, usa círculos vs triangulos vs cuadrados además de colores distintos. En barras, usa patrones de relleno (rayas, puntos) además del color.
• ▹Etiquetas directas — en vez de una leyenda aparte, etiqueta cada línea o barra directamente. Así no necesitas recordar que color es cual.
• ▹Posicion — ordena las barras de mayor a menor. El orden ya comunica el ranking sin necesitar color.
• ▹Grosor o estilo de línea — línea sólida vs punteada vs de puntos. Distingue series sin necesitar color.
• ▹Iconos o símbolos — una flecha verde hacia arriba y una flecha roja hacia abajo se distinguen por la DIRECCIÓN, no solo por el color.

La idea no es convertir cada gráfico en un amasijo de patrones y formas — eso seria el camino contrario al principio de "menos tinta, más mensaje" que ya viste. La idea es que SIEMPRE haya al menos un canal además del color que porte la información crítica. Si el color dice "esto es bueno y esto es malo", que la dirección de la flecha o el signo +/- también lo diga. Si el color dice "esto es la serie A y esto es la serie B", que la etiqueta directa también lo diga.

## El caso de las paletas en la practica: un ejemplo con matplotlib

Vamos a aterrizar esto con código. No para que ejecutes un gráfico ahora mismo — eso lo puedes hacer en tu entorno local — sino para que veas como se aplica cada decisión en la herramienta que ya conoces:

1import matplotlib.pyplot as plt
2import numpy as np
3
4# Datos: variacion de ventas por tienda respecto al objetivo
5tiendas = ['Norte', 'Sur', 'Este', 'Oeste', 'Centro']
6variacion = [12, -8, 5, -3, 22]  # % respecto al objetivo
7
8# Paleta DIVERGENTE: azul para positivo, naranja para negativo
9# (NO rojo-verde: excluye al 8% de hombres)
10colores = ['#4e79a7' if v >= 0 else '#f28e2b' for v in variacion]
11
12fig, ax = plt.subplots(figsize=(8, 5))
13barras = ax.bar(tiendas, variacion, color=colores)
14
15# Canal redundante: etiqueta con signo +/- sobre cada barra
16for barra, valor in zip(barras, variacion):
17    signo = '+' if valor >= 0 else ''
18    ax.text(barra.get_x() + barra.get_width()/2, valor,
19            f'{signo}{valor}%', ha='center',
20            va='bottom' if valor >= 0 else 'top',
21            fontsize=11, fontweight='bold')
22
23ax.axhline(0, color='gray', linewidth=0.8)  # Linea del objetivo
24ax.set_ylabel('Variacion vs objetivo (%)')
25ax.set_title('Ventas por tienda: desviacion del objetivo mensual')
26ax.spines['top'].set_visible(False)
27ax.spines['right'].set_visible(False)
28plt.tight_layout()
29plt.show()

## Resumen: las 5 preguntas antes de elegir el color

1. 01.Que SIGNIFICA este color? Si no significa nada (solo decora), quitalo.
2. 02.Mis datos son continuos (secuencial), tienen un punto de referencia (divergente) o son categorías (cualitativa)?
3. 03.Paso el test de la escala de grises? Si lo imprimo en blanco y negro, se sigue entendiendo?
4. 04.Funciona con daltonismo? He evitado rojo-verde como único diferenciador?
5. 05.Tengo un canal redundante (etiqueta, icono, patron, grosor) que porte la misma información que el color?

Si puedes responder "si" a las cinco, tu gráfico funciona para todo el mundo. Si falla alguna, tienes un problema de accesibilidad que puedes arreglar antes de que alguien te lo senale en la reunion.