La règle 60-30-10 : équilibrer la couleur en design

La première fois que la règle 60-30-10 a vraiment fait tilt pour moi, je fixais un tableau de bord que j'avais construit et qui paraissait chargé d'une manière que je n'arrivais pas à expliquer. La palette était bonne. Les couleurs étaient harmonieuses, tirées directement de la roue. Mais l'écran semblait bruyant, comme si tout le monde dans la pièce parlait en même temps. Le problème n'était pas quelles couleurs j'avais choisies. C'était combien j'en avais utilisé de chacune.

Cette distinction est tout l'enjeu de la règle 60-30-10. Elle ne dit presque rien sur la teinte et presque tout sur la proportion : environ 60 % de votre design est une couleur dominante, 30 % une couleur secondaire de soutien, et 10 % un accent. Réussissez ces rapports et même une palette médiocre se lit comme intentionnelle. Ratez-les et l'harmonie la plus finement réglée paraît encore chaotique.

D'où vient la règle

La règle 60-30-10 a été empruntée à l'architecture d'intérieur, où les décorateurs l'utilisent depuis des décennies pour équilibrer une pièce. La répartition classique : 60 % aux murs, environ 30 % au rembourrage et aux gros meubles, et les 10 % restants aux accessoires — un coussin, un vase, l'œuvre au mur. Entrez dans une pièce bien conçue et vous ne savez en général pas dire pourquoi elle paraît apaisée, mais les proportions font discrètement leur travail en arrière-plan.

Les stylistes de mode usent de la même logique (costume, chemise, pochette), et quelque part en chemin elle a migré vers le design graphique et web. Le support a changé ; le principe non. Vous donnez à chaque couleur un rôle défini et une quantité d'espace définie, et l'équilibre suit presque automatiquement.

Comment elle se transpose au design d'interface et web

Voici la traduction que j'emploie réellement quand je m'assieds pour construire une interface.

• 60 % — la couleur dominante. C'est votre toile : fonds de page, grandes surfaces, l'espace vide sur lequel votre contenu repose. Elle pose l'ambiance générale et, surtout, c'est en général la couleur que les gens ne remarquent pas. Dans la plupart des bonnes interfaces, la dominante est un neutre — un blanc, un cassé, un gris clair, ou en mode sombre un presque-noir comme #0F1115. Les neutres sont dominants parce qu'ils sont généreux ; ils laissent les autres couleurs porter la personnalité sans les combattre.
• 30 % — la couleur secondaire. C'est le second rôle : cartes, barres latérales, barres de navigation, séparateurs de sections, surfaces secondaires. Elle apporte de la structure et une seconde couche de contraste face à la dominante, mais elle ne réclame jamais l'attention. Voyez-la comme le mobilier de la pièce.
• 10 % — la couleur d'accent. C'est là que se joue l'action : boutons principaux, liens, états actifs, badges, la seule série d'un graphique que vous voulez voir suivre. C'est le coussin. Toute la raison de son efficacité tient à la rareté.

Ce dernier point est celui que la plupart des gens manquent, alors disons-le clairement. L'accent n'est pas puissant à cause de la couleur. Il est puissant parce qu'il y en a si peu. Quand votre bleu n'apparaît que sur le bouton principal et l'élément de navigation actif, l'œil de l'utilisateur apprend en deux secondes environ que bleu signifie agissez ici. À l'instant où le bleu surgit aussi sur les titres, les icônes, trois bordures de cartes et un dégradé de fond, il cesse de signifier quoi que ce soit. Vous avez dépensé le signal.

Un exemple travaillé

Laissez-moi en construire un réel pour que les proportions ne restent pas abstraites. Disons que je conçois un tableau de bord SaaS et que j'ouvre le générateur de palettes de couleurs, choisis un bleu calme comme base, et utilise les harmonies monochromatique et complémentaire pour tirer des tons de soutien.

• Dominante (60 %) : #F7F8FA, un gris froid presque blanc. C'est le fond de page et l'espace vide à l'intérieur des cartes. Vous le percevez à peine, ce qui est exactement juste.
• Secondaire (30 %) : #1E293B, une ardoise profonde. Elle porte la navigation supérieure, la barre latérale, les titres et le texte courant. Notez que « secondaire » n'a pas à être une couleur vive — ici c'est un neutre foncé qui abat un gros travail structurel. Avec la dominante, c'est déjà une interface complète et utilisable.
• Accent (10 %) : #2563EB, un bleu assuré, réservé au CTA principal, aux liens et à l'état de menu actif. Rien d'autre ne l'obtient.

Faites passer ce bleu dans un vérificateur de contraste face au fond blanc et vous dépassez confortablement le seuil WCAG AA de 4.5:1 pour le texte courant — bon à confirmer, car un accent qui échoue au contraste est un accent qui échoue à sa seule mission. (Plus de détails dans Les ratios de contraste WCAG expliqués.) Le vérificateur intégré à l'outil le signalera avant la mise en production.

