Une palette se juge rarement couleur par couleur. Ce qui compte, c’est ce qui se passe quand on pose l’une sur l’autre : combien de combinaisons sont réellement lisibles, lesquelles ne le sont que pour du texte agrandi, lesquelles sont à proscrire. Cette grille croise toutes vos couleurs de texte avec toutes vos couleurs de fond et donne, pour chaque case, le rapport de contraste et le niveau atteint.
Tout est calculé dans votre navigateur, selon la formule de luminance relative de WCAG 2.1. Aucune donnée n’est envoyée nulle part, et l’adresse de la page se met à jour à mesure que vous saisissez : la mettre en favori suffit à conserver une palette.
Une couleur par ligne, au format #FCCE61, Or PostHack. Le nom est facultatif, l’écriture courte #FC6 est acceptée.
Laissez vide pour comparer les couleurs de texte entre elles, ce qui est le cas le plus courant.
Importer une grille depuis une adresse
Collez l’adresse d’une grille de l’outil d’origine. Seules les couleurs qu’elle contient sont lues, aucune requête n’est envoyée nulle part.
Comment lire la grille
Chaque case porte le rapport de contraste entre la couleur de texte de sa ligne et la couleur de fond de sa colonne, suivi du niveau atteint.
| Niveau | Seuil | Ce que ça autorise |
|---|---|---|
| AAA | 7:1 | Le niveau visé par défaut sur mes projets, pour tout texte courant. |
| AA | 4,5:1 | Le minimum réglementaire pour du texte courant (WCAG 1.4.3, RGAA 3.2). |
| AA18 | 3:1 | Valable uniquement pour du texte agrandi, au moins 18 pt ou 14 pt gras. |
| DNP | en dessous | Ne passe pas. À réserver aux éléments décoratifs, qui ne portent aucune information. |
Deux précisions qui évitent des erreurs courantes. Le seuil de 3:1 s’applique aussi aux composants d’interface et aux éléments graphiques porteurs d’information (WCAG 1.4.11) : un bouton dont la bordure est le seul indice visuel y est soumis, même si son texte est conforme. Et un rapport élevé n’est pas une garantie de confort : du blanc pur sur du noir pur atteint 21:1 tout en étant fatigant sur de longues lectures.
D’où vient cet outil
Il reprend le principe du Contrast Grid de Nathan Curtis, publié par EightShapes sous licence MIT, que j’utilisais depuis des années, y compris pour valider la palette de ce site. En septembre 2026, le nom de domaine eightshapes.com a cessé de résoudre : tous les liens enregistrés vers des palettes sont devenus inertes du jour au lendemain. L’outil d’origine n’a pas disparu, il a suivi le changement de nom de son auteur et vit désormais chez Directed Edges, mais l’épisode a suffi à me convaincre d’en héberger ma propre version.
Celle-ci est une implémentation indépendante : aucun code n’a été repris, l’algorithme étant celui de la spécification WCAG. Elle en garde le format d’adresse, de sorte qu’un lien créé avec l’outil d’origine fonctionne ici en changeant simplement le nom de domaine, ou en le collant dans le champ d’import ci-dessus. Elle en écarte en revanche deux choses : les 715 kilo-octets de bibliothèques JavaScript, et le traceur Google Analytics que contenait la page.