La règle du 60-30-10 est dépassée : les systèmes de couleurs modernes qui fonctionnent réellement
La règle du 60-30-10 est un raccourci de design d'intérieur que les designers appliquent sans cesse au design de produits. Voici ce que proposent les systèmes de couleurs modernes.
La règle Règle 60-30-10 est la première chose qu'on enseigne aux designers en matière de couleurs, et c'est aussi la première chose que la plupart des équipes produit sérieuses abandonnent discrètement dès qu'elles déploient une interface fonctionnelle. Soixante pour cent de couleurs dominantes, trente pour cent de couleurs secondaires et dix pour cent d'accentuation.
Épurée. Facile à citer. Complètement inapplicable dès qu'une marque intègre des boutons, des états désactivés, des notifications, des graphiques, un mode sombre et un site de documentation.
Cette règle n'est pas fausse en soi. Elle est simplement conçue pour un problème différent. Les meilleurs systèmes de design, une fois déployés, utilisent non pas une proportion, mais un système jeton basé sur les rôles. Cet article explique pourquoi la règle 60-30-10 est inefficace, ce qui l'a remplacée et présente cinq systèmes de design concrets qui l'ont mise en œuvre à grande échelle.
Origine de la règle 60-30-10
La règle 60-30-10 est un raccourci de décoration intérieure datant du milieu du XXe siècle, adapté a posteriori au design numérique par ceux qui avaient besoin d'une règle à citer.
Son origine est liée à la décoration intérieure. Une pièce possède une couleur dominante (murs), une couleur secondaire (ameublement, rideaux) et une couleur d'accent (coussins, œuvres d'art). Soixante, trente, dix. Cette règle fonctionne pour les pièces car elles sont considérées comme des surfaces statiques uniques, perçues par une seule personne à la fois, et conservent leur couleur jusqu'à ce qu'on les repeigne.
Aucune de ces hypothèses ne résiste à l'épreuve du design produit. Un produit numérique n'est pas une surface statique. Il est composé de centaines de surfaces, chacune avec ses propres états, thèmes et contextes. Cette règle n'a jamais été conçue pour ce contexte, et cela se voit.
Pourquoi elle ne tient pas la route en design produit
La règle 60-30-10 suppose une surface statique unique et un seul utilisateur, ce qui ne correspond absolument pas à la réalité du design produit.
Les interfaces réelles comportent des boutons désactivés, des états de survol, des anneaux de focus, des bannières d'erreur, des notifications de succès, des séries de données graphiques, des états vides, des squelettes de chargement et des couleurs sémantiques pour les actions destructives. Aucun de ces éléments ne correspond exactement à « 60, 30 ou 10 % de la surface ». Il ne s'agit pas de surface, mais de comportements.
La règle devient caduque dès l'ajout du mode sombre. Votre couleur neutre claire (60 %) doit alors devenir une couleur neutre foncée (60 %), votre couleur secondaire (30 %) doit changer de tonalité pour maintenir la hiérarchie visuelle, et votre couleur d'accentuation (10 %) doit généralement s'éclaircir ou changer complètement de teinte pour rester accessible. Ce n'est pas un problème de proportions, mais un problème de système.
L'accessibilité est le dernier obstacle. Les WCAG rapports de contraste ne se soucient pas du pourcentage de bleu sur votre page. Ce qui compte, c'est que le bleu spécifique d'un bouton spécifique contraste suffisamment avec le fond spécifique. On ne peut pas résoudre ce problème avec des ratios de surface.
Systèmes de couleurs modernes : alternatives
Les systèmes qui alimentent les meilleures interfaces remplacent les règles de proportion par des niveaux de jetons basés sur les rôles. Ces niveaux décrivent la fonction d'une couleur, et non sa quantité.
| Niveau | Fonction | Exemples de jetons |
|------|--------------|---------------------|
| Surface | Calques d'arrière-plan et reliefs | bg-default, bg-subtle, bg-raised, bg-overlay |
| Contenu | Texte et icônes sur les surfaces | text-default, text-muted, text-on-accent |
| Accentuation | Couleurs de marque et couleurs d'action principales | accent-primary, accent-primary-hover, accent-secondary |
| État | États interactifs et de retour d'information | state-hover, state-focus, state-disabled |
| Sémantique | Signaux chargés de sens | success, warning, critical, info |
Chaque jeton décrit un rôle. « Cette couleur est la surface derrière une carte. » « Cette couleur est le texte au-dessus de l'accent. »
Le concepteur ne choisit jamais entre « secondaire ou accent à 30 % ». Il choisit parmi les rôles déjà définis par le système.
Les avantages sont cumulatifs. L'ajout du mode sombre se résume à associer les mêmes jetons à des valeurs brutes différentes, sans avoir à redessiner l'interface. L'ajout d'un nouveau thème de marque se résume à un simple remplacement de jeton au niveau de l'accent. L'accessibilité est appliquée au niveau du jeton, et non vérifiée page par page.
Cinq systèmes de conception qui font mouche
Ces systèmes sont déployés à grande échelle avec des palettes basées sur les rôles qui restent cohérentes en mode clair, en mode sombre et sur toutes les surfaces avec lesquelles l'utilisateur interagit.
Material Design 3
À voir en direct sur m3.material.io
Material 3 est le plus explicite quant à ce changement. Le système définit des rôles de couleur tels que « primaire », « sur-primaire », « surface », « sur-surface », « primaire inverse », chaque rôle étant prédéfini pour le contraste. Les concepteurs ne choisissent pas les couleurs. Ils choisissent les rôles, et les jetons sont automatiquement associés aux valeurs appropriées pour le thème actif.
À retenir : la convention de nommage « sur- ». on-primary pour les textes/icônes superposés à une surface principale intègre directement l'accessibilité dans le nom du jeton.
Radix Colors
À voir en direct sur radix-ui.com
Radix Colors propose des gammes de 12 niveaux par teinte, chaque niveau étant prédéfini à un rôle (arrière-plan d'application, arrière-plan discret, élément d'interface utilisateur, survol, focus, actif, couleur unie, texte, texte à contraste élevé). Aucune logique de proportion. Chaque niveau correspond à un rôle.
À retenir : la gamme numérotée avec annotations de rôle. Elle offre aux designers un vocabulaire commun qui élimine 90 % des hésitations quant au choix du gris.
Shopify Polaris
Découvrez-le en direct sur polaris.shopify.com
Polaris organise les couleurs par rôle de composant : arrière-plan (surface), texte (contenu), icône, bordure et interactif. Chaque rôle comporte des sous-rôles pour le survol, le clic, la désactivation et la sélection. Le système rend structurellement difficile pour un designer d'utiliser des couleurs en dehors des catégories définies.
À retenir : le regroupement par rôle. La séparation des jetons « bordure » et « surface » impose une utilisation intentionnelle des couleurs au niveau des composants.
Deux marques l'utilisent en production
La documentation du système de conception ci-dessus sert de référence. Ces deux marques en sont la preuve. Stripe et Linear utilisent quotidiennement la couleur basée sur les rôles au niveau du produit, et toutes deux démontrent la validité de ce modèle en situation réelle.
Stripe
À voir en direct sur stripe.com
Stripe déploie une marque, et non pas seulement une documentation de système de conception. Le site public illustre l'utilisation de la couleur basée sur les rôles en production.
Presque tout est composé de surfaces et de contenus neutres. Le violet est la couleur d'accentuation et apparaît précisément là où se trouvent les actions, les liens et les éléments graphiques de la marque. Aucune logique de proportion. Logique de rôle.
Ce qu'il faut retenir : la rigueur avec laquelle on utilise la couche d'accentuation. Le couleur d'accent de Stripe est utilisé avec parcimonie car son rôle est bien défini. Utiliser les couleurs d'accentuation à des fins décoratives revient à les priver d'un impact visuel.
Linear
Regardez-le en direct sur linear.app
Linear privilégie les teintes neutres plus que la plupart des marques à grande échelle. Le produit est composé de plusieurs couches de jetons de surface foncés, avec une seule teinte d'accentuation (violet) qui assure l'ensemble de l'impact visuel. Aucune règle de proportion n'aurait permis d'obtenir un tel résultat. Il s'agit d'un système purement basé sur les rôles : la couche « accentuation » est une couleur unique utilisée avec parcimonie, tandis que la couche « surface » est une superposition de couleurs en relief.
Ce qu'il faut retenir : l'audace d'utiliser une seule couleur pour la couche d'accentuation. De nombreux systèmes de design récents surutilisent les couleurs d'accentuation. Linear prouve qu'une seule couleur d'accent bien choisie et utilisée de manière cohérente permet une reconnaissance plus forte que trois couleurs d'accent proportionnelles.
Comment créer une palette basée sur les rôles
Créer une palette de cette manière prend plus de temps que de choisir trois couleurs et de leur attribuer des pourcentages, mais c'est rentable dès la première utilisation du mode sombre.
Le processus est inversé par rapport à la méthode d'apprentissage de la plupart des designers. Au lieu de choisir d'abord les couleurs puis de leur attribuer des rôles, on choisit d'abord les rôles puis on leur attribue des couleurs.
-
Définir les niveaux de rôle. Commencez par surface, contenu, accent, état et sémantique. La plupart des produits n'ont besoin que de ces cinq niveaux. Certains en nécessitent un sixième pour la visualisation des données.
-
Écrire les jetons avant de choisir les valeurs hexadécimales. Chaque jeton doit décrire un rôle (
surface-subtle,content-muted,accent-primary-hover). Si le nom d'un jeton décrit une couleur (« bleu clair »), renommez-le. 3. Commencez par définir l'échelle neutre. La majeure partie d'une interface est composée de couleurs neutres. Créez une échelle complète (Radix utilise 12 niveaux pour une raison précise) avant de toucher à la couleur de marque. -
Ajoutez la couleur d'accentuation en dernier. La couleur d'accentuation est généralement le seul endroit où identité de marque est activement utilisé. La modération est essentielle.
-
Gérez le mode sombre en réattribuant les jetons, et non en repensant l'interface. Si votre système est basé sur les rôles, le mode sombre consiste à modifier la valeur des jetons, et non à changer complètement les couleurs.
-
Garantissez l'accessibilité au niveau des jetons. Chaque jeton
on-surfacedoit avoir un rapport de 4,5:1 avec sa surface associée. Intégrez cette vérification dès le départ.
La tentation est grande de définir trois rôles (principal, secondaire, accent), de crier victoire et de se lancer. C'est la règle du 60-30-10 déguisée en jetons. Elle s'effondre au même endroit : le premier élément essentiel.
Pour une vision plus globale de la façon dont les choix de couleurs sont perçus par les utilisateurs avant même que ce travail sur les jetons n'ait d'importance, La psychologie des couleurs dans le design aborde la dimension sémantique. Pour comprendre comment les systèmes de couleurs s'intègrent dans le contexte plus large du système, guide des systèmes de conception offre une vue d'ensemble.
FAQ
La règle du 60-30-10 est-elle utile ?
Oui. Elle reste pertinente pour la conception de supports uniques : affiches, publications sur les réseaux sociaux, sections marketing phares, emballages, pages éditoriales. Dès lors que le livrable est une surface unique, la règle permet de calculer rapidement les proportions. La conception de produits est différente.
Combien de couleurs un système de design doit-il comporter ?
Moins de valeurs hexadécimales brutes que vous ne le pensez, organisées en un plus grand nombre de jetons. La plupart des systèmes de design comportent 8 à 12 étapes neutres, 8 à 12 étapes d'accentuation et 3 à 5 familles sémantiques, toutes résolues en jetons basés sur les rôles. Le nombre de couleurs brutes est faible. Le nombre de rôles est élevé.
Quelle est la différence entre une palette de couleurs et un système de couleurs ?
Une palette est un ensemble de couleurs. Un système de couleurs est un ensemble de rôles, un ensemble de règles régissant l'interaction de ces rôles et une correspondance entre les rôles et les couleurs, qui peut varier selon le thème. Une palette répond à la question « Quelles sont les couleurs de la marque ? ». Un système répond à la question « Quelle est la couleur de cet élément dans cet état et ce thème ? ».
Arrêtez de mesurer les couleurs en pourcentages
La règle 60-30-10 n'est pas mauvaise en soi. Elle est simplement hors de propos.
Le design produit n'est pas une pièce. Il s'agit d'un système de surfaces, d'états et de rôles qui évolue au gré des interactions de l'utilisateur.
Mesurer la couleur en pourcentage est aussi pertinent que de mesurer la typographie en pourcentage de la page. On ne dit pas « 30 % du texte sont des titres », mais « les titres constituent un rôle avec un style défini ». La couleur doit fonctionner de la même manière.
Les marques qui proposent les meilleures solutions d'adaptation (Material, Radix, Polaris, BRAND9 et BRAND4) l'ont compris et ont bâti leur système autour de ce principe. Copier leurs pourcentages est une erreur. Copier leur structure de rôles est essentiel.
Si votre palette actuelle se limite à trois couleurs et à une règle d'attribution vague, vous n'avez pas de système de couleurs, mais une simple préférence. Définissez les niveaux, nommez les rôles et ne discutez des valeurs hexadécimales qu'en dernier recours.
(LINK16)
Need a color system built to scale, not just to swatch? Brainy builds palettes with token tiers, dark mode, and accessibility baked in.
Get Started
