Comment créer une palette de couleurs de marque facile à utiliser

1. Partez des usages, pas du nombre de couleurs

Une rangée de cinq belles couleurs laisse plusieurs questions sans réponse. Laquelle utiliser pour un paragraphe ? Sur quel fond ? Le client peut-il employer la couleur d’accent pour un bouton de réservation ou une étiquette de graphique ? Commencez par lister les premiers supports auxquels l’identité doit s’adapter : un menu, un petit site web, un emballage et une présentation, par exemple.

Dans cet exercice fictif, Field Table est un café de quartier. Sa palette comprend Forest #24352B, Oat #F7F3E8 et Harvest #D7A84B. Ces exemples inventés illustrent une méthode de spécification. Ils ne constituent ni une identité prête à l’emploi ni une recette universelle.

Rassemblez quelques textes réels avant de choisir les teintes complémentaires. Une longue note sur les horaires d’ouverture et un prix sont de meilleurs tests qu’un mot décoratif sur un plan de travail vide.

2. Attribuez des rôles précis aux couleurs

Indiquez les rôles à côté des valeurs. Forest est la couleur de texte par défaut, Oat un fond clair et Harvest un fond d’accent. Ces descriptions sont plus utiles que « couleur 1 », « couleur 2 » et « couleur 3 ». Un rôle peut correspondre à différentes valeurs selon le contexte, mais chaque variation doit être intentionnelle et documentée.

USWDS propose un exemple public de couleurs de thème organisées par rôle. Retenez l’idée de nommer un usage, sans reprendre cette palette conçue pour des services gouvernementaux. Pour Field Table, une courte fiche des rôles suffit ; rien ne justifie d’imposer un nombre fixe de couleurs ou une répartition universelle en pourcentages.

Distinguez les accents de l’identité des couleurs sémantiques signalant une erreur, un avertissement ou une réussite. Une couleur d’accent chaude ne signifie pas automatiquement un avertissement, et une couleur de marque verte ne doit pas être le seul indice de réussite. Nommez et documentez ces rôles séparément lorsque le client a besoin d’une interface.

Pour aller plus loin : USWDS : jetons de couleurs de thème · USWDS : jetons de couleurs d’état

3. Testez ensemble le premier plan et le fond

Le contraste se mesure entre deux couleurs utilisées ensemble. Dans le tableau ci-dessous, toutes les couleurs sont des valeurs sRGB opaques sur des fonds unis. Les rapports ont été calculés à partir de la luminance relative ; les nombres affichés sont arrondis pour faciliter la lecture, mais le verdict de conformité repose sur la valeur non arrondie.

Pour le contraste du texte au niveau AA des WCAG, le minimum est de 4,5:1 pour le texte courant et de 3:1 pour le texte de grande taille. Un texte est considéré comme grand à partir de 18 pt (24 px CSS), ou de 14 pt en gras (environ 18,7 px CSS), à la taille effectivement affichée. Vérifiez le texte dans son utilisation réelle, pas seulement sa taille en points dans un fichier de conception. N’arrondissez pas une valeur légèrement insuffisante pour la déclarer conforme. Ces vérifications portent uniquement sur le contraste du texte.

Pour aller plus loin : W3C : contraste du texte

4. Distinguez le logo des couleurs complémentaires

L’exception applicable aux logotypes ne dispense pas les textes courants de la marque des exigences de contraste. Distinguez les fichiers du logo validé et ses règles de placement du texte, des boutons et de la navigation.

Dans notre exemple, le texte blanc sur Harvest se distingue difficilement. Un texte Forest sur le même fond Harvest offre un meilleur contraste. Cela corrige la mise en page environnante sans modifier discrètement le logo validé.

Si une teinte complémentaire doit être assombrie, attribuez un rôle propre à la nouvelle valeur et indiquez où son usage est autorisé. Ne remplacez pas toutes les occurrences d’une couleur de marque d’origine sans examiner les éléments graphiques et convenir du périmètre de la modification.

5. Créez une petite maquette avec du contenu réel

Mettez en page une rubrique de menu, une fiche d’horaires d’ouverture et un bouton de réservation. Utilisez les mêmes rôles pour les trois. Essayez ensuite un titre plus long et une largeur d’écran mobile étroite. Vérifiez la taille et la graisse réelles des caractères, pas seulement le résultat d’un calculateur.

Lorsque la couleur indique un état ou des catégories, ajoutez un autre indice visible, comme un libellé ou une forme. La légende d’un graphique doit identifier clairement chaque série. N’obligez pas un client à comprendre que « vert signifie disponible » à partir de la seule couleur.

Traitez le mode sombre, la photographie, la transparence et les dégradés comme des cas distincts. Une association testée sur un fond clair uni ne permet aucune conclusion sur du texte placé sur une image animée ou sur un autre fond.

Pour aller plus loin : W3C : ne pas se fier uniquement à la couleur

6. Transmettez des choix, pas seulement des valeurs

Indiquez le nom de la couleur, son rôle, sa valeur numérique exacte, l’association premier plan/fond autorisée et un exemple réaliste. Signalez les associations à ne pas utiliser pour le texte courant. Conservez à part les spécifications de production imprimée et validez-les en fonction du support, du procédé et du prestataire réels.

La fiche ci-dessous permet à un futur designer de consigner une modification et sa raison. Joignez-la aux fichiers du logo validé et aux autres consignes d’identité. Ne qualifiez pas une marque entière d’« accessible » parce que plusieurs associations de couleurs pour le texte ont réussi les tests.

Version et responsable : …
Support : …
Rôle et valeur de couleur : …
Premier plan / fond : …
Taille et graisse des caractères : …
Contraste non arrondi et résultat : …
Usage autorisé et exemple : …
Restrictions et vérifications complémentaires : …

Poursuivez avec : Documenter les spécifications RGB et CMYK à transmettre

Questions fréquentes