Pourquoi les couleurs de votre UI font amateur : 6 correctifs avec les codes exacts
Six erreurs de couleur qui donnent un air junior à une interface, et le correctif senior pour chacune avec les codes exacts : un seul accent, couleur plus icône plus mots, zones teintées, texte d'accent plus foncé, texte sombre sur jaune, et une teinte par état.
Une couleur junior est rarement un choc de teintes. Ce sont six petites habitudes : trop d'accents, une couleur qui fait seule tout le travail, des aplats pleine intensité partout, une couleur de marque claire utilisée pour du texte, du blanc sur du jaune, et une seule teinte pour tous les états. Une couleur senior paraît calme parce que chacune de ces habitudes a sa règle. Voici les six, avec les codes.
1. Un seul accent, pour l'action
Rouge
Vert
Ambre
Violet
Neutre
Neutre
Neutre
Accent #6440E0
Quand chaque élément a sa propre couleur, la couleur ne veut plus rien dire. L'œil ne sait pas où se poser, et la vraie action rivalise avec la décoration.
Choisissez un accent et dépensez-le uniquement sur ce qui est actionnable : le bouton principal, l'onglet sélectionné, le lien. Tout le reste passe en neutre. Si vous pouvez pointer un élément coloré et dire « ça, ce n'est pas cliquable », retirez-lui sa couleur. La règle des 60-30-10 est la même idée en proportions : l'accent, c'est le petit dix.
2. Couleur, icône et mots
✕ Junior : une bordure rouge et rien d'autre
Ajoutez l'adresse complète, par exemple sam@mail.com.
✓ Senior : couleur, icône et mots
✕ Junior : quel champ est faux ?
Ajoutez l'adresse complète, par exemple sam@mail.com.
✓ Senior : toujours évident
Environ 8 % des hommes d'ascendance nord-européenne ont du mal à distinguer le rouge du vert, le fameux chiffre « 1 homme sur 12 ». Pour eux, et pour quiconque utilise son téléphone en plein soleil, une bordure rouge est une bordure grise.
Un état a donc besoin de trois signaux : une couleur, une icône devant, et des mots qui disent quoi faire. C'est le critère WCAG 1.4.1, utilisation de la couleur : la couleur peut appuyer un message, jamais en être le seul vecteur. La palette d'erreur complète se trouve dans notre papier sur la couleur des messages d'erreur.
3. Teintez les grandes zones
Passez Pro pour 4 $
Cartes hors ligne, sans pub, et partage de voyage.
Passer à Pro✕ Junior : toute la carte en couleur pleine
Passez Pro pour 4 $
Cartes hors ligne, sans pub, et partage de voyage.
Passer à Pro✓ Senior : une teinte, et la couleur pleine sur le bouton
Un gros bloc de couleur pleine intensité est bruyant, et il consomme votre accent. Le bouton à l'intérieur n'a alors plus rien pour se démarquer, puisque tout autour a déjà la même couleur.
Teintez plutôt la grande zone, et gardez la couleur pleine pour la partie qui travaille. Ici, la carte repose sur #E6DDFF, un palier pâle du même violet, et le bouton est en #6440E0 plein. Appliquez le même geste aux bannières, aux lignes sélectionnées et aux sections mises en avant. Notre papier sur les palettes de couleurs de marque montre comment construire les paliers de teinte à partir d'une seule couleur.
4. Assombrissez le texte d'accent
Violet clair sur blanc
Violet plus foncé sur blanc
Une couleur de marque claire convient très bien en aplat et mal en texte. #9A79FC a l'air sympathique sur un bouton et s'effondre en lien de 14 px sur blanc. Le correctif garde la teinte et baisse la luminosité : #6440E0 est le même violet, assez profond pour être lu.
Pour celui qui doit défendre ce choix : #9A79FC sur blanc fait 3,22 pour 1, sous le 4,5 pour 1 que les WCAG exigent pour le texte, et #6440E0 fait 6,27 pour 1. Notre papier sur le contraste de couleur accessible explique ces chiffres et comment les vérifier.
Gardez deux versions de chaque couleur de marque : la vive pour les aplats et les illustrations, et la plus profonde pour le texte et les icônes fines.
5. Texte sombre sur jaune
Blanc sur jaune
Sombre sur jaune
Le jaune et les couleurs claires sont lumineux par nature, donc le blanc dessus n'offre presque aucune différence de luminosité. Le blanc sur #FED480 fait 1,41 pour 1. Un quasi-noir comme #161513 sur le même jaune fait 12,99 pour 1.
La règle vaut pour tous les fonds clairs : jaune pâle, menthe, bleu ciel, pêche. Si le fond est clair, le texte est sombre. Cela paraît à l'envers pour un designer habitué au blanc sur couleur de marque, et c'est l'un des moyens les plus rapides de donner un air professionnel à un bouton.
6. Une teinte par état
Par défaut
Appuyé
Désactivé
Un bouton qui a le même aspect pressé qu'au repos ne donne aucun retour, et un bouton désactivé peint de la même couleur qu'un bouton actif a l'air cassé. Donnez à chaque état sa propre nuance de la même teinte : #6440E0 par défaut, #4422B2 à l'appui, et une teinte pâle comme #E6DDFF avec un libellé #9A79FC lisible quand il est désactivé.
Le désactivé est le seul état où un faible contraste est acceptable, et les WCAG l'en exemptent, mais le libellé doit rester assez lisible pour qu'on comprenne ce que ferait le bouton. Le même trio de nuances fonctionne pour les liens, les onglets et les interrupteurs.
Les six correctifs en un tableau
| Junior | Senior | La valeur |
|---|---|---|
| Plusieurs accents | Un seul accent, pour l'action | #6440E0 sur la seule chose où appuyer |
| Couleur seule | Couleur, icône et mots | Jamais le seul signal |
| Zones en couleur pleine | Zones teintées | #E6DDFF en fond, #6440E0 sur le bouton |
| Couleur de marque claire en texte | Texte d'accent plus foncé | #6440E0, pas #9A79FC |
| Blanc sur jaune | Texte sombre sur jaune | #161513 sur #FED480 |
| Une teinte pour tous les états | Une teinte par état | #6440E0, #4422B2, #E6DDFF avec libellé #9A79FC |
FAQ
Qu'est-ce qui donne un air amateur à une palette de couleurs UI ?
Trop d'accents, la couleur utilisée seule pour porter du sens, des aplats pleine intensité sur de grandes zones, et des couleurs de marque claires utilisées pour du texte. Corriger ces quatre points compte généralement plus que de changer la palette elle-même.
Combien de couleurs d'accent une UI doit-elle avoir ?
Une. Utilisez-la uniquement pour ce sur quoi on peut appuyer ou agir, et gardez tout le reste neutre. Les couleurs de statut, comme le rouge pour les erreurs, sont à part, et s'accompagnent toujours d'une icône et de mots.
Quelle couleur de texte mettre sur un fond jaune ?
Une couleur sombre. #161513 sur #FED480 fait environ 13 pour 1, alors que le blanc sur le même jaune fait environ 1,4 pour 1. Il en va de même pour tout fond clair.
Comment rendre une couleur de marque claire lisible en texte ?
Gardez la teinte et baissez la luminosité. #9A79FC fait environ 3,2 pour 1 sur blanc, et #6440E0, le même violet, environ 6,3 pour 1.
De quelle couleur doit être un bouton pressé ?
D'une nuance plus foncée que celle par défaut, comme #4422B2 face à #6440E0. Cela confirme à l'utilisateur que son appui a été pris en compte, sans changer la teinte.
Les boutons désactivés doivent-ils respecter les exigences de contraste ?
Les WCAG exemptent les contrôles désactivés du contraste minimum, mais gardez le libellé lisible pour que l'on comprenne ce que fait le bouton.
Sources
- WCAG 2.2, 1.4.3 Contrast (Minimum) (4,5 pour 1 pour le texte, composants désactivés exemptés) et 1.4.1 Use of Color.
- Ratios calculés avec la formule de luminance relative des WCAG : #9A79FC sur #FFFFFF 3,22 pour 1, #6440E0 sur #FFFFFF 6,27 pour 1 (teinte d'environ 254 degrés dans les deux cas), #FFFFFF sur #FED480 1,41 pour 1, #161513 sur #FED480 12,99 pour 1.
- La déficience de la vision rouge-vert touche environ 8 % des hommes d'ascendance nord-européenne, selon le National Eye Institute.
- Les teintes d'état (#4422B2 à l'appui, #E6DDFF avec un libellé #9A79FC en désactivé) viennent de notre propre palette. Les couleurs de filtres de la section 1 sont illustratives.
- Publié pour la première fois sous forme de carrousel sur UX Brainy.
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
