Générer une palette de couleurs avec un vrai contraste pour le texte

Une palette générée a presque toujours l’air juste sous forme de rangée de pastilles. Les ennuis commencent quand vous composez un titre dans l’une des couleurs, le posez sur une autre, et découvrez que la paire qui vous plaisait n’offre presque aucun contraste. Ce guide explique comment utiliser le générateur de palettes pour que le jeu que vous conservez contienne une couleur dans laquelle composer du texte, sur le fond que vous allez réellement utiliser.

Toute couleur passe sur blanc ou sur noir

Commencez par le fait qui change la nature du travail. Le rapport de contraste d’une couleur contre le blanc, multiplié par son rapport contre le noir, vaut toujours 21. La formule du WCAG donne 1.05 ÷ (L + 0.05) contre le blanc et (L + 0.05) ÷ 0.05 contre le noir, où L est la luminance relative de la couleur, et les termes en L s’annulent : 1.05 ÷ 0.05 = 21. Le pire cas pour le meilleur des deux rapports d’une couleur est donc √21, environ 4.58, et toute couleur qui existe dépasse 4.5:1 contre l’un des deux.

Une couleur de texte n’est donc pas une propriété d’une couleur prise isolément. C’est une couleur qui dépasse 4.5:1 contre le fond précis sur lequel elle sera posée. « Peut-elle porter du texte ? » n’a pas de réponse tant que vous n’avez pas dit sur quoi.

C’est pourquoi l’audit de l’outil ne pose pas la question du blanc et du noir. Il la posait autrefois : son décompte des couleurs capables de « carry body text on white or black » (porter du texte courant sur blanc ou noir) jugeait chaque couleur utilisable dans toutes les palettes jamais générées, et son bouton de correction ne pouvait jamais apparaître. C’est en rédigeant ce guide que nous l’avons remarqué. Il pose désormais la question qui correspond à l’usage d’une palette : cette couleur peut-elle porter du texte sur une autre couleur du même jeu ?

Générer la palette, étape par étape

1. Saisissez la couleur que vous devez garder. Le code hex de chaque colonne est un champ modifiable : cliquez dessus, puis tapez ou collez une valeur. Appuyez ensuite sur le cadenas en haut à droite de cette colonne pour la verrouiller.
2. Appuyez sur la barre d’espace, ou sur Generate. Toutes les colonnes non verrouillées sont relancées et les colonnes verrouillées restent. Si vous perdez un jeu qui vous plaisait, Undo (ou la touche Z) revient en arrière d’une étape, et d’une seule.
3. Réglez le nombre de colonnes. Add et Remove font varier la palette de deux à huit couleurs.
4. Lisez le pied de chaque colonne. Il indique le meilleur partenaire de cette colonne dans la palette, avec le rapport entre les deux. « Carries text in this palette » signifie qu’un partenaire atteint 4.5:1 ; sinon, un lien fix → propose la couleur la plus proche de même teinte qui y parviendrait, mesurée contre la couleur la plus foncée ou la plus claire de la palette elle-même. Le bouton Audit affiche et masque ces lignes ; elles sont visibles à l’ouverture de la page.
5. Verrouillez ce que vous gardez et relancez le reste. Lock all (la touche L) bloque toutes les colonnes d’un coup ; un nouvel appui les libère toutes.
6. Conservez-la. Share copie un lien qui rouvre exactement cette palette, Save here la garde dans votre activité récente sur cet appareil, et Export la copie en CSS, OKLCH, Tailwind v4, SCSS, JSON, tokens Figma ou pastilles SVG.

Comment une relance place les couleurs libres

Verrouiller ne se contente pas de laisser une colonne tranquille. La couleur verrouillée la plus à gauche devient l’ancre, et sa teinte et sa chroma décident de l’emplacement de tout le reste. Les colonnes libres sont réparties en teinte de 60° sous la teinte de l’ancre jusque vers 60° au-dessus, chacune décalée au hasard de 12° au plus dans un sens ou dans l’autre. Leur chroma est fixée entre 45 % et 125 % de celle de l’ancre, l’ancre étant considérée comme ayant au moins 0.06.

La luminosité est parcourue de gauche à droite sur les colonnes libres, en partant d’une luminosité OKLCH de 0.22 et en montant par pas égaux qui se partagent 0.62. Avec une colonne verrouillée et quatre libres, les colonnes libres visent 0.22, 0.375, 0.53 et 0.685, chacune décalée de 0.04 au plus.

Deux conséquences pratiques découlent de ce calcul.

• La colonne libre la plus à gauche est toujours la plus foncée. Elle vise 0.22, ce qui en fait la couleur de texte la plus probable sur une page claire.
• Une relance ne produit jamais de couleur de surface pâle. Même avec huit colonnes dont une verrouillée, la colonne libre la plus claire vise 0.22 + 0.62 × 6/7, environ 0.75. Si vous voulez une couleur de page ou de carte presque blanche dans le jeu, saisissez-la dans une colonne et verrouillez-la. La palette d’ouverture de l’outil fait exactement cela : sa cinquième couleur, #f4f1ea, est saisie, pas générée.

