Choisir les couleurs d'un site web : la méthode derrière une palette qui tient
Une palette de site n'est pas une jolie série de couleurs : c'est un système de rôles qui doit rester lisible et accessible. Voici la méthode pour en bâtir une qui tient, et pourquoi une combinaison séduisante, générée par une IA ou glanée ici et là, échoue souvent à l'écran.
Une palette, ce sont des rôles, pas une humeur
La plupart des palettes échouent pour une raison simple : elles sont choisies comme une ambiance, pas construites comme un système. On tombe sur trois couleurs qui vont bien ensemble, on les pose sur le site, et les ennuis commencent au premier paragraphe de texte.
Une couleur, sur une interface, occupe un rôle. Le fond, les surfaces posées dessus, le texte principal, le texte discret, la couleur de marque qui porte les actions, l'accent rare pour attirer l'oeil, les bordures, les états de succès et d'erreur. Choisir une palette, c'est attribuer chaque rôle avant de parler d'esthétique.
Chaque couleur d'un site fait un travail précis. Un bon système en compte peu, mais chacune a un rôle clair et un niveau de contraste maîtrisé. Exemple de base neutre plus bleu de marque, tous les textes restant lisibles.
La règle 60-30-10 : une proportion, pas une décoration
La 60-30-10 vient du design d'intérieur, où on l'utilise pour équilibrer une pièce. C'est une règle de pouce, pas une loi, mais elle règle d'un coup l'erreur la plus fréquente sur le web.
L'idée : environ 60% de l'écran pour la couleur dominante, presque toujours un neutre de fond, 30% pour une secondaire qui structure, et 10% seulement pour l'accent, réservé aux actions et aux points d'attention. L'accent tire sa force de sa rareté.
La couleur vive ne doit pas envahir l'écran. Réservée à 10% environ, sur les boutons et les points d'action, elle guide l'oeil. Étalée partout, elle ne dirige plus rien.
Prenons un de ces duos d'inspiration qu'on trouve à la pelle, Tiffany vif et gris très sombre. En système, le gris devient le fond dominant, le blanc porte le texte, et le Tiffany passe en accent sur les boutons. La même couleur vive qui, en aplat plein écran, agresserait l'oeil, devient un guide efficace quand elle tient sa part de 10%.
Le contraste n'est pas une option : ce que dit la norme
Voici le point que 90% des palettes trouvées en ligne ignorent, et celui qui fait la différence entre un site et un site utilisable. La lisibilité d'un texte sur son fond se mesure par un ratio de contraste, et ce ratio a un seuil légal, pas seulement esthétique.
Contraste minimal exigé entre un texte courant et son fond pour respecter le niveau AA des règles d'accessibilité WCAG. Le seuil descend à 3:1 pour les grands titres (au moins 18 points, ou 14 points en gras) et pour les éléments d'interface comme les bordures de champs ou les icônes utiles.
Source : W3C, WCAG 2.2, critère 1.4.3Le calcul compare la luminance des deux couleurs, selon la formule de la WCAG. On n'a pas à le faire à la main : un vérificateur de contraste rend le chiffre à partir de deux codes hexadécimaux. La règle pratique tient en une phrase : tout texte doit passer 4,5:1, tout bouton et toute bordure doivent passer 3:1.
Trois paires de couleurs réelles issues de palettes d'inspiration, avec leur ratio de contraste mesuré. La lisibilité ne se juge pas à l'oeil sur une maquette flatteuse : elle se calcule.
Un exemple qui touche notre propre marque : le bleu GHIS!, #3292FF, n'atteint que 3,14:1 sur blanc. Il est donc superbe en aplat, en bouton ou en grand titre, mais interdit pour du petit texte gris-bleu sur fond blanc. La même honnêteté vaut pour toute couleur : le Carrot orange échoue sur blanc à 2,46:1, et passe haut la main à 7,68:1 sur un fond noir. Une couleur n'est jamais lisible ou illisible en soi, seulement en paire.
Ce n'est pas qu'une affaire de confort. Une personne sur douze chez les hommes, une sur deux cents chez les femmes, vit avec une déficience de la vision des couleurs, soit près de 300 millions de personnes dans le monde. Et depuis le 28 juin 2025, l'accessibilité numérique est une obligation légale pour de nombreuses entreprises en Europe, au titre de l'European Accessibility Act.
Le piège des palettes toutes faites
On collectionne tous des palettes qui claquent : moodboards, générateurs en ligne, captures glanées au fil de la veille. Un studio comme le nôtre en garde des dizaines. Elles sont précieuses pour trouver une teinte, et trompeuses si on les prend pour un système.
Deux raisons de fond. D'abord, une palette d'inspiration est pensée pour une seule image qui doit accrocher l'oeil, pas pour porter des paragraphes, des états, des formulaires et un mode sombre. Ensuite, elle n'attribue aucun rôle : elle donne des couleurs, pas un fond, un texte, un primaire.
Il y a même un piège plus bête, et instructif. Sur ces visuels, les codes sont parfois faux : on voit passer une pastille nommée Midnight Blue qui porte le code d'un orange, ou une pastille Silver au code quasi noir. La leçon est nette : ne copiez jamais un hexadécimal les yeux fermés, vérifiez la couleur et son contraste.
L'IA génère des couleurs, pas des systèmes
Depuis peu, on n'a même plus besoin d'un moodboard : on demande une palette à une IA et elle en propose dix en quelques secondes. C'est un formidable accélérateur d'exploration, et le réflexe naturel dans un studio IA-first comme le nôtre.
Mais une IA générative vous rend la même chose qu'un moodboard : des couleurs, pas un système. Elle propose rarement d'elle-même une échelle de nuances, une attribution des rôles, un contraste vérifié pour chaque paire et un mode sombre cohérent. Sur ces points, elle produit du plausible, pas du garanti, comme lorsqu'elle écrit du code.
La conséquence est nette : la méthode compte davantage à l'ère de l'IA, pas moins. L'outil raccourcit le temps d'exploration, le travail d'ingénieur reste le même, transformer une jolie proposition en palette qui passe le contraste et tient sur toutes les pages. C'est exactement la logique de notre repère sur les technologies du web en 2026 : l'IA accélère la fabrication, elle ne remplace pas les décisions.
Du combo au système : la méthode en cinq temps
Voici comment on passe d'une jolie inspiration à une palette qui tient sur un vrai site. C'est la démarche qu'on applique chez GHIS! avant d'écrire la moindre ligne de style.
- Partez d'une base neutre et d'une primaire. Un fond, une ou deux surfaces, deux niveaux de texte, puis une seule couleur de marque forte. L'inspiration sert à choisir cette primaire, pas à empiler cinq teintes.
- Déclinez, ne posez pas un aplat. Une couleur utilisable est une échelle de nuances (claires et sombres), pas une valeur unique. C'est ce qui donne les survols, les états et la profondeur.
- Attribuez les rôles. Chaque couleur reçoit un emploi : fond, surface, texte, primaire, accent, bordure, succès, erreur. Rien ne reste décoratif.
- Vérifiez chaque paire texte sur fond. Tout couple qui porte du texte passe au vérificateur de contraste. Un couple qui échoue est corrigé, pas gardé parce qu'il est joli.
- Traitez le mode sombre comme une re-cartographie. Voir la section suivante.
Concrètement, un trio d'inspiration comme Persian Blue, Platinum et Carrot devient un système lisible : le Platinum en surface claire, le Persian Blue en primaire (9,1:1 sur blanc, très confortable), le Carrot en accent rare sur fond sombre. Les mêmes couleurs, mais rangées par rôle et validées au contraste.
Le mode sombre : re-cartographier, pas inverser
Le mode sombre n'est pas une inversion des couleurs, c'est une seconde attribution des rôles. On ne prend pas du blanc pour le passer en noir : on repense chaque rôle pour un fond sombre.
Trois réflexes suffisent. Le fond n'est jamais un noir pur mais un gris très sombre, plus reposant. Les surfaces s'éclaircissent au lieu de s'assombrir, car en mode sombre la profondeur monte vers la lumière. Et les couleurs vives se désaturent un peu, sinon elles vibrent sur le fond foncé. Chaque paire repasse le test de contraste, exactement comme en mode clair.
Une planche d'inspiration, à passer au crible
Voici une sélection de combinaisons qui fonctionnent visuellement, glanées au fil de nos veilles. Traitez-les pour ce qu'elles sont : un point de départ pour trouver une teinte forte, pas une palette finie.
Elles ont déjà passé le test du contraste : chacune contient une paire lisible pour poser du texte. La suite vous revient : choisissez une dominante, attribuez les rôles, déclinez en nuances, et revérifiez chaque paire au moment de la poser.
Une sélection retenue pour son allure et pour ses règles : chacune contient une paire de couleurs au contraste suffisant pour porter du texte. Nom et code sur chaque teinte, à traduire en rôles avant usage.
Ce que ça veut dire pour vous
Pour un dirigeant, la couleur n'est pas un caprice de designer, c'est un actif de marque et un critère de conformité. Une palette bien construite se reconnaît, se lit par tout le monde, et se décline sans se casser à chaque nouvelle page.
Deux questions à poser à quiconque fabrique votre site. Chaque texte passe-t-il le seuil de contraste de 4,5:1 ? La couleur de marque est-elle réservée aux actions, ou étalée jusqu'à ne plus rien signifier ? Si les réponses sont claires, votre site a des couleurs qui travaillent pour vous.
C'est exactement notre façon de concevoir une identité sur un site web pensé pour durer : une palette réduite, des rôles nets, un contraste vérifié, un mode sombre pensé dès le départ. La couleur est un système, pas une humeur, et c'est ce qui fait tenir une marque à l'écran comme dans le temps.
Questions fréquentes
Moins qu'on ne croit. Une base neutre (un fond, une ou deux surfaces, deux niveaux de texte), une couleur primaire de marque, et un accent utilisé avec parcimonie suffisent à presque tout. La richesse vient des nuances d'une même couleur, pas du nombre de couleurs différentes.
Une proportion, pas une décoration : environ 60% de l'écran pour la couleur dominante (souvent un neutre de fond), 30% pour une secondaire, 10% pour un accent réservé aux actions et aux points d'attention. Elle évite l'erreur la plus commune, mettre sa couleur vive partout, ce qui détruit la hiérarchie.
On mesure le contraste, on ne le devine pas. La norme WCAG demande un ratio d'au moins 4,5:1 entre un texte courant et son fond, 3:1 pour les grands titres et les éléments d'interface. Un vérificateur de contraste donne le chiffre en une seconde à partir de deux codes hexadécimaux.
Parce qu'une palette d'inspiration est pensée pour une seule image qui doit accrocher l'oeil, pas pour porter du texte, des boutons, des états et un mode sombre. Elle sert à choisir une teinte, pas à fournir un système prêt à l'emploi. Il faut la traduire en rôles et vérifier chaque paire texte sur fond.
Sources
- Understanding SC 1.4.3 : Contrast (Minimum), WCAG 2.2 : W3C, Web Accessibility Initiative
- Understanding SC 1.4.11 : Non-text Contrast, WCAG 2.2 : W3C, Web Accessibility Initiative
- About Colour Blindness : Colour Blind Awareness, 2025
- Directive (UE) 2019/882 (European Accessibility Act) : Union européenne, applicable depuis le 28 juin 2025
Repères liés
Pour aller plus loin