Ce qui frappe la plupart des gens dans cette palette, c'est le peu de couleur qu'elle contient réellement. Deux neutres et un bleu. C'est la règle 60-30-10 qui fonctionne comme prévu — la retenue se lit comme du raffinement.

Pourquoi la proportion l'emporte sur le choix de la teinte

Je vais avancer une affirmation un peu à contre-courant : pour une interface, réussir les proportions compte plus que réussir les teintes exactes. Vous pouvez remplacer mon accent #2563EB par un sarcelle, un violet ou un corail chaud et le design paraîtra toujours composé, parce que la structure tient. Mais prenez une palette de trois couleurs joliment choisie et parfaitement harmonieuse, appliquez-la en tiers égaux, et elle aura l'air d'un panneau de stationnement.

C'est libérateur une fois qu'on l'a intériorisé. Cela signifie qu'un débutant n'a pas besoin d'un œil parfait pour la couleur — il a besoin de discipline sur la quantité de chaque couleur à déployer. Choisissez n'importe quelle harmonie solide (l'analogue et la complémentaire adjacente sont deux points de départ indulgents ; voyez Comprendre l'harmonie des couleurs en design d'interface pour savoir comment choisir), puis assignez les rôles et rationnez l'accent sans pitié.

Le Nielsen Norman Group fait une remarque connexe dans ses travaux sur l'usage de la couleur pour renforcer le design : la couleur porte le mieux son sens quand elle est utilisée avec parcimonie et constance. La répartition 60-30-10 est essentiellement une recette pratique pour cette parcimonie.

Les erreurs que je vois le plus souvent

Aucune dominante claire. C'est le problème de tableau de bord par lequel j'ai commencé. Trois couleurs de poids quasi égal, aucune n'étant clairement la toile, et l'œil n'a nulle part où se poser. Solution : choisissez une couleur (en général un neutre) et engagez-la sur environ 60 % de la surface avant de placer quoi que ce soit d'autre.

Abus de l'accent. L'échec le plus courant, et de loin. L'accent grimpe sur les titres, puis les icônes, puis quelques bordures, et en une après-midi le design n'a plus de point focal. Une vérification utile à l'instinct : si vous pouvez rapidement désigner plus d'une poignée d'endroits distincts où votre accent apparaît sur un écran donné, vous l'avez probablement trop dépensé. Ramenez-le aux vrais moments interactifs.

Prendre les chiffres pour parole d'évangile. C'est un rapport, pas une mesure. Personne ne compte les pixels. 60-30-10 est un raccourci pour « une dominante, une de soutien, une rare ». Si votre répartition tombe plutôt à 70-20-10, très bien. C'est la hiérarchie qui compte, pas la décimale.

Oublier que la règle s'applique récursivement. À l'intérieur d'une seule carte, vous pouvez rejouer les mêmes proportions — majoritairement de la surface, un peu de détail structurel, une touche d'accent. Et la règle voyage proprement vers le mode sombre : votre 60 % devient simplement un neutre foncé au lieu d'un clair, avec des accents qui ont souvent besoin d'une légère désaturation pour éviter de luire. Si vous allez par là, Bonnes pratiques pour les palettes de couleurs en mode sombre creuse les ajustements.

En faire une méthode reproductible

Voici le flux de travail que je confierais à un designer junior.

• Choisissez d'abord une harmonie. Ouvrez la roue chromatique, choisissez une teinte de base, et générez un ensemble apparenté — analogue pour le calme, complémentaire pour le punch. Ne vous prenez pas encore la tête sur les hex exacts.
• Assignez la dominante. Décidez de votre 60 %. Neuf fois sur dix c'est un neutre. Clair par défaut, foncé pour le mode sombre.
• Assignez la secondaire. Choisissez le 30 % qui donne de la structure — souvent un second neutre ou une version assourdie de votre couleur de marque. Confirmez que dominante et secondaire seules forment une maquette fonctionnelle.
• Rationnez l'accent. Tirez une couleur vive pour le 10 %. Vérifiez son contraste face aux surfaces qu'elle touchera. Puis gardez-la jalousement — chaque fois que vous êtes tenté de la réutiliser, demandez-vous si cet élément est réellement interactif.
• Auditez en plissant les yeux. Reculez, brouillez votre regard, et regardez l'écran. Vous devriez voir un champ calme avec un ou deux points vifs tirant votre regard. Si l'ensemble scintille, votre accent a fui.

La raison pour laquelle cette règle a survécu à un saut des salons aux tableaux de bord, c'est qu'elle résout un problème que les gens ressentent avant de savoir le nommer. La couleur dans un design n'est pas vraiment une affaire de goût — c'est une affaire de budget. La règle 60-30-10 n'est qu'une façon sensée de le dépenser. Si vous voulez mettre un jeu de teintes à l'épreuve avant de vous engager, déposez-les dans le générateur de palettes de couleurs, vérifiez le contraste, puis posez la question plus difficile à laquelle l'outil ne peut répondre à votre place : non pas ces couleurs sont-elles les bonnes, mais combien de chacune suis-je sur le point d'utiliser.