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 aqui esta lo importante, que es lo que te ahorro aprender a base de verguenza en una reunion: el color en un grafico no es decoracion. Es un canal de informacion. Y como cualquier canal de informacion, puede estar roto sin que tu lo notes — porque tu lo ves bien. Esta leccion 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 grafico se sigue entendiendo?

### El color es un canal, no un adorno

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

La regla es sencilla: antes de asignar un color, preguntate "que comunica este color que no comunica la posicion o la etiqueta?". Si la respuesta es "nada, es solo para que sea mas visual", no necesitas el color. Y si la respuesta es "diferencia entre categorias" o "intensidad de una variable", entonces el color esta 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 disenada para un tipo de dato distinto. Elegir la familia equivocada es como usar un destornillador como martillo: algo haras, pero mal. La analogia que me ayudo a distinguirlas: piensa en un termometro, un examen y un equipo de futbol.

• ▹Paleta secuencial (el termometro) — un solo color que va de claro a oscuro. Cuanto mas oscuro, mas intenso el valor. Como la columna de mercurio: de menos a mas, sin saltos. Usala para metricas continuas que van de poco a mucho: ingresos por tienda, densidad de poblacion, numero 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. Usala para desviaciones respecto a un punto de referencia: cumplimiento de objetivo, variacion respecto al mes anterior, NPS (satisfaccion).
• ▹Paleta cualitativa (el equipo de futbol) — colores distintos que no implican orden ni intensidad. Cada color es una categoria diferente, como la camiseta de cada equipo: no hay un equipo "mas" que otro por tener un color mas oscuro. Usala para categorias sin jerarquia: regiones, canales de adquisicion, segmentos de cliente.

### Cuando usar cada tipo de paleta

La decision es mecanica una vez que la interiorizas. Hazte dos preguntas sobre tus datos: 1) los valores tienen un orden natural (de menos a mas, 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 categorias): cualitativa. Ejemplo: ventas por canal (web, tienda fisica, marketplace). No hay un canal "mas" que otro: son distintos. Usas colores diferentes.

El error mas comun 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 mas o menos que morado — y el grafico 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 vision del color, lo que comunmente llamamos daltonismo (discromatopsia, en terminologia medica). No es que vean en blanco y negro — eso es extremadamente raro. Lo mas 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 grafico depende de esa distincion, 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 ironia es que rojo-verde es exactamente la combinacion 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 "categoria A vs categoria B", la combinacion azul-naranja es tu mejor amiga. Se distingue perfectamente con cualquier tipo de daltonismo, tiene buen contraste entre si, y ademas el convenio cultural funciona: el azul es "frio/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 grafico en blanco y negro — o si le quitas la saturacion con un filtro — y ya no puedes leerlo, tu grafico depende DEMASIADO del color. El color deberia ser un refuerzo, no el unico vehiculo de informacion. Un grafico de lineas bien hecho se entiende en escala de grises porque las lineas tienen etiquetas directas, grosores distintos o estilos diferentes (solida vs punteada). Un grafico de barras bien hecho se entiende porque las barras estan etiquetadas y su posicion ya comunica el valor.

La excepcion 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) estan disenadas exactamente para eso: su luminosidad va monotonamente de oscuro a claro, asi 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 estan uno al lado del otro. Si tienes un grafico de barras con 12 categorias, cada una de un color distinto, el lector va a pasarse mas tiempo yendo de la leyenda al grafico y de vuelta que entendiendo el mensaje. Y en una pantalla pequena o impreso, la distincion se pierde del todo.

La solucion no es poner 12 colores mejores: es repensar la estructura del grafico. Si tienes 12 categorias, seguro que puedes agrupar las 7 menores en "Otros" y quedarte con 5+1. O seguro que puedes usar un grafico de barras horizontales ordenado por valor, donde el color es UNIFORME y es la longitud de la barra la que comunica — asi 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 dia, 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 minimo de contraste de 4.5:1 para texto normal y 3:1 para texto grande. En la practica para graficos, 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 numeros blancos dentro de barras de color amarillo o verde claro desaparecen. Y las leyendas con punto de color de 8 pixeles 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 mas 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 comprobacion mas 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 presentacion.
• ▹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 graficos, apunta a 4.5:1 minimo.
• ▹Matplotlib: plt.style.use("tableau-colorblind10") — activa una paleta de 10 colores disenada para ser distinguible con cualquier forma de daltonismo. Es el cambio mas barato: una linea de codigo.

### Mas alla del color: canales redundantes

La forma mas robusta de hacer un grafico accesible no es elegir "los colores correctos" — es no depender SOLO del color. Si ademas del color usas un segundo canal de informacion, el grafico funciona incluso si el color falla completamente. Estos son los canales redundantes mas utiles:

• ▹Forma o patron — en un grafico de dispersion, usa circulos vs triangulos vs cuadrados ademas de colores distintos. En barras, usa patrones de relleno (rayas, puntos) ademas del color.
• ▹Etiquetas directas — en vez de una leyenda aparte, etiqueta cada linea o barra directamente. Asi 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 linea — linea solida vs punteada vs de puntos. Distingue series sin necesitar color.
• ▹Iconos o simbolos — una flecha verde hacia arriba y una flecha roja hacia abajo se distinguen por la DIRECCION, no solo por el color.

La idea no es convertir cada grafico en un amasijo de patrones y formas — eso seria el camino contrario al principio de "menos tinta, mas mensaje" que ya viste. La idea es que SIEMPRE haya al menos un canal ademas del color que porte la informacion critica. Si el color dice "esto es bueno y esto es malo", que la direccion de la flecha o el signo +/- tambien lo diga. Si el color dice "esto es la serie A y esto es la serie B", que la etiqueta directa tambien lo diga.

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

Vamos a aterrizar esto con codigo. No para que ejecutes un grafico ahora mismo — eso lo puedes hacer en tu entorno local — sino para que veas como se aplica cada decision 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 categorias (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 unico diferenciador?
5. 05.Tengo un canal redundante (etiqueta, icono, patron, grosor) que porte la misma informacion que el color?

Si puedes responder "si" a las cinco, tu grafico 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.