Palette ou système de couleurs : donner un rôle à chaque couleur

Une palette, c’est une liste de couleurs. Un système de couleurs, c’est la même liste avec un rôle pour chacune : une couleur de fond, une couleur pour le texte qu’on doit lire, et un accent pour ce qui doit ressortir, comme une information clé ou un bouton. Sans ces rôles, même un titre finit par ne plus ressortir.

Vous avez trouvé une palette qui vous plaît, cinq carrés qui vont bien ensemble. Puis vous l’utilisez sur une page, une miniature ou une vidéo, et plus rien ne ressort. Choisir des couleurs, ce n’est pas distribuer des couleurs. Voici la méthode que j’applique avant de dessiner quoi que ce soit.

01Quelle différence entre une palette et un système de couleurs ?

La palette répond à la question « quelles couleurs ? ». Le système répond à « quelle couleur pour quoi, et sur quoi ? ». Dans l’exemple ci-dessous, la même palette de cinq couleurs devient un système : le sable sert de fond, l’encre porte le texte, la brique est réservée au bouton et aux petits repères. La moutarde n’apparaît qu’en soulignement, et la sauge n’est pas utilisée du tout.

02Comment attribuer un rôle à chaque couleur ?

1. Le fond : la couleur qui couvre le plus de surface. Elle reste calme pour laisser lire tout le reste.
2. Le texte : la couleur des titres et des paragraphes. Elle contraste fortement avec le fond.
3. L’accent : une seule couleur pour ce qui doit attirer l’œil, comme un bouton, un prix ou un mot clé. Plus elle est rare, plus elle ressort.
4. Les couleurs secondaires : bordures, icônes, petits détails, états (survol, erreur). Elles ne portent pas un texte important si leur contraste ne le permet pas.

Vous n’êtes pas obligé d’utiliser toutes les couleurs de la palette, ni en quantités égales. Beaucoup de designers partent de la règle empirique 60-30-10 : environ 60 % pour la couleur dominante, 30 % pour la secondaire et 10 % pour l’accent. Ce n’est pas une norme, juste un point de départ qui évite de donner la même place à tout.

03Comment vérifier le contraste entre le texte et le fond ?

Une couleur ne se juge jamais seule : elle se juge sur la couleur qui sera derrière elle. Les WCAG mesurent cet écart avec un ratio de contraste, qui va de 1:1 (aucune différence) à 21:1 (noir sur blanc). Les seuils à connaître :

• 4,5:1 pour le texte courant, niveau AA (critère 1.4.3).
• 3:1 pour le grand texte, c’est-à-dire au moins 18 points, ou 14 points en gras (environ 24 px et 18,5 px).
• 3:1 pour les éléments d’interface et les graphiques nécessaires à la compréhension, comme le contour d’un champ ou une icône seule (critère 1.4.11).
• 7:1 pour le texte courant et 4,5:1 pour le grand texte au niveau renforcé AAA (critère 1.4.6).

« Le contraste est calculé de telle sorte que la couleur (la teinte) n’est pas un facteur déterminant. » W3C, Understanding SC 1.4.3 (traduit de l’anglais)

Autrement dit, c’est l’écart de clarté qui compte. Un rouge et un vert très différents peuvent avoir presque la même clarté, donc un contraste très faible. Le W3C précise aussi que le ratio ne s’arrondit pas : 4,499:1 ne passe pas le seuil de 4,5:1.

04Une couleur peut-elle marcher en détail et échouer en fond ?

Oui, et c’est souvent là que la palette coince. Dans mon exemple, la moutarde sur le sable plafonne à 1,62:1 : impossible d’y écrire un texte. Elle reste utile en petit détail décoratif, comme le soulignement du titre, qui n’a pas besoin d’être lu. Et si elle sert de fond à un bouton, il faut un texte en encre (8,51:1), car le blanc tombe à 1,89:1.

Même logique pour le rouge de MoBen Prod, #D90E43, sur un fond presque noir : 3,83:1. Il passe pour un grand titre, pas pour un paragraphe. C’est pour ça que, sur ce site, il sert d’accent et que le texte courant reste clair.

