C'est cette distinction que les moodboards ignorent, et presque tous les problèmes de dashboard en découlent. Trois systèmes de couleurs partagent un seul écran, chacun avec un rôle différent et un mode d'échec spécifique.

Une palette de marque qui rend bien sur une landing page ne fournit généralement qu'un seul de ces éléments — l'accent — et ignore les deux autres. C'est pourquoi le premier écran du dashboard semble correct, mais que le cinquième donne l'impression d'un assemblage de trois produits différents.

Les neutres portent l'essentiel d'un dashboard, et une échelle de neutres trop restreinte est le défaut structurel le plus courant. Un tableau dense doit séparer, au minimum : le fond de page, la carte contenant le tableau, la ligne d'en-tête, l'état de survol des lignes, la bordure entre les lignes, le texte primaire, le texte secondaire et le texte désactivé. Cela représente huit valeurs distinctes, ce que « trois gris » ne permettent pas d'obtenir.

Deux facteurs font réussir une échelle de neutres. Premièrement, prévoyez suffisamment d'étapes — environ neuf, espacées de manière perceptive plutôt que par un calcul hexadécimal linéaire, qui aurait tendance à tout regrouper au centre. Deuxièmement, teintez-les. Un neutre contenant une légère nuance de votre couleur de marque est perçu comme faisant partie du design ; un gris pur est perçu comme le défaut du framework, car c'est souvent le cas.

Le succès, l'avertissement, le danger et l'info ne sont pas des éléments de décoration. Dès qu'une série de graphique, un surlignage de navigation ou une bannière marketing utilise votre rouge, le rouge cesse de signifier « quelque chose ne va pas » et les utilisateurs cessent d'y prêter attention. C'est un point de non-retour : l'attention consacrée à la décoration ne peut plus être récupérée pour le sens.

• Excluez-les de l'ensemble catégoriel. Si vous avez quatre séries et que l'une d'elles est verte, ce vert devient ambigu sur un écran qui affiche également un état de santé.
• Ne confondez pas la couleur d'accentuation avec une couleur d'état. Si votre marque est verte et que le vert signifie également « succès », soit la marque, soit la signification doit changer. Généralement, c'est la marque : déplacez la teinte ou la luminosité de l'accentuation suffisamment pour que les deux ne soient jamais adjacents et ne soient pas interprétés comme une seule et même chose.
• Ne vous appuyez jamais sur la couleur seule. Un état nécessite également une icône, un libellé ou une forme. C'est une exigence d'accessibilité, et c'est aussi ce qui permet à l'interface de rester lisible dans une capture d'écran collée dans un ticket de support.
• Prévoyez une variante de surface pour chaque état. Un *badge* de danger et un *arrière-plan de bannière* de danger sont de couleurs différentes ; si vous n'en définissez qu'une seule, vous obtiendrez une bannière qui soit trop agressive, soit invisible.

Six ou sept, et pour être honnête, c'est à partir de six que cela devient difficile. La contrainte n'est pas esthétique : les teintes distinctes à luminosité égale sont une ressource limitée. Une fois qu'il y en a environ huit sur un graphique, différencier les séries adjacentes devient un jeu de devinettes et la légende se transforme en corvée de recherche.

C'est là qu'un générateur de palettes ne peut pas vous aider, car l'ensemble catégoriel doit être jugé globalement et par rapport aux neutres sur lesquels il repose. Voici deux palettes conçues pour des tableaux de bord avec leurs rôles chart-1 à chart-5 visibles à côté des surfaces — c'est la seule façon de vérifier si la série quatre reste distincte de la série deux sur une carte.

Les deux ensembles s'arrêtent à cinq, ce qui est un choix délibéré plutôt qu'une limitation du format.

Que faire à la place, par ordre de préférence :

