Choisir ses couleurs : la méthode en 3 étapes

Trois suffisent, et chacune a un rôle précis. Une dominante, une couleur d'action, un gris. Tout le reste se déduit de ces trois-là.

Avant de continuer, ouvre ta page d'accueil et compte les couleurs différentes, boutons et images compris. Au-delà de cinq, tu tiens déjà ton problème.

1. La dominante, celle qu'on retiendra

C'est la couleur qu'on associera à toi. Elle habille les grandes surfaces : les fonds de section, les titres, les traits, les icônes. Rien d'autre ne doit lui disputer la place.

Choisis-la pour ce qu'elle doit dire, pas pour ce que tu préfères. Un bleu profond rassure et fait sérieux. Un terracotta réchauffe et fait artisanal. Un vert sombre évoque le soin et le vivant. Ce sont des associations partagées, pas des lois, mais elles font le premier tri avant qu'on ait lu un mot.

Et regarde ce que fait ton secteur avant de trancher. Se fondre dans la même teinte que toutes les autres coachs de ta ville est un choix ; le faire sans le savoir n'en est pas un.

2. La couleur d'action, réservée aux boutons

Celle-ci ne sert qu'à une chose : montrer où cliquer. Elle doit trancher avec la dominante, et n'apparaître nulle part ailleurs. Pas en fond de citation, pas en soulignement décoratif, pas dans une illustration.

C'est la règle la plus vite abandonnée, et celle qui coûte le plus cher. Le jour où ta couleur d'action décore aussi trois encadrés, elle ne signale plus rien du tout, et ton bouton devient un élément de décor parmi d'autres.

Une seule couleur d'action pour tout le site, donc, et un seul bouton principal par page.

3. Le gris qui n'est pas gris

Un gris pur, celui que proposent les outils par défaut, donne toujours un rendu un peu sale et un peu froid. Le correctif tient en une phrase : verse une pointe de ta dominante dedans.

Avec un bleu, tu obtiens un gris légèrement bleuté. Avec un terracotta, un gris qui tire imperceptiblement sur le chaud. Personne ne saura dire pourquoi, mais la page paraîtra plus tenue.

Le même principe vaut pour ton blanc de fond : un blanc très légèrement teinté fatigue moins l'œil qu'un blanc pur, surtout sur les longues pages de texte.

4. Les proportions comptent plus que les teintes

Deux sites avec exactement les mêmes trois couleurs peuvent donner un résultat élégant ou illisible. Ce qui les sépare, c'est la répartition.

La répartition qui fonctionne presque toujours

• Neutres, fond et gris60 %
• Dominante30 %
• Couleur d'action10 %

La couleur d'action occupe une petite part, et c'est précisément ce qui la rend visible. Une page où elle occupe un tiers de l'écran ne met plus rien en avant.

5. Le test qui évite l'accident

Avant de valider, vérifie que ton texte reste lisible sur tes fonds. Un gris clair sur blanc, ou du blanc sur un jaune vif, passe très mal au soleil, sur un écran mal réglé, ou pour une lectrice qui distingue mal les contrastes.

Colle tes deux couleurs dans un vérificateur de contraste en ligne, il y en a de gratuits, et vise le niveau AA. C'est le seuil retenu par les règles d'accessibilité, et il correspond assez bien à ce qui reste lisible dans la vraie vie.

Fais aussi le test le plus simple du monde : ouvre ta page sur ton téléphone, dehors. Ce qui disparaît là ne sert à rien.

Ce que ça change

Une palette tenue ne rend pas un site beau à elle seule. Elle enlève ce qui le rendait brouillon, et c'est presque toujours la moitié du chemin.

Si tu ne fais qu'une chose : reprends ta couleur d'action et retire-la de partout où elle n'est pas un bouton. C'est le geste le plus rapide, et celui qui se voit le plus vite sur tes clics.