123 Design StudioLa théorie des couleurs est souvent enseignée comme une roue et un jeu d'harmonies, mais en conception de produit ce qui compte est de bâtir un système lisible, cohérent et accessible. Ce guide laisse de côté le superflu et se concentre sur la construction des palettes, leur équilibre, le respect des contrastes, leur encodage en tokens et la gestion du mode sombre sans mauvaises surprises.
Des teintes à une palette de travail
Vous n'avez besoin que de quelques rôles, pas d'un arc-en-ciel. Une palette pratique comporte une couleur primaire (marque et actions clés), un ou deux accents ou secondaires, un jeu sémantique (succès, alerte, erreur, info) et une rampe de gris neutres pour le texte, les bordures et les surfaces. La rampe neutre travaille plus que n'importe quelle couleur de marque ; réussissez-la en premier.
- Générez chaque couleur comme une rampe de nuances claires et foncées, pas une valeur unique.
- Teintez légèrement les neutres vers votre marque pour la cohésion.
- Réservez la couleur saturée et contrastée aux actions et au sens, pas à la décoration.
La règle des 60-30-10 pour l'équilibre
Une façon fiable d'équilibrer une composition est la règle des 60-30-10 : environ 60% d'une couleur dominante (souvent neutre), 30% d'une secondaire et 10% d'un accent pour l'emphase et les appels à l'action. Cette discipline garde les interfaces calmes et fait réellement ressortir l'accent, parce qu'il est rare. Quand tout réclame l'attention, rien ne l'emporte.
La retenue fait la différence entre une couleur de marque et une interface criarde. Utilisez votre couleur la plus forte là où vous voulez le plus diriger le regard.
Contraste et accessibilité ne se négocient pas
Les choix de couleur doivent satisfaire l'accessibilité avant l'esthétique. Selon WCAG 2.2, le corps de texte exige au moins 4,5:1 de contraste sur son fond, le grand texte 3:1, et les éléments non textuels porteurs de sens comme icônes et bordures de champ au moins 3:1.
- Testez chaque paire texte/fond, y compris les états survol et désactivé.
- N'utilisez jamais la couleur comme seul signal — associez les couleurs d'état à des icônes ou du texte.
- Vérifiez que votre accent passe le contraste sur fond blanc et sur surface sombre.
Encoder la palette en tokens
Les valeurs hexa codées en dur sont l'ennemi d'un système maintenable. Exprimez la couleur en design tokens à deux couches : tokens primitifs (la rampe brute, ex. blue-600) et tokens sémantiques décrivant l'intention (ex. color-action, color-text-default, color-surface). Les composants ne référencent que les tokens sémantiques.
Une structure de tokens qui passe à l'échelle
- Primitifs :
gray-50…900,blue-50…900 - Sémantiques :
text-default,text-muted,surface,border,action - États :
action-hover,action-disabled,danger
Le bénéfice est énorme : rebranding, thématisation et mode sombre deviennent une question de remappage des tokens sémantiques plutôt qu'une chasse à travers les feuilles de style.
Penser le mode sombre
Le mode sombre n'est pas une inversion. Quelques principes le gardent utilisable :
- Évitez le noir pur en fond et le blanc pur en texte ; le contraste agressif provoque un halo. Utilisez des surfaces presque noires et un texte légèrement cassé.
- Réduisez la saturation des accents, qui paraissent plus intenses sur surface sombre.
- Exprimez l'élévation par des surfaces plus claires plutôt que par des ombres lourdes, quasi invisibles sur fond sombre.
- Revérifiez chaque paire de contraste dans le thème sombre ; passer en clair ne garantit pas de passer en sombre.
Mettre la théorie des couleurs au travail
Une couleur efficace en conception de produit est un système, pas un moodboard. Construisez des rampes neutres et de marque, équilibrez-les avec quelque chose comme le 60-30-10, imposez le contraste dès le départ et exprimez tout en tokens sémantiques pour que thèmes et mode sombre découlent naturellement. Faites cela et vos décisions de couleur seront défendables, cohérentes et accessibles — ce qui sépare un produit conçu d'un produit simplement décoré.