1. Libellisez directement. Placez le nom de la série à la fin de sa ligne. Cela supprime la légende, élimine la recherche visuelle et réduit considérablement la pression sur la couleur.
2. Groupez la fin de liste. Affichez les cinq premières séries et un groupe « autres ». Presque aucun utilisateur de tableau de bord ne compare la onzième série avec la douzième.
3. Divisez le graphique. Les « small multiples » — une série par panneau, mêmes axes — sont préférables à un seul graphique avec douze couleurs, quelle que soit la taille de l'écran.
4. Variez un autre élément que la teinte. Utilisez des pointillés, des formes de marqueurs ou des textures de remplissage, surtout pour l'impression ou lorsqu'une capture d'écran peut être convertie en niveaux de gris.

Environ un homme sur douze présente une forme de déficience de la vision des couleurs, et la forme la plus courante rend la distinction entre le rouge et le vert difficile — ce qui est regrettable, car le rouge et le vert sont précisément les couleurs utilisées dans les tableaux de bord pour le « mauvais » et le « bon ».

Les règles pratiques sont simples. Variez la luminosité ainsi que la teinte entre deux couleurs porteuses de sens, afin qu'elles restent distinctes en niveaux de gris. Ne jamais associer le rouge et le vert comme seule différence entre deux états. Et pour les états, ajoutez toujours un second canal — une icône, un signe plus ou moins, un mot — pour que la couleur soit un renforcement et non le message. Une palette qui survit à une capture d'écran en niveaux de gris survit à presque toutes les déficiences.

Les tableaux de bord sont plus souvent utilisés en mode sombre que la plupart des autres surfaces produit, et une palette catégorielle optimisée pour le blanc ne s'y transpose pas. Les teintes saturées de tons moyens, lisibles sur blanc, ont tendance à « vibrer » sur un fond presque noir, et les deux ou trois séries les plus sombres disparaissent tout simplement.

Définissez les couleurs de série par mode plutôt que de les convertir. Il en va de même pour votre échelle de neutres : en mode sombre, les surfaces surélevées sont *plus claires* que l'arrière-plan, ce qui inverse l'instinct selon lequel une carte est un élément plus clair sur une page teintée. Les détails — y compris les valeurs de luminosité mesurées à partir de palettes de production — se trouvent dans dark mode colour palettes that hold up.

De plus en plus, le tableau de bord est généré plutôt que conçu : on demande à un agent de créer un écran d'analyse et il le produit. Tout ce que le brief n'a pas spécifié est comblé par le modèle, et il le fait différemment à chaque fois.

Nous avons analysé 299 fichiers DESIGN.md publics, documents rédigés spécifiquement pour être suivis par un agent de code. 86 % fournissent des valeurs hexadécimales brutes sans rôle sémantique associé, ce qui signifie que le fichier ne peut pas répondre à « quelle est la couleur d'une cellule de tableau désactivée » ou « quelle couleur signifie danger ». 69 % ne mentionnent jamais le mode sombre. L'agent décide donc seul, et décide différemment d'un écran à l'autre.

La solution est la même, que ce soit une personne ou un agent qui construise : nommez les rôles, définissez-les pour les deux modes et listez les couleurs réservées. Une palette exprimée sous forme de rôles est une instruction ; une palette exprimée par cinq codes hexadécimaux est une inspiration.

1. 1

   Prenez une capture d'écran du tableau le plus dense et désaturez-la

   Si les lignes, les en-têtes, les états de survol et les états désactivés ne sont plus distincts en niveaux de gris, c'est que votre échelle de neutres est trop plate et que vos couleurs d'état portent le sens à elles seules.

2. 2

   Affichez tous les états simultanément à l'écran

   Succès, avertissement, danger et info ensemble, sous forme de badge et de bannière. C'est là qu'une variante de surface manquante devient immédiatement évidente.

3. 3

   Tracez volontairement huit séries

   Non pas parce que vous devriez le livrer ainsi, mais pour trouver le point de rupture de votre palette. Quel que soit ce nombre, concevez le comportement « et autres » pour la valeur immédiatement inférieure.

4. 4

   Basculer en mode sombre avec un graphique ouvert

   Les deux séries les plus sombres sont celles qui disparaissent, et elles disparaissent sans prévenir.

5. 5

   Compter l'accent

   Sur un écran de tableau de bord réussi, l'accent n'apparaît qu'une ou deux fois. S'il est partout, il ne signifie plus « ceci est l'action ».