05Pourquoi tester la palette sur un titre, un paragraphe et un bouton ?

Cinq carrés côte à côte ne montrent rien de tout ça. Avant de valider une palette, je monte une petite maquette avec un vrai titre, un paragraphe de quelques lignes et un bouton, sur le fond prévu. Puis je vérifie :

• le titre ressort-il au premier regard ?
• le paragraphe se lit-il sans effort, même en petit ?
• le bouton est-il la première chose qu’on remarque après le titre ?
• y a-t-il une seule couleur d’accent, ou trois qui se disputent l’attention ?

Ce test prend quelques minutes et évite de découvrir le problème une fois le site en ligne. Les règles d’usage des couleurs se notent ensuite dans la charte, comme je l’explique dans l’article sur l’identité visuelle, la charte et le brandbook.

06Quels outils pour vérifier le contraste ?

• WebAIM Contrast Checker : vous saisissez deux codes hexadécimaux et l’outil donne le ratio, avec le résultat AA et AAA pour le texte courant, le grand texte et les éléments d’interface. Un curseur de luminosité aide à corriger une couleur qui échoue.
• Adobe Color, outils d’accessibilité : un vérificateur de contraste comparé aux WCAG, et un outil qui signale les couleurs difficiles à distinguer pour les personnes daltoniennes.
• Colour Contrast Analyser (Vispero, ex-TPGi) : application gratuite pour Windows et macOS, avec une pipette qui mesure les couleurs n’importe où à l’écran. Pratique sur une capture de vidéo ou une maquette.
• Outils de développement de Chrome : le sélecteur de couleur indique si le contraste d’un texte atteint les niveaux AA ou AAA, directement sur la page en ligne.

07Et dans une vidéo : miniatures, sous-titres et motion design ?

Les mêmes rôles s’appliquent à l’image animée, avec une difficulté en plus : le fond change à chaque plan.

• Miniatures : un fond, une couleur de texte, un accent. Le titre doit ressortir en tout petit, au milieu d’une grille de vignettes.
• Sous-titres : le fond, c’est la vidéo elle-même. La BBC utilise du blanc sur fond noir dans la plupart des cas ; sur une image claire, ajoutez un contour, une ombre ou un bandeau. Le détail est dans l’article sur les sous-titres lisibles.
• Motion design : gardez l’accent pour le moment clé (un chiffre, un nom, un appel à l’action) au lieu de le faire clignoter partout.

Je vérifie le contraste sur l’image la plus claire et la plus chargée de la séquence, pas sur la plus facile.

08Questions fréquentes

Combien de couleurs faut-il dans un système ?

Souvent, trois rôles suffisent : un fond, un texte, un accent, plus une ou deux couleurs secondaires pour les détails. Ce qui compte n’est pas le nombre de couleurs, mais le fait que chacune ait une fonction claire.

Quel ratio de contraste viser pour un bouton ?

Le texte du bouton est un texte comme un autre : 4,5:1 avec la couleur du bouton, ou 3:1 s’il est assez grand. Le fond du bouton doit aussi se distinguer de ce qui l’entoure (3:1) quand c’est lui qui permet de reconnaître le bouton.

Une couleur de marque peut-elle échouer au test de contraste ?

Oui. Les WCAG exemptent le texte qui fait partie d’un logo, mais pas les titres ni les boutons. Si la couleur de marque échoue, on la garde pour les grands éléments et les accents, et on crée une variante plus foncée ou plus claire pour le texte.

La règle 60-30-10 est-elle obligatoire ?

Non, c’est une règle empirique. Elle aide à ne pas répartir toutes les couleurs à parts égales, mais une interface, une affiche ou une vidéo peuvent avoir d’autres proportions. Le test sur un titre, un paragraphe et un bouton reste plus fiable.

Une palette se choisit en quelques minutes, un système se construit en testant. C’est la base de mon travail en branding et identité visuelle, et on le retrouve ensuite dans la création de sites web et dans les vidéos. Parlez-moi de votre projet.