L’essentiel en bref
- La palette d’un site web fonctionne mieux comme une courte liste de rôles : fond de page, surface, texte, texte discret, bordure, accent et couleurs d’état.
- La plupart des sites n’ont besoin que d’un accent de marque, surtout pour les boutons et les liens, les neutres faisant le reste du travail.
- Les WCAG demandent un rapport de contraste d’au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte et les éléments d’interface comme les bordures de champs.
- Stocker les couleurs en propriétés personnalisées CSS, ou design tokens, permet de changer le thème de tout un site en remplaçant un seul jeu de valeurs.
- Un thème sombre est un jeu de valeurs distinct pour les mêmes rôles, pas une inversion du thème clair.
Sur cette page
Une bonne palette de couleurs de site web n’est pas un moodboard de cinq couleurs préférées. C’est une courte liste de rôles, chacun tenu par une couleur : le fond de page, les surfaces en relief, le texte courant, le texte plus discret, les bordures, un accent pour les actions, et du rouge, de l’ambre et du vert pour les états. Choisissez d’abord votre accent de marque, construisez autour des neutres calmes, vérifiez le contraste de chaque association de texte, puis stockez le résultat en variables CSS pour que tout le site utilise les mêmes valeurs.
Les rôles dont chaque site a besoin
Règle empirique
Règle empirique
Règle empirique
Utilisé pour
Règle empirique
Règle empirique
Règle empirique
Règle empirique
Comment choisir les couleurs d’un site web
- 1
Commencez par un seul accent
Votre couleur de marque, ou celle que vous voulez qu’on associe à vous. Si vous n’en avez pas, comment choisir les couleurs de sa marque vous aide.
- 2
Teintez les neutres vers lui
Des gris avec une pointe de la teinte de l’accent semblent lui être apparentés. Une marque sarcelle reçoit des gris froids, légèrement bleutés ; une marque terre cuite, des gris chauds et crème.
- 3
Choisissez clair, sombre ou les deux
Prenez le thème que la plupart des visiteurs verront en premier et concevez-le entièrement avant de commencer l’autre.
- 4
Vérifiez chaque association de texte
Texte sur fond, texte sur surface, texte discret sur les deux, blanc sur le bouton d’accent. Corrigez tout ce qui est sous 4,5:1.
- 5
Appliquez 60, 30, 10
Environ 60 % de fond, 30 % de surfaces et de texte, 10 % d’accent. La règle 60 30 10 explique cet équilibre.
Trois palettes de site web pour démarrer
Les règles de contraste qui gardent un site lisible
Les règles de contraste des WCAG fixent le plancher : 4,5:1 pour le texte courant, 3:1 pour le grand texte (environ 24 px, ou 19 px en gras) et 3:1 pour les composants d’interface comme les bordures de champs et les icônes porteuses de sens. Le vérificateur de contraste de WebAIM teste n’importe quelle paire. Notre guide du contraste des couleurs en explique les raisons et les cas limites.
Erreurs courantes
- Un texte indicatif gris clair utilisé comme seul libellé
- Du texte blanc sur une couleur de marque pâle comme le jaune ou le bleu ciel
- Des liens qui ne se distinguent du texte que par la couleur
- Une bordure pâle comme seul contour d’un champ de formulaire
- Des messages d’erreur affichés seulement en rouge
Corrections
- De vrais libellés au-dessus des champs, texte discret à 4,5:1
- Du texte sombre sur les accents clairs, ou une nuance plus profonde de l’accent
- Soulignez les liens dans le texte courant, ou mettez-les en gras
- Des bordures de champs à 3:1 sur leur fond
- Une icône ou des mots en plus de la couleur
Coder votre palette en tokens
Stockez chaque rôle une seule fois en propriété personnalisée CSS et n’utilisez que ces variables dans vos styles. Un thème sombre, une campagne saisonnière ou un changement d’identité devient alors une modification d’un seul bloc de valeurs, pas une recherche dans chaque fichier. C’est l’idée centrale des design tokens.
:root {
--ground: #f7f9fb;
--surface: #ffffff;
--text: #14202b;
--text-muted: #52606d;
--border-input: #8a96a3;
--accent: #0f766e;
--on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--ground: #0f0e17;
--surface: #1a1926;
--text: #ecebf3;
--text-muted: #a5a3b8;
--border-input: #6e6b85;
--accent: #a78bfa;
--on-accent: #0f0e17;
}
}
body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }--on-accent passe du blanc au quasi noir, car un bouton lilas clair a besoin d’un texte sombre.Le mode sombre est une palette à part entière
Inverser une palette claire fonctionne rarement. Les accents saturés brillent trop sur le noir, les ombres disparaissent, et le texte blanc pur éblouit. Construisez le mode sombre comme un second jeu de valeurs : un fond quasi noir avec une pointe de teinte, des surfaces qui s’éclaircissent à mesure qu’elles s’élèvent, un texte plus doux, et un accent éclairci jusqu’à atteindre le contraste. Le design en mode sombre va plus loin.
Quand la couleur de marque va au-delà des boutons
Si l’accent ne sert qu’aux boutons, le site peut paraître générique. La réponse n’est pas de mettre plus d’accent partout, mais un endroit où la marque peut s’exprimer : l’en-tête, une bande de mise en avant ou le pied de page. Un riche dégradé dans la famille de la marque y fonctionne bien, pendant que le reste de la page reste calme et lisible.
Une bande expressive en 1920×1080 porte la marque ; le reste du site utilise les rôles calmes vus plus haut.
Un Mark Gradiently peut être cette couche expressive : un fond que personne d’autre n’a, qui choisit pour chaque ligne une couleur de texte dans sa propre palette pour que les titres restent lisibles. Pour aller plus loin sur les associations, voyez l’harmonie des couleurs et le design de l’en-tête.
Les questions qu’on nous pose
Combien de couleurs doit avoir un site web ?
En général un accent de marque, trois à cinq neutres pour le fond, les surfaces, le texte et les bordures, et trois couleurs d’état. Plus d’un accent rend plus difficile de savoir ce qui est cliquable.
Comment choisir la palette de couleurs de mon site ?
Partez de votre accent de marque, teintez les gris neutres vers sa teinte, choisissez un thème clair ou sombre, et vérifiez que chaque association de texte atteint au moins 4,5:1 de contraste.
Quel rapport de contraste pour le texte d’un site ?
Les WCAG demandent au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte et les éléments d’interface comme les bordures de champs.
Le fond d’un site doit-il être blanc pur ?
Pas forcément. Un blanc cassé très légèrement teinté paraît souvent plus calme et fait ressortir les cartes blanches comme des surfaces.
Comment ajouter un mode sombre à ma palette ?
Définissez chaque rôle de couleur comme propriété personnalisée CSS, puis fournissez un second jeu de valeurs dans une media query prefers-color-scheme: dark.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil