Elige la codificación antes que los tonos
Decide primero si el color representa categorías, una magnitud ordenada o divergencia respecto a un punto central significativo. Una paleta categórica asigna identidades distintas y no debe sugerir un orden inexistente. Una escala secuencial cambia sistemáticamente de bajo a alto. Una escala divergente usa dos direcciones alrededor de un centro declarado. Mezclar funciones conduce a lecturas engañosas aunque los tonos sean agradables. Limita las categorías simultáneas a una cantidad que pueda etiquetarse y distinguirse en el gráfico.
- Usa tonos distintos para categorías sin orden y conserva la asignación entre vistas relacionadas.
- Usa una progresión ordenada de luminosidad para magnitudes, con dirección y unidades en la leyenda.
- Usa una escala divergente solo si el centro tiene sentido defendible, como cero u objetivo.
Nunca conviertas el color en la única clave
WCAG 2.2 exige que el color no sea el único medio visual para comunicar información. Una leyenda formada solo por cuadrados coloreados todavía obliga a emparejar colores. Añade etiquetas directas cuando haya espacio y utiliza formas, estilos de línea, patrones o agrupación espacial como canales redundantes. Esto importa especialmente en líneas finas, puntos pequeños, áreas adyacentes, impresiones y capturas. La señal alternativa debe conservarse en el tamaño y densidad reales del gráfico, no solo en un diseño ampliado.
- Etiqueta directamente líneas o regiones importantes y evita viajes repetidos a una leyenda separada.
- Combina color con guiones o formas de marcador, manteniendo sencillo cada patrón.
- Expón nombres de categorías en texto accesible y en ayudas alcanzables sin ratón.
Mide el contraste en su contexto
Para objetos y estados gráficos necesarios para comprender, el contraste no textual de WCAG suele exigir 3:1 frente a colores adyacentes. La comparación depende del contexto: una barra contra el área, dos regiones contiguas o el foco frente a ambos lados. Las etiquetas siguen el contraste textual, normalmente 4,5:1 para texto normal y 3:1 para texto grande admisible. Prueba el renderizado, suavizado y grosor reales, pues una pareja numéricamente válida puede ser difícil de localizar si la marca es diminuta.
- Mide cada marca esencial contra el color que la rodea en el gráfico final.
- Comprueba etiquetas aparte; una barra intensa no vuelve aceptable un texto tenue.
- Repite la prueba en hover, selección, atenuación, foco y demás estados.
Construye un conjunto de categorías mantenible
Empieza con superficie y texto neutros, después elige colores que difieran en más de un canal. Reserva colores semánticos, como rojo de error, si el producto ya los usa así. Define tokens por función, documenta el fondo previsto y asigna un patrón o forma alternativos. Cuando haya más categorías que el conjunto probado, agrupa valores menores en «Otros» o recurre a filtros e interacción, en vez de generar colores apenas distinguibles. La limitación explícita es más honesta que una paleta ilimitada.
- Nombra los tokens por su función, por ejemplo chart-category-1, y guarda la pareja probada de primer plano y fondo.
- Mantén la categoría asociada al mismo token en paneles, filtros, tablas y exportaciones.
- Define un desbordamiento determinista en vez de reciclar colores para categorías diferentes.
Diseña juntos leyenda e interacción
La leyenda debe explicar la asignación sin ocultar los datos. Conserva el orden fuente cuando tenga significado; en otro caso usa un orden estable documentado. Permite resaltar una categoría desde leyenda y gráfico, con operación equivalente por teclado y foco visible. No comuniques selección solo mediante saturación u opacidad: añade contorno, forma, cambio de etiqueta o aislamiento de lo no seleccionado. Los tooltips complementan etiquetas, pero no pueden contener en exclusiva valores o nombres esenciales.
- Haz que los elementos interactivos de leyenda sean controles enfocables con nombres accesibles claros.
- Muestra la selección mediante límite o forma además del cambio de color u opacidad.
- Ofrece valores exactos en una tabla o equivalente accesible cuando el gráfico no baste.
Prueba datos y salidas realistas
Prueba datos densos, escasos, extremos, ausentes y solapados, no solo una muestra ideal. Examina tamaño objetivo, zoom, colores forzados y escala de grises; simular diferencias de visión cromática es un control adicional, no una prueba completa. Imprime o exporta cuando esos flujos sean relevantes. Pide reconocer categorías y valores sin pistas, registra cada fallo por marca y contexto, y conserva el conjunto de prueba y las parejas de contraste para repetir la evaluación después de cambiar el tema.
- Prueba el máximo de categorías y la marca mínima sobre todos los fondos previstos.
- Verifica ausencias, negativos, alertas, foco y selección sin depender solo del tono.
- Documenta los límites y cambia de visualización cuando los datos los superen.
Fuentes primarias
Las afirmaciones de este artículo se comprueban con estas especificaciones publicadas.