Aujourd’hui, on va parler couleurs. Pas juste de “goûts” ou de tendances, mais de l’impact réel que tes choix de couleurs peuvent avoir sur les visiteur·euses de ton site ainsi que sur l’environnement. Toutes les combinaisons de couleurs ne se valent pas. Tou·tes tes client·es idéaux·ales n’auront pas la même vision de ton site web, ni la même expérience de ce dernier.
La plupart du temps, on choisit une palette parce qu’on « aime » bien le rendu. Mais en réalité, les couleurs jouent plusieurs rôles clés :
- Elles transmettent un message émotionnel (apaisement, énergie, sobriété…)
- Elles représentent ton entreprise ou ton activité, la vibe que tu veux renvoyer auprès de ta cible
- Elles installent un univers graphique, un style spécifique en fonction de leurs combinaisons
- Elles vont avoir un impact écologique plus ou moins important
- Elles conditionnent surtout la lisibilité de ton site et donc son accessibilité
Ce n’est donc pas juste une question de goût. C’est une question de responsabilité et de choix.
Les couleurs éco-responsables sont-elles alors qu’un détail ?
Oui et non. On va mettre les pieds dans le plat et résumer tout ça en 2 points :
- Sur le web, les couleurs sombres (proches du noir) consomment moins d’énergie sur certains écrans (OLED notamment).
- En print, c’est l’inverse : plus ta couleur est claire, moins tu utilises d’encre.
Alors on fait quoi Jamie ? Un site en dark mode et des cartes de visite toutes blanches ? NON, non, non et non ! Surtout pas.
Le conseil que je donne à l’intégralité de mes client·es et potentiel·les futur·es client·es est toujours le même : sur un site web, il y a de nombreux facteurs polluants, certains plus que d’autres. Contrairement à ce qu’on pourrait croire, les couleurs font partie des facteurs les moins polluants. Cela reste donc un impact minime comparé au reste des éléments de ton site web.
Nota bene : les couleurs, c’est environ moins d’1 % du poids total d’une page web. Donc, tu n’auras pas un site éco-responsable juste parce que tu choisis des éco-couleurs web. C’est surtout ton hébergement, l’optimisation de ton code, le poids de tes images, l’optimisation de tes vidéos, etc., qui feront toute la différence.
Tandis que sur le print, l’impact est beaucoup plus important ! Alors si on réfléchit deux minutes, il vaut mieux privilégier une charte graphique avec des couleurs éco-responsables pour le print plutôt que pour le web.
Mais ne nous arrêtons pas en si bon chemin.
Tant qu’à être dans le respect du vivant et de ce qui nous entoure, prenons en considération ++ les êtres humains qui vont venir visiter ton site et leurs déficiences visuelles possibles. Parce que sur le web, comme sur le print, le vrai combat à mener, c’est l’accessibilité des couleurs entre elles.
Ce serait quand même dommage d’appliquer une charte graphique sur son site qui rendrait toutes tes pages, articles, boutons, formulaires, etc., illisibles et donc incompréhensibles et inutilisables pour certaines personnes.
Le vrai combat ? Utiliser des couleurs qui matchent entre elles #MatchyMatchy
Des couleurs qui matchent entre elles, c’est tout simplement des combinaisons de couleurs qui ont un assez bon ratio de contraste entre la couleur du texte et la couleur de l’arrière-plan.
Au-delà d’avoir des couleurs éco-responsables pour le print, il faut donc surtout vérifier qu’on ait bien des combinaisons de couleurs accessibles : assez lisibles entre elles, pour tout le monde. Aka : exit la palette de couleurs full pastel !
Comment vérifier l’accessibilité de ses couleurs ?
Avec des outils spécifiques et surtout pas en les regardant simplement de loin ou de près. La phrase que j’entends systématiquement lorsque je dis à mes client·es que les couleurs de leur charte graphique ne sont pas accessibles entre elles :
“Ben pourtant moi je les vois bien, j’arrive à lire.”
Sauf que… iels ne sont pas tout le monde, et tout le monde ne perçoit pas les couleurs comme iels.
Je leur demande alors s’iels ont pensé aux personnes qui sont daltoniennes, par exemple. Ou bien à celleux qui ont une vision réduite de leur champ de vision, de la fatigue visuelle, ou utilisent même des lecteurs d’écran pour les aider à lire l’écran. C’est dans ces cas précis que, si le taux de contraste entre tes couleurs est trop faible, ton contenu devient carrément illisible pour iels.
Les outils spécifiques que je vais te présenter maintenant ne sont pas n’importe lesquels : ils sont basés sur les normes WCAG et RGAA, qui sont celles de la réglementation officielle de l’accessibilité numérique dans le monde (WCAG) et spécifiquement en France (RGAA).
Ces outils te diront donc avec exactitude si la combinaison de deux de tes couleurs entre elles a un ratio de contraste assez fort (entre la couleur d’arrière-plan et la couleur de ton texte) pour être lisible par le plus grand nombre.
Mes 3 outils préférés pour tester tes couleurs
Coolors Contrast Checker : tu colles deux des codes couleurs de ta marque, celui de ton arrière-plan et celui de ton texte, et tu vois si l’association match ou pas en termes d’accessibilité.
Color Review : très utile si tu n’as pas encore de palette de couleurs pour ton activité ou ton site et que tu veux voir en live le rendu de cette combinaison de couleur sur du texte, des boutons, des illustrations, etc.
Adobe Color Contrast : c’est mon préféré car il me donne plus de détails en m’indiquant exactement si les couleurs sont accessibles entre elles pour des gros titres uniquement, ou seulement des illustrations, ou bien pour les gros titres + corps de texte + illustrations.
Recommencer avec toutes les combinaisons de couleurs possibles avec ta palette de couleurs.
Nota bene
Il y a vérifier puis ajuster sa palette de couleurs
Partons d’un cas concret : celui de mes dernier·es client·es avec qui j’ai réalisé ce travail d’ajustement de la palette de couleurs de leur site pour la rendre plus éthique et éco-responsable. C’était dans le cadre de l’optimisation de leur site web au complet. Et qui dit optimisations, ne dit pas refonte. Le but n’était surtout pas de tout refaire à zéro, ni de changer la charte graphique au complet. L’objectif était simplement d’ajuster certaines nuances de couleurs pour les rendre plus accessibles entre elles.
C’était d’autant plus important que ces client·es avaient deux enjeux majeurs par rapport à ça :
- Iels sont une référence dans leur domaine, donc beaucoup de gens les connaissent et les identifient depuis toujours avec leur charte graphique de base. Donc il était essentiel de conserver l’ADN de cette dernière afin de ne pas perturber leur audience actuelle.
- Iels avaient une couleur dominante très marquée qui était le reflet de leur identité, mais qu’iels utilisaient avec parcimonie car parfois trop forte justement. Le problème, c’est que tous les endroits de leur site où cette couleur était utilisée rendaient alors la lecture très compliquée pour certaines personnes, car pas accessible du tout avec aucune autre couleur de leur charte graphique.
Résultat : on a bel et bien gardé leur identité visuelle, mais on a ajusté légèrement les teintes, comme tu peux le constater ci-dessous, pour que tout le monde puisse accéder à leur contenu. Mon conseil sera donc le suivant pour toi : pas besoin de tout révolutionner, juste d’ajuster intelligemment (teinte, nuance, contraste, etc.) jusqu’à obtenir la bonne combinaison.
Petite astuce en plus : comment bien définir les couleurs spécifiques de chaque élément de son site web ?
Sur le web, la clé mystère est la suivante : c’est la règle du 60/30/10. Elle signifie que chacune des couleurs présentes dans ta charte graphique va être amenée à être plus ou moins tartinée sur ton site. Aka : toutes les couleurs de ton site ne vont pas être utilisées à parts égales. Tu n’auras jamais sur les pages de ton site exactement 20 % de rouge, 20 % de bleu, 20 % de blanc, 20 % de noir et 20 % de gris. Pour que ce soit le plus harmonieux, en webdesign, on utilise la règle du 60/30/10, soit :
- 60 % : la couleur dominante (souvent neutre ou sombre, utilisée pour les fonds, l’arrière-plan du site), ici le crème
- 30 % : une teinte intermédiaire (souvent utilisée pour marquer uniquement certains blocs et les mettre en avant), ici le rose Barbie
- 10 % : la couleur d’accent (celle qui attire l’œil sur les boutons, les liens, les appels à l’action), ici le fuchsia
Si tu veux faire le point sur tes couleurs rapidement et facilement afin de vérifier que ta palette reflète tes valeurs sans sacrifier ni la planète, ni l’accessibilité, j’ai préparé un guide pratique à compléter, rien que pour toi : Comment bien préparer la refonte de ton site éthique et éco-responsable.
À l’intérieur, tu trouveras des exercices simples et concrets pour poser les bases d’un site aligné avec tes valeurs. Tu peux le télécharger gratuitement dès maintenant.
Le mot de la fin…
Et si ta palette devenait un acte militant ? Au final, l’impact écologique des couleurs est limité. Mais leur pouvoir sur l’accessibilité et l’expérience utilisateur·ice est immense. Et si tes couleurs devenaient plus qu’un choix esthétique ? Et si elles devenaient un signe fort de ton engagement : un site beau, lisible, accueillant… pour tou·tes ?
Parce qu’un site éthique, ce n’est pas juste une question de design. C’est surtout une question de valeurs et d’engagement.
Bonus : si tu veux savoir si une couleur est “plus éco-responsable” sur le web, additionne les valeurs de son code RVB (rouge, vert, bleu). Si le total est ≤ 255, c’est une couleur qui consomme peu d’énergie sur le web. Tu peux vérifier ça sur Color-Hex.
