Une belle palette qui ne se lit pas est un échec : texte gris clair sur fond blanc, bouton orange avec libellé blanc, rouge et vert pour distinguer deux états... Beaucoup de sites perdent des visiteurs à cause d'un contraste insuffisant, et l'accessibilité numérique est de plus en plus encadrée. Ce guide propose une méthode en cinq étapes pour composer une palette harmonieuse et lisible : choisir des harmonies, attribuer des rôles, vérifier les contrastes WCAG, préparer le thème sombre et penser au daltonisme.
Pour appliquer la méthode, utilisez le générateur de palettes, le convertisseur de couleurs (avec son vérificateur de contraste) et le générateur de dégradés.
Étape 1 : choisir une harmonie
Sur le cercle chromatique, les teintes forment des figures qui donnent des combinaisons agréables :
- Analogues (teintes voisines, environ 25 à 30°) : calme et cohérent, idéal pour une interface sobre.
- Complémentaires (opposées, 180°) : contraste fort ; une couleur domine, l'autre ponctue.
- Complémentaires divisées (150° et 210°) : contraste marqué, moins brutal.
- Triade (120°) et tétrade (90°) : plus riches, plus difficiles à équilibrer.
- Monochrome : une teinte déclinée du clair au sombre, sans fausse note.
L'harmonie ne suffit pas : ce sont les proportions et les luminosités qui font la palette. Travaillez de préférence dans un espace perceptuel comme OKLCH, où deux couleurs de même luminosité paraissent aussi claires, au contraire du HSL où un jaune est bien plus clair qu'un bleu à « luminosité » égale.
Étape 2 : donner un rôle à chaque couleur
- Les neutres (fonds, textes, bordures) couvrent l'essentiel de l'écran.
- La couleur de marque porte l'identité : en-tête, liens, éléments sélectionnés.
- L'accent signale l'action principale, et doit rester rare.
- Les couleurs de statut (succès, avertissement, erreur, information) suivent des conventions : vert, orange, rouge, bleu.
La règle 60-30-10 répartit les surfaces : environ 60 % pour la dominante (souvent un neutre), 30 % pour la secondaire, 10 % pour l'accent. Beaucoup de systèmes déclinent chaque couleur en une échelle de nuances de 50 à 950 : les nuances 50 à 200 servent de fonds discrets, 600 à 700 de couleurs d'action, 800 à 950 de textes et de fonds sombres.
Étape 3 : vérifier les contrastes (WCAG)
Le rapport de contraste compare la luminance relative de deux couleurs : (L1 + 0,05) ÷ (L2 + 0,05), L1 étant la plus claire. Il va de 1 : 1 (aucun contraste) à 21 : 1 (noir sur blanc).
| Élément | Niveau AA | Niveau AAA |
|---|---|---|
| Texte courant | 4,5 : 1 | 7 : 1 |
| Grand texte (24 px, ou 19 px en gras) | 3 : 1 | 4,5 : 1 |
| Composants d'interface et icônes porteuses de sens | 3 : 1 | - |
| Texte sur fond | Contraste | Verdict (texte courant) |
|---|---|---|
| Noir sur blanc | 21 : 1 | Excellent |
| Gris #767676 sur blanc | 4,54 : 1 | Juste suffisant (AA) |
| Gris #777777 sur blanc | 4,48 : 1 | Échoue d'un cheveu |
| Blanc sur terracotta #c67139 | 3,61 : 1 | Insuffisant pour du texte courant |
| Blanc sur terracotta foncée #a65a28 | 5,10 : 1 | Conforme AA |
| Brun #201e1d sur crème #f5ead8 | 13,95 : 1 | Excellent (AAA) |
| Bleu pur sur rouge pur | 2,15 : 1 | Illisible malgré l'écart de teinte |
Retenez que la teinte ne fait pas le contraste, la luminosité si : une couleur de marque qui plaît n'est pas toujours utilisable comme fond de bouton avec du texte blanc, il faut alors l'assombrir pour le bouton et garder l'original en décoration. Le même raisonnement s'applique aux placeholders, aux textes désactivés et aux liens.
Étape 4 : préparer le thème sombre
- N'inversez pas simplement les couleurs. Un fond noir pur avec du texte blanc pur éblouit et crée un effet de vibration. Préférez un fond sombre légèrement teinté (gris-brun, gris-bleu) et un texte clair adouci.
- Désaturez les couleurs vives. Un accent très saturé « vibre » sur fond sombre : utilisez une nuance un peu plus claire et moins saturée de la même teinte.
- Exprimez la profondeur par la luminosité. Sur fond sombre, les ombres se voient peu : les surfaces élevées sont plus claires que le fond.
- Revérifiez tous les contrastes. Une association valide en thème clair peut échouer en thème sombre : le contraste se mesure pour chaque thème.
- Utilisez des variables CSS. Définissez les couleurs en jetons (
--bg,--text,--accent) et redéfinissez-les pour le thème sombre ; la propriétécolor-schemeadapte aussi les contrôles natifs du navigateur.
Étape 5 : penser au daltonisme
Environ 8 % des hommes et 0,4 % des femmes ont une vision des couleurs différente, le plus souvent une confusion entre rouge et vert. Quelques règles :
- Ne transmettez jamais une information par la couleur seule. Un champ en erreur doit porter un message et une icône, pas seulement un contour rouge. Un graphique à deux séries doit varier aussi les motifs ou les étiquettes.
- Variez la luminosité entre couleurs qui doivent être distinguées : deux teintes de même luminosité deviennent identiques en vision monochrome.
- Évitez les associations rouge/vert et, dans une moindre mesure, bleu/violet et vert/marron, pour opposer deux états.
- Testez en niveaux de gris : si deux éléments se confondent, la palette manque de contraste de luminosité.
Checklist finale : une dominante, un accent rare, des neutres teintés, tous les textes à 4,5 : 1 au moins, un thème sombre vérifié séparément, et aucune information portée par la seule couleur.
Questions fréquentes
Quel contraste minimum faut-il pour un texte ?
Selon les WCAG 2.2, 4,5 : 1 pour le texte courant (niveau AA) et 3 : 1 pour le grand texte. Le niveau AAA demande 7 : 1 pour le texte courant.
Qu'est-ce que la règle 60-30-10 ?
Une répartition indicative des couleurs : 60 % de couleur dominante (souvent un neutre), 30 % de couleur secondaire et 10 % d'accent. Elle évite les interfaces criardes et guide l'œil vers l'action principale.
Mon orange de marque ne passe pas avec du texte blanc : que faire ?
Assombrissez la couleur pour les fonds de boutons et les textes (en gardant l'original pour les illustrations et les grandes surfaces), ou passez à du texte foncé. Le contraste dépend de la luminosité, pas de la teinte.
Comment faire un thème sombre réussi ?
Évitez le noir pur, désaturez les accents, exprimez la profondeur par la luminosité des surfaces et revérifiez les contrastes. Définissez les couleurs en variables CSS pour redéfinir facilement le thème.
Comment savoir si ma palette est accessible aux daltoniens ?
Vérifiez que l'information ne repose pas sur la couleur seule, que les couleurs à distinguer diffèrent en luminosité, et testez votre interface en niveaux de gris ou avec un simulateur de daltonisme.