Color, Accesibilidad y Anotaciones

La Presentación que Nadie Pudo Leer

🔄 Repaso rápido: En la lección anterior, exploramos diseño de dashboards y layout. Ahora construyamos sobre esa base con los detalles que hacen la diferencia.

Un analista de datos presenta resultados trimestrales al equipo directivo. Gráficas hermosas. Paleta de colores profesional. Animaciones pulidas.

El director financiero entrecierra los ojos. “¿Cuál línea es ingresos y cuál es gastos? Se ven igual.”

El analista había usado rojo para gastos y verde para ingresos. El director financiero era parte del 8% de hombres con daltonismo rojo-verde. Toda la presentación era inútil para él.

El color no es decoración. Es información. Y cuando falla, la visualización falla. Esta lección te enseña a usar color efectivamente, diseñar para la accesibilidad y agregar anotaciones que completen la historia.

Teoría del Color para Datos

Paletas Secuenciales: Un Color, Muchos Valores

Usa paletas secuenciales cuando muestras magnitud — de bajo a alto, de claro a oscuro.

Azul claro ░░░ → ███ Azul oscuro
Valor bajo  ← — — → Valor alto

Usa para: Heatmaps, mapas de coropletas, escalas de intensidad. Mientras más oscuro el color, más alto el valor. Intuitivo y accesible.

Buena práctica: Usa un solo tono con luminosidad variable. El azul funciona universalmente bien (sin asociaciones culturales que interfieran con la lectura de datos).

Paletas Divergentes: Dos Extremos Alrededor de un Centro

Usa paletas divergentes cuando hay un punto medio significativo.

Rojo ███ ← — Neutro — → ███ Azul
Debajo de meta    En meta    Arriba de meta

Usa para: Rendimiento vs. meta, cambio positivo/negativo, puntajes de sentimiento. El centro es neutro; los extremos muestran dirección e intensidad.

Buena práctica: Elige tonos que funcionen para personas con daltonismo. Azul-a-naranja es más seguro que rojo-a-verde.

Paletas Categóricas: Diferentes Categorías

Usa colores distintos cuando las categorías no tienen orden natural.

Producto A: Azul    ███
Producto B: Naranja ███
Producto C: Verde   ███

Usa para: Comparar categorías no relacionadas (líneas de producto, regiones, canales).

Buena práctica: Máximo 5-7 colores. Usa colores distinguibles incluso en tamaños pequeños. Evita usar rojo y verde juntos como colores de categoría.

Las Reglas del Color

Regla 1: Significado antes que belleza. No elijas colores porque se ven bonitos juntos. Elígelos porque comunican datos con precisión.

Regla 2: Menos es más. Empieza con gris para la mayoría de los datos. Agrega un color de acento para énfasis. Agrega un segundo color solo si necesitas distinguir dos cosas.

Regla 3: Mapeo consistente. Si “ingresos” es azul en una gráfica, es azul en cada gráfica del reporte. No reasignes colores entre visualizaciones.

Regla 4: Nada de degradados arcoíris. El arcoíris (rojo-naranja-amarillo-verde-azul-morado) no tiene orden perceptual. Tu cerebro no procesa “morado significa más que verde.” Usa una paleta secuencial.

Regla 5: Prueba en escala de grises. Imprime tu gráfica en blanco y negro. Si todavía puedes distinguir las categorías, tus elecciones de color funcionan. Si todo se mezcla, necesitas una codificación secundaria (patrones, etiquetas o estilos de línea).

Accesibilidad: Diseñando para Todos

Daltonismo

Aproximadamente el 8% de los hombres y 0.5% de las mujeres tienen alguna forma de deficiencia de visión del color. El tipo más común confunde rojo y verde.

Qué hacer:

1. Nunca dependas solo del color. Acompaña el color con otra pista visual: etiquetas, patrones, formas o estilos de línea (sólida, punteada, guiones).

2. Usa paletas seguras para daltonismo. La IA puede ayudar:

Genera una paleta de 5 colores para una gráfica categórica
que sea accesible para personas con:
- Deuteranopía (rojo-verde, más común)
- Protanopía (rojo-verde, menos común)
- Tritanopía (azul-amarillo, rara)

Los colores deben ser distinguibles en tamaños de elementos
de gráfica (barras, líneas, puntos) y en una leyenda.

3. Prueba con herramientas de simulación. Usa extensiones de navegador o herramientas que simulen daltonismo para verificar que tus gráficas funcionen.

Combinaciones de colores seguras:

• Azul y naranja (seguro para todos los tipos)
• Azul y rojo (seguro para la mayoría)
• Morado y amarillo (seguro para la mayoría)
• Evita: rojo y verde, verde y café, azul y morado

Accesibilidad para Lectores de Pantalla

Las gráficas son invisibles para lectores de pantalla a menos que proporciones alternativas:

Genera texto alternativo para esta gráfica:

Una gráfica de línea mostrando tráfico mensual del sitio web
de enero a diciembre 2025. El tráfico creció constantemente
de 10,000 en enero a 18,000 en agosto, luego cayó bruscamente
a 12,000 en septiembre antes de recuperarse a 15,000 en
diciembre.

El texto alternativo debe:
1. Describir el tipo de gráfica y el tema
2. Indicar la tendencia o hallazgo clave
3. Incluir los valores específicos más importantes
4. Ser menor a 200 palabras