La palette d’ouverture, confrontée à elle-même

L’outil s’ouvre avec #0f172a, #1e5aa8, #3ba0c9, #e8b04b et #f4f1ea. La colonne « sur blanc » n’est là qu’à titre de comparaison ; l’outil ne l’affiche plus. La colonne des partenaires correspond à ce qu’indique le pied de chaque colonne, arrondi par défaut (vers le bas) à deux décimales, comme le fait l’outil.

Couleur	Sur blanc (pour comparaison)	Meilleur partenaire dans la palette
#0f172a	17.85:1	#f4f1ea, 15.82:1
#1e5aa8	6.81:1	#f4f1ea, 6.03:1
#3ba0c9	2.97:1	#0f172a, 5.99:1
#e8b04b	1.95:1	#0f172a, 9.13:1
#f4f1ea	1.12:1	#0f172a, 15.82:1

Le bandeau affiche ici 5 sur 5, et cette fois, c’est mérité : chaque couleur a un partenaire sur lequel elle peut porter du texte, parce que le jeu d’ouverture a été construit avec une extrémité foncée et une extrémité claire. Sur blanc seul, seules deux des cinq passeraient.

Une palette populaire en tons moyens montre à quoi ressemble un échec. #264653, #2a9d8f, #e9c46a, #f4a261 et #e76f51, le jeu bleu canard, sable et corail, obtient 3 sur 5. Le meilleur partenaire du bleu canard moyen est le bleu canard foncé, à 3.03:1, et sa correction est #53bfb0, qui atteint 4.53:1 contre #264653 en gardant la teinte à 183°. Le corail plafonne à 3.25:1. Aucune des deux couleurs n’est mauvaise ; le jeu n’a simplement rien d’assez clair pour les accompagner.

L’ambre est le cas le plus instructif. À 1.95:1, il est inutilisable comme texte sur blanc, et pourtant l’ambre sur le bleu marine mesure 9.13:1. Qu’une couleur soit une couleur de texte dépend entièrement de ce qui se trouve derrière.

Le contrôle que le bandeau effectue

La deuxième phrase du bandeau est un test à l’échelle de la palette qu’un vérificateur de contraste n’effectue jamais, puisqu’il compare un premier plan avec un autre. Il simule chaque paire de couleurs sous huit types de déficience de la vision des couleurs, à l’aide du modèle de Machado, Oliveira et Fernandes (2009), et signale toute paire dont la distance CIEDE2000 tombe sous 11 pour l’un d’eux. Deux couleurs peuvent chacune dépasser 4.5:1 contre la page et rester difficiles à distinguer pour une personne atteinte de deutéranomalie, que les notes de l’outil situent à environ 5 % des hommes.

Si le bandeau signale une paire, le simulateur de daltonisme la montre sous chaque type de vision, et Créer une palette adaptée aux daltoniens explique la correction.

Les autres méthodes

Il n’existe aucune méthode intégrée sur macOS, Windows ou iPhone pour générer une palette et l’auditer, ni aucune solution en ligne de commande parmi celles que ces guides recommandent. L’alternative manuelle consiste à utiliser n’importe quel générateur suivi d’un vérificateur de contraste, une paire à la fois, pour chaque paire dans laquelle vous comptez composer du texte.

	Cet outil	Un générateur à barre d’espace classique
Verrouillage	La teinte verrouillée détermine où vont les autres	Emplacement verrouillé ignoré, le reste au hasard
Contraste par couleur	Son meilleur partenaire dans la palette, avec le rapport	Aucun, ou contre le blanc uniquement
Contrôle à l’échelle de la palette	Paires qui se confondent en simulation de vision des couleurs, signalées	Non proposé
Sauvegarde	Couleurs transmises dans le lien	Un compte

Vérifier que rien ne quitte l’onglet

Il n’y a aucun fichier à envoyer ici, et la palette vit dans la barre d’adresse, après le signe #. Les navigateurs n’envoient pas cette partie d’une URL au serveur : un lien partagé s’ouvre donc sans que les couleurs n’atteignent jamais le site. Pour le confirmer, ouvrez les DevTools, allez dans le panneau Network et appuyez plusieurs fois sur la barre d’espace : rien de ce qui sort ne contient vos couleurs.

Ouvrez le générateur de palettes, verrouillez la couleur que vous ne pouvez pas changer, et lisez le partenaire de chaque colonne avant de vous décider pour un jeu. Pour les seuils eux-mêmes, Quel rapport de contraste vous faut-il vraiment ? précise quel chiffre s’applique où.