Politique de gestion des cookies
Afin de toujours améliorer votre parcours de navigation sur notre site, nous utilisons des statistiques anonymes de navigation.UI Design
Webdesign : 6 conseils pour créer la palette de couleurs idéale
Publié le février 5, 2024 par Maxine Ficheux
Tiens, un nouvel article sur les couleurs ! Comme quoi, elles ne sont pas utilisées au hasard ou juste pour faire joli puisqu’elles contribuent à la perception de votre image par vos utilisateurs, et jouent aussi un rôle clé dans l’utilisabilité d’un site web ou d’une application mobile.
Dans cet article, je vais partager mes conseils et ma méthodologie pour construire la palette de couleurs idéale pour votre projet. Une palette qui s’aligne avec votre charte graphique tout en respectant les bonnes pratiques du web moderne, notamment en matière d’accessibilité et d’éco-conception.
Les bénéfices : pourquoi il faut s’intéresser à la palette de couleurs de votre projet
Selon les projets, au fur de l’évolution d’un projet, on peut se retrouver avec une palette de couleurs un peu éparpillée. Remettre à plat toutes vos nuances
- Améliorer l’expérience de l’utilisateur grâce à la cohérence graphique
Vos utilisateurs pourront naviguer facilement dans votre site web ou app en suivant une structure visuelle cohérente à chaque page en reconnaissant le type d’info qui leur est transmis (éléments interactifs, messages d’info, etc.) - Concevoir dans une démarche de design inclusif
Profitez-en pour rendre votre produit accessible à tout le monde, y compris aux personnes qui ont des déficiences visuelles (par exemple des difficultés à lire des contrastes légers ou à différencier les couleurs). - Renforcer la relation entre les designers et les développeurs
Définir à quoi sert chaque nuance et bien nommer vos styles vous fera monter dans l’estime du développeur en charge de l’intégration du projet, oui oui ! Ça lui permettra de définir son styleguide au propre directement, plutôt que de récupérer des codes hexadécimaux un peu partout dans la maquette.
La base : une couleur d’interaction identifiable
La première étape, et la plus intuitive il me semble, est de définir la couleur qui sera à appliquer sur tous les CTA (appels à l’action), boutons, marqueurs de sélection ou autre élément cliquable d’une interface. C’est sur cette nuance que l’utilisateur pourra compter pour être guidé dans sa navigation. D’ailleurs, c’est souvent la couleur la plus identifiable de la charte !
Une seule couleur d’interaction ? C’est mieux, oui ! J’aime bien donner l’exemple de Dyson à mes clients : la marque réserve le rouge pour les composants actionnables de ses aspirateurs (comme la gachette d’aspiration, le bouton pour vider le bac à poussière ou encore pour changer d’accessoire, etc.), ce qui les rend plus facile à repérer.
Pour utiliser correctement cette couleur, il faut bien-sûr s’assurer de son niveau de contraste avec d’autres couleurs de fond (au moins du blanc) : cette couleur sera forcément utilisée avec du texte et des icônes.
En ce qui me concerne, j’aime bien disposer de 3 variantes de cette couleur d’interaction :
- La version primaire (par défaut)
- Une version très claire
- Une version très foncée
Je trouve que c’est le nombre de déclinaisons idéale pour créer des boutons primaires et secondaires ou autres blocs de contenus interactifs tout en étant accessible et attractif.
Les couleurs secondaires
On liste ensuite les autres couleurs de la charte graphique, elles pourront servir en complément de la couleur d’interaction et exploiter l’identité visuelle du projet par exemple pour :
- Distinguer des catégories
- Colorer des sections ou autres structures de contenu
- Certains visuels, graphiques, etc.
N’hésitez pas à bien vérifier le niveau de contraste de chacune d’entre elles pour potentiellement écarter ou ajuster certaines teintes si nécessaire.
Un nuancier de gris maîtrisé
Incontournable dans tous les projets, pourtant bien souvent, la gestion des gris est un peu chaotique : on retrouve du noir en opacité réduite ou des nuances de gris à l’infini, c’est ni bon pour les designers, ni pour les utilisateurs, ni pour les intégrateurs ! Alors voici 3 étapes pour faire du tri dans les gris :
1. Lister les éléments où le gris est utilisé
On en trouve fréquemment sur :
- Du texte
- Des icônes
- Des bordures, séparateurs, contours…
- Des arrières-plan
2. Identifier les éléments sujets à un certain niveau de contraste
Facile si vous avez déjà lu mon article sur l’adaptation des couleurs d’une charte graphique pour l’accessibilité ! C’est ce qui est indispensable à la compréhension de vos utilisateurs :
- Le texte
- Les icônes qui servent de bouton
- Les contours des champs de formulaires
3. Créer une palette optimisée
Le but est de limiter au strict minimum les nuances de gris : on est trop facilement tenté de créer une nouvelle variante, alors qu’en créant juste les bonnes nuances, on peut tout faire, vraiment !
Voici ce que contient mon nuancier de gris (ou greyscale) par défaut :
- Un gris très foncé : utile pour le texte ;
- Un gris moyen : utile pour les icônes ou autres éléments non textuels mais potentiellement porteurs d’infos ;
- Un gris clair : pour les bordures (hors champs de formulaires 😉)
- Un gris très clair : on a toujours besoin d’un petit fond gris
Bien-sûr, les gris moyens et très foncé doivent atteindre le ratio de contraste requis avec toutes les autres couleurs qui peuvent servir de fond. 🖌️
On enregistre bien soigneusement ces styles en documentant un minimum les préconisations d’usage pour bien partager l’info à toute l’équipe. Tout le monde gagne du temps, c’est plus propre, et votre UI sera visuellement plus cohérente !
Attention aux couleurs des alertes
Place aux couleurs parfois oubliées ou ajoutées à la palette du projet dans l’urgence au moment du développement. 🫶 Il s’agit des couleurs associées aux erreurs, aux succès (messages de confirmation) ou autres types de notifications.
Là dessus, mon conseil est de générer, comme pour la couleur d’interaction, 2, voire 3 nuances par type d’alerte :
- Une version très foncée : pour des boutons, du texte, un arrière-plan ;
- Une version très claire : peut s’avérer utile en fond d’une alerte, derrière une icône ;
- La version bonus : une nuance intermédiaire correspondant au ratio 3:1 pour les icônes, par exemple.
D’ailleurs, puisqu’on parle d’alertes, je vous recommande mon article sur l’usage des icônes pour l’accessibilité, car la couleur ne suffit pas pour dissocier les types de messages d’info !
La couleur du focus
La dernière nuance un peu abandonnée par les designers : la couleur du focus.
Et si vous prévoyiez une couleur pour cette fonctionnalité plutôt que de vous satisfaire de la couleur du navigateur par défaut (parfois trop claire) ?
Il ne s’agit pas là de “charter” le focus, mais plutôt de s’assurer de la visibilité de celui-ci avec la palette que vous avez créé. Si tous vos boutons sont bleus, le focus bleu clair de Google Chrome peut paraître assez discret, alors qu’il devrait bien ressortir pour qu’un utilisateur qui navigue au clavier plutôt qu’à la souris puisse l’identifier rapidement.
Voici un exemple de couleur que j’ai proposé lors de ma mission sur le Design System de Printemps : un violet très saturé, qui contraste bien avec le vert et le noir de la charte. Cette couleur n’est jamais utilisée dans l’interface, donc si l’utilisateur la voit, c’est forcément qu’il s’agit de l’emplacement de son focus.
Comment organiser cette palette de couleurs ?
Toutes les couleurs ont soigneusement été vérifiées et on sait exactement à quoi elles vont servir, on peut les organiser en catégorisant les styles et variables dans Figma, et les afficher dans une grille de correspondance des couleurs !
C’est un outil que j’adore utiliser et partager à tout le monde au sein du projet, qui permet de sensibiliser à l’accessibilité et assurer une bonne utilisation de la palette de couleurs, du site web jusqu’aux visuels de communication par exemple.
Un site très simple qui permet de générer ce tableau : Accessible Brand Color
Ou bien ce plugin Figma : Contrast Grid
Travaillons ensemble !
Vous avez un projet de refonte de site internet, pourquoi ne pas en profiter pour faire un peu de tri dans votre palette de couleurs ?
Cette ré-organisation peut apporter de la modernité et de la cohérence à votre projet, et dans une organisation produit, cette maîtrise des styles vont faire gagner du temps à vos équipes.
👉 Spécialisée en UX/UI design depuis 8 ans, je serais ravie de contribuer à votre Design System !
Branding
Webdesign : Comment rafraîchir un site web sans refondre son identité visuelle
Accessibilité