Palette de couleurs

En vérifiant le ratio de contraste entre chaque couleur de texte et le fond sur lequel elle se pose. Le niveau AA des WCAG demande 4,5:1 pour le texte courant et 3:1 pour le texte de grande taille. Ces ratios se contrôlent directement depuis les outils de conception ou depuis des vérificateurs en ligne. Il faut aussi s'assurer qu'aucune information ne repose sur la seule couleur, ce qui exclurait les personnes daltoniennes.

La couleur primaire est la couleur principale de la marque, employée pour les éléments interactifs les plus importants, boutons d'action et liens. La secondaire vient en complément, pour des éléments de moindre poids ou des accents. Les couleurs sémantiques ont une signification fonctionnelle, vert pour le succès, rouge pour l'erreur, orange pour l'avertissement, bleu pour l'information. Ces conventions doivent rester stables sur toute l'interface, sous peine de créer de la confusion.

Il n'y a pas de règle stricte, mais une palette trop riche devient difficile à tenir. Une palette fonctionnelle contient généralement une couleur primaire avec ses nuances, cinq ou six claires et autant de foncées, une gamme de neutres du blanc au noir, et quatre couleurs sémantiques. Les secondaires et les couleurs d'accentuation s'ajoutent selon les besoins du produit.

En générant des nuances à partir de la couleur principale, par variation de luminosité et de saturation, cinq ou six valeurs de chaque côté. On vérifie ensuite que les valeurs intermédiaires offrent un contraste suffisant avec le blanc et le noir, puisque ce sont elles qui serviront aux textes et aux fonds. Les neutres se choisissent en harmonie avec la couleur principale plutôt que dans un gris neutre.

Non, quand elle entre en conflit avec la convention. Un rouge de marque très clair ou très saturé peut rendre un message d'erreur illisible ou peu alarmant. Les couleurs sémantiques répondent à des attentes acquises et il vaut mieux les respecter, quitte à ce qu'elles s'écartent de la charte. La cohérence de marque se joue ailleurs, sur les surfaces et les éléments interactifs.