La IA genera: “Gráfica de línea mostrando tráfico mensual del sitio web para 2025. El tráfico creció constantemente de 10,000 visitas en enero a un pico de 18,000 en agosto, un aumento del 80%. Una caída brusca a 12,000 en septiembre (probablemente estacional) fue seguida por recuperación parcial a 15,000 en diciembre. En total, el tráfico aumentó 50% en el año a pesar del bajón del Q3.”

Este texto alternativo da al usuario de lector de pantalla la misma comprensión que un espectador vidente.

✅ Revisión Rápida: Una gráfica usa verde para “arriba de meta” y rojo para “debajo de meta.” Sin etiquetas, solo los colores diferencian. ¿Qué necesita cambiar?

Texto y Contraste

• Tamaño mínimo de fuente: 12px para texto del cuerpo, 14px para etiquetas en gráficas
• Relación de contraste: Mínimo 4.5:1 para texto contra el fondo
• No uses color como la única forma de transmitir información: Los indicadores de estado deben tener etiquetas de texto o íconos además del color

Anotaciones: Agregando Contexto sin Desorden

Las anotaciones son las notas, etiquetas y llamados que explican lo que los datos no pueden explicar por sí solos.

Cuándo Anotar

Anota cuando:

• Algo inusual pasó. “Pico el 15/03: Lanzamiento en Product Hunt”
• El contexto cambia el significado. “Aquí empezaron las restricciones por COVID”
• El espectador necesita un punto de referencia. Una línea de meta etiquetada “Objetivo Q4: $500K”
• Un dato necesita énfasis. “Mes récord: $358K”

Tipos de Anotación

Etiquetas directas: Números colocados sobre o junto a puntos de datos. Mejores cuando importan los valores precisos.

Líneas de referencia: Líneas horizontales o verticales que marcan metas, promedios o fechas importantes. “Meta: 95% satisfacción” como línea punteada cruzando una gráfica de barras.

Anotaciones de llamado: Una línea conectando un punto de datos con una nota explicativa. “Renunció el director financiero” apuntando a una caída de ingresos.

Regiones sombreadas: Color de fondo indicando periodos o rangos. Una banda verde mostrando “zona meta” en una gráfica de línea.

Buenas Prácticas de Anotación

Sé selectivo. Anota 2-3 cosas, no todo. Si cada punto de datos tiene una anotación, ninguna destaca.

Sé breve. “Lanzamiento de producto” en vez de “En esta fecha lanzamos nuestra nueva línea de productos que incluye tres nuevos SKUs dirigidos al segmento empresarial.”

Sé preciso. Apunta directamente al punto de datos relevante. No hagas que el espectador adivine a qué elemento se refiere la anotación.

Mi gráfica de línea muestra ingresos mensuales con estos
eventos notables:
- Marzo: Lanzamos nuevo nivel de precios (+15% salto de ingreso)
- Junio: Un cliente grande canceló (-8% caída de ingreso)
- Octubre: Empezó campaña de marketing navideña (aumento gradual)

Crea texto de anotación para cada evento. Mantén cada uno
en menos de 10 palabras. Especifica ubicación (arriba/abajo
de la línea, a qué lado).

La IA produce anotaciones concisas como “Nuevo nivel de precios → +15%” colocada arriba del dato de marzo con una flecha.

Creando Especificaciones de Color con IA

Para equipos y reportes recurrentes:

Crea una especificación completa de color para nuestra
guía de estilo de visualización de datos.

Contexto: Dashboards de inteligencia de negocios para una
empresa SaaS.
Fondo: Blanco (#FFFFFF) con paneles gris claro (#F8F9FA).

Define colores para:
1. Serie de datos primaria (1 color)
2. Serie de datos secundaria (1 color)
3. Estado positivo/bueno
4. Estado negativo/malo
5. Neutro/informacional
6. Paleta categórica de 5 colores
7. Paleta secuencial (5 pasos)
8. Paleta divergente (5 pasos)

Requisitos:
- Relaciones de contraste WCAG AA contra fondo blanco
- Seguro para daltonismo (todos los tipos)
- Profesional, no llamativo
- Incluye códigos hex y valores RGB

La IA genera una especificación completa de color con accesibilidad verificada.

Ejercicio Práctico

Toma una visualización que hayas creado recientemente:

1. Pruébala para accesibilidad de daltonismo (simula deuteranopía)
2. Revisa: ¿el color transmite información que no se comunica de otra forma?
3. Escribe texto alternativo para la gráfica
4. Agrega 1-2 anotaciones de contexto
5. Verifica las relaciones de contraste para todo el texto

Si encuentras problemas de accesibilidad — y probablemente los encontrarás — corrígelos usando los principios de esta lección.

Conclusiones Clave

• El color comunica datos — elige paletas según el tipo de dato (secuencial, divergente, categórica)
• Nunca dependas solo del color: siempre acompaña con etiquetas, patrones o formas
• 8% de los hombres son daltónicos rojo-verde — usa azul-naranja en vez de rojo-verde
• Escribe texto alternativo para cada gráfica para que los usuarios de lectores de pantalla reciban los mismos insights
• Anota con moderación: explica anomalías, agrega puntos de referencia, enfatiza hallazgos clave
• Prueba todo en escala de grises — si todavía funciona, tu diseño es accesible

Siguiente

En la Lección 7: Visualizaciones Interactivas y Presentaciones, aprenderás a construir visualizaciones que tu audiencia pueda explorar y presentaciones que mantengan a la sala atenta.