Esta es la distinción que los tableros de inspiración simplifican, y casi todos los problemas de los dashboards derivan de esto. Tres sistemas de color comparten una misma pantalla, cada uno con una función y un modo de fallo distintos.

Una paleta de marca que luce genial en una landing page suele aportar uno de estos elementos —un acento— y ninguno de los otros dos. Por eso la primera pantalla del dashboard se ve bien y la quinta parece tres productos cosidos entre sí.

Los neutros ocupan la mayor parte de un dashboard, y una escala neutra muy limitada es el defecto estructural más común. Una tabla densa necesita separar, como mínimo: el fondo de la página, la tarjeta donde se asienta la tabla, la fila de encabezado, el estado hover de la fila, el borde entre filas, el texto primario, el texto secundario y el texto desactivado. Eso son ocho valores distinguibles, y usar solo "tres grises" no es suficiente para lograrlos.

Dos cosas hacen que una escala neutra funcione. Primero, dale suficientes pasos —unos nueve— espaciados perceptualmente en lugar de mediante aritmética de hexadecimales uniforme, que agrupa todo en el medio. Segundo, dales un matiz. Un neutro que contenga una pequeña cantidad del color de tu marca se lee como parte del diseño; un gris sin matizar se lee como el valor por defecto del framework, porque lo es.

Success, warning, danger e info no son decoración. En el momento en que una serie de un gráfico, un resaltado de navegación o un banner de marketing utiliza tu rojo, el rojo deja de significar "algo va mal" y los usuarios dejan de buscarlo. Esta es una puerta de un solo sentido: la atención que gastes en decoración no podrás recuperarla para dar significado.

• Manténgalos fuera del conjunto categórico. Si tiene cuatro series y una de ellas es verde, ese verde se vuelve ambiguo en una pantalla que también muestra el estado de salud.
• No permita que el color de acento sea un color de estado. Si su marca es verde y el verde también significa «éxito», o bien la marca o bien el significado deben cambiar. Normalmente la marca: desplace el tono o la luminosidad del acento lo suficiente para que los dos nunca estén adyacentes ni se lean como lo mismo.
• Nunca dependa únicamente del color. Un estado necesita también un icono, una etiqueta o una forma. Este es un requisito de accesibilidad y es lo que mantiene la interfaz legible en una captura de pantalla pegada en un ticket de soporte.
• Asigne una variante de superficie a cada estado. Un *badge* de peligro y el *fondo de un banner* de peligro son colores diferentes; si define solo uno, obtendrá un banner que o bien grita o bien desaparece.

Seis o siete, y la respuesta honesta es que a partir de seis empieza a ser difícil. La limitación no es estética: los tonos distinguibles con la misma luminosidad son un recurso limitado y, una vez que hay unos ocho en un mismo gráfico, diferenciar las series adyacentes se convierte en una adivinanza y la leyenda en una tarea de búsqueda.

En esto no puede ayudar un generador de paletas, porque el conjunto categórico debe juzgarse como grupo y frente a los neutros sobre los que se apoyará. A continuación se muestran dos paletas diseñadas para dashboards con sus roles de chart-1 a chart-5 visibles junto a las superficies; es la única forma de comprobar si la serie cuatro sigue siendo distinguible de la serie dos en una tarjeta.

Ambos conjuntos se detienen en cinco, lo cual es deliberado y no una limitación del formato.

Qué hacer en su lugar, por orden de preferencia:

1. Etiquetado directo. Coloque el nombre de la serie al final de su línea. Esto elimina la leyenda, elimina la búsqueda y reduce la mayor parte de la presión sobre el color.
2. Agrupar el resto. Muestre las cinco primeras y un grupo de «otros». Casi ningún lector de dashboards compara la serie once con la serie doce.
3. Dividir el gráfico. Los múltiplos pequeños —una serie por panel, mismos ejes— superan a un gráfico con doce colores en casi cualquier tamaño.
4. Variar algo más que el tono. Patrón de línea discontinua, forma del marcador o textura de relleno, especialmente en impresiones o cuando una captura de pantalla pueda estar en escala de grises.

Aproximadamente uno de cada doce hombres tiene algún tipo de deficiencia en la visión del color, y la forma más común dificulta la separación entre el rojo y el verde, lo cual es desafortunado, ya que el rojo y el verde son precisamente los colores que los dashboards usan para lo malo y lo bueno.

Las reglas prácticas son sencillas. Varíe tanto la luminosidad como el tono entre cualquier par de colores que transmitan un significado, para que sigan siendo distinguibles en escala de grises. Nunca empareje el rojo y el verde como única diferencia entre dos estados. Y para los estados, añada siempre un segundo canal —un icono, un signo más o menos, una palabra— para que el color sea un refuerzo y no el mensaje. Una paleta que sobrevive a una captura de pantalla en escala de grises sobrevive a casi cualquier deficiencia.

Los dashboards se utilizan en modo oscuro más que la mayoría de las superficies de producto, y una paleta categórica ajustada para blanco no se transfiere directamente. Los tonos saturados medios que se leen con claridad sobre blanco tienden a vibrar contra un fondo casi negro, y las dos o tres series más oscuras simplemente desaparecen.

Defina los colores de las series por modo en lugar de convertirlos. Lo mismo ocurre con su escala de neutros: en modo oscuro, las superficies elevadas son *más claras* que el fondo, lo que invierte la intuición de que una tarjeta es un elemento más claro sobre una página tintada. Los detalles —incluyendo valores de luminosidad medidos de paletas reales— están en paletas de colores para modo oscuro que funcionan.

Cada vez más, el dashboard se genera en lugar de diseñarse: se le pide a un agente una pantalla de analíticas y este la produce. Lo que el brief no especifique, el modelo lo suministra, y lo hace de forma distinta cada vez.

Analizamos 299 archivos DESIGN.md públicos, documentos escritos específicamente para que un agente de código los siga. El 86 % proporciona valores hex brutos sin ningún rol semántico asociado, lo que significa que el archivo no puede responder a «qué color tiene una celda de tabla deshabilitada» o «qué color significa peligro». El 69 % nunca menciona el modo oscuro. Por lo tanto, el agente decide, y decide de forma diferente en la siguiente pantalla.

La solución es la misma ya sea que una persona o un agente esté construyendo: nombre los roles, defínalos en ambos modos y anote qué colores están reservados. Una paleta expresada como roles es una instrucción; una paleta expresada como cinco códigos hex es inspiración.

1. 1

   Haga una captura de pantalla de la tabla más densa y desatúrela

   Si las filas, los encabezados, los estados de hover y los deshabilitados dejan de ser distinguibles en escala de grises, su escala de neutros es demasiado plana y sus colores de estado están transmitiendo el significado por sí solos.

2. 2

   Muestre todos los estados en pantalla a la vez

   Éxito, advertencia, peligro e información juntos, como badge y como banner. Aquí es donde se nota inmediatamente la falta de una variante de superficie.

3. 3

   Grafique ocho series a propósito

   No porque deba lanzarlo así, sino para encontrar el punto donde su paleta falla. Sea cual sea ese número, diseñe el comportamiento de «y otros» para el valor inmediatamente inferior.

4. 4

   Cambiar al modo oscuro con un gráfico abierto

   Las dos series más oscuras son las que desaparecen, y lo hacen sin previo aviso.

5. 5

   Contabilice el color de acento

   En una pantalla de dashboard bien diseñada, el acento aparece una o dos veces. Si está en todas partes, deja de significar "esta es la acción".