Règle 60-30-10 : le système de couleurs
Sommaire
La règle 60-30-10 est une convention de composition visuelle qui structure l’utilisation des couleurs en trois proportions. Elle s’applique aussi bien au webdesign qu’à la communication print, à la décoration intérieure ou à la mode. En design graphique numérique, elle offre un cadre simple pour créer des interfaces cohérentes sans saturer le regard.
Objectifs#
- Comprendre le principe de la règle 60-30-10 et ses proportions
- Identifier les trois rôles d’une couleur dans une composition
- Construire une palette équilibrée et accessible
- Appliquer les critères d’accessibilité liés aux couleurs
Le principe des trois proportions#
La règle repose sur une hiérarchie visuelle claire : une couleur domine, une seconde soutient, une troisième attire l’attention. Ces proportions ne sont pas arbitraires, elles reproduisent l’équilibre naturel qu’un oeil perçoit sans fatigue.
block-beta
columns 10
A["60%\nDominante"]:6
B["30%\nSecondaire"]:3
C["10%\nAccent"]:1
style A fill:#4a5568,stroke:#2d3748,color:#e2e8f0,font-size:14px
style B fill:#667eea,stroke:#5a67d8,color:#ffffff,font-size:14px
style C fill:#f6ad55,stroke:#ed8936,color:#1a202c,font-size:14px
60% : la couleur dominante#
La couleur dominante occupe la majorité de la surface. C’est elle qui définit l’ambiance générale de la composition : arrière-plans, grandes zones de contenu, espaces neutres.
Pour cette proportion, on choisit généralement une couleur sobre ou neutre, qui n’impose pas de tension visuelle. Une couleur trop saturée sur 60% de la surface fatigue l’oeil rapidement.
Astuce
Limitez-vous à une seule couleur dominante. Si vous en utilisez deux, l’une doit rester très proche de la neutralité (blanc cassé, gris clair, beige).
30% : la couleur secondaire#
La couleur secondaire structure la composition. Elle s’applique aux éléments de support : barres de navigation, encadrés, en-têtes de section, boutons non prioritaires.
Elle doit s’harmoniser avec la couleur dominante tout en créant un contraste suffisant pour délimiter les zones. On la choisit souvent dans la même famille chromatique (teinte analogue) ou en complémentarité modérée.
10% : la couleur d’accent#
La couleur d’accent est la plus petite proportion, mais la plus visible. Elle s’applique aux éléments qui doivent capter l’attention immédiatement : boutons d’action principaux (CTA), liens importants, alertes, badges.
C’est sur cette couleur que l’on peut se permettre de la vivacité ou de la saturation, précisément parce qu’elle est utilisée avec parcimonie.
Information
La règle 60-30-10 ne dit rien sur les couleurs choisies, elle porte uniquement sur leurs proportions. On peut tout à fait construire une palette sombre, pastel ou monochrome en respectant ces ratios.
Les couleurs complémentaires du système#
En pratique, une palette de design ne se limite pas à trois couleurs. Deux catégories s’ajoutent au triptyque principal.
Couleurs sémantiques#
Les couleurs sémantiques communiquent un état ou un message sans que l’utilisateur ait besoin de lire le texte associé. Elles sont universellement reconnues et ne doivent pas être remplacées par des couleurs de marque.
| Rôle | Couleur conventionnelle | Usage |
|---|---|---|
| Succès | Vert | Validation, confirmation |
| Avertissement | Orange | Alerte non bloquante |
| Erreur | Rouge | Blocage, action échouée |
| Information | Bleu | Notification neutre |
Attention
Ne jamais utiliser le rouge pour une couleur d’accent décorative si votre interface contient des messages d’erreur en rouge. L’utilisateur associera l’accent à une erreur.
Couleurs neutres#
Les couleurs neutres gèrent les textes, les séparateurs, les arrière-plans secondaires et tous les éléments qui ne doivent pas attirer l’attention. Elles constituent souvent la partie invisible mais indispensable d’une palette.
Une palette neutre bien construite propose plusieurs niveaux de gris avec des ratios de contraste testés, utilisables pour le texte courant, les libellés secondaires et les bordures.
Accessibilité et contraste#
Une palette respectant la règle 60-30-10 n’est pas automatiquement accessible. Il faut vérifier que les combinaisons texte/fond atteignent un ratio de contraste minimum de 4,5:1 pour le texte normal, conformément aux normes WCAG 2.1 niveau AA.
Deux situations à tester systématiquement :
- Le texte courant (couleur dominante en fond, couleur neutre en texte)
- Les boutons d’action (couleur d’accent en fond, texte blanc ou noir par-dessus)
Astuce
L’outil Contrast Checker de WebAIM permet de vérifier un ratio en quelques secondes. Entrez les deux codes hexadécimaux et le résultat est immédiat.
Pensez aussi à tester votre palette en simulation de daltonisme. Les outils comme Figma ou les DevTools de Chrome intègrent cette fonctionnalité nativement.
Mode sombre#
Si votre design propose un mode sombre, les proportions 60-30-10 restent valables, mais les couleurs changent de rôle. La couleur dominante devient une teinte sombre (fond), les neutres s’inversent (texte clair sur fond sombre), et la couleur d’accent peut nécessiter un ajustement de luminosité pour rester lisible.
Information
Une couleur d’accent à #FF6B00 sur fond blanc peut afficher un contraste acceptable, mais devenir illisible sur fond sombre. Testez chaque variant de couleur d’accent dans les deux modes.
En pratique#
Pour construire une palette avec cette méthode :
- Choisir la couleur dominante en premier, en partant de l’identité de marque ou de l’ambiance souhaitée
- Dériver la couleur secondaire par analogie ou complémentarité modérée
- Choisir la couleur d’accent pour son impact visuel, en vérifiant le contraste
- Définir les neutres (au moins trois niveaux : fond, texte secondaire, texte principal)
- Ajouter les couleurs sémantiques standards
- Tester l’ensemble sur un composant représentatif (carte, formulaire, bouton)