Grille de contraste d’une palette

Pourquoi vérifier une palette dans son ensemble

Les couleurs d’une marque se choisissent d’habitude côte à côte sur une planche, comme des échantillons. Elles se choisissent rarement en paires, l’une écrite sur l’autre. Cela finit par poser problème quand un développeur a besoin d’une couleur de lien sur le fond pâle, d’une légende sur le panneau d’accent et d’une étiquette sur le bouton principal et qu’il choisit dans la palette à l’œil.

Le nombre de paires grandit vite. Avec n couleurs, il y a n × (n − 1) façons d’en poser une sur une autre, soit 12 pour quatre couleurs, 30 pour six et 132 pour douze. Les passer en revue une à une est assez long pour que personne ne le fasse. Une grille le fait instantanément et elle montre aussi comment la palette est construite : quelles couleurs servent d’« encre », lesquelles servent de « papier » et lesquelles ne valent que pour la décoration.

Lire la grille

Chaque ligne est une couleur de texte et chaque colonne un fond. Une cellule montre un exemple « Aa » dans ces deux couleurs, le ratio de contraste WCAG tronqué à deux décimales et l’une de quatre étiquettes :

Le ratio est le même quelle que soit la couleur du dessus, donc le tableau est symétrique par rapport à la diagonale. Nous gardons les deux moitiés parce que les exemples ne se ressemblent pas. Foncé sur clair et clair sur foncé ne se perçoivent pas pareil, même avec un nombre identique. Le menu Garder estompe toutes les paires sous le seuil que vous choisissez. Sélectionnez une cellule pour ouvrir un aperçu plus grand avec un titre, un paragraphe, du petit texte et un bouton. Il y a aussi un lien qui envoie la paire vers le calculateur de ratio de contraste, qui peut proposer une teinte voisine qui passe.

Les trois listes sous la grille

Texte de taille normale

Jusqu’à huit paires à 4,5:1 ou plus, les plus fortes d’abord. Chaque paire apparaît une seule fois, avec la couleur la plus claire comme fond, puisque c’est le cas courant.

Grand texte et titres seulement

Jusqu’à six paires entre 3:1 et 4,5:1. Elles sont tentantes parce qu’elles sont bien sur une maquette à 40 px. Mettez-les dans un paragraphe et elles échouent.

Jeux de boutons

Un bouton fait intervenir trois couleurs et deux tests. Son étiquette doit atteindre 4,5:1 contre le bouton et le bouton lui-même doit atteindre 3:1 contre la page, sinon on ne verra pas qu’il y a un bouton. Pour chaque couleur de bouton possible, la liste donne l’étiquette au contraste le plus élevé et le fond de page le plus clair qui satisfont les deux conditions.

Si la première liste est vide, la palette n’a pas de paire encre et papier. Ajoutez un presque noir comme #1a1a1a ou un presque blanc et la grille se remplit.

Réparer une palette insuffisante

La plupart des palettes échouent de la même façon, avec plusieurs tons moyens de luminosité semblable. Le bleu-vert, le corail, la moutarde et le violet ne se ressemblent pas du tout et pourtant aucun ne peut porter du texte sur un autre. Trois ajouts règlent presque tous les cas :

1. Un neutre foncé pour le texte courant. Une version sombre de la teinte principale de la marque fait aussi bien l’affaire que le noir et ressemble quand même à la marque.
2. Un neutre clair pour les fonds de page et de carte, comme un blanc cassé teinté de la teinte de la marque.
3. Un cran plus foncé de la couleur d’accent pour les liens et les boutons. Baissez la luminosité jusqu’à ce que le texte blanc dessus atteigne 4,5:1 et gardez l’accent d’origine pour les grandes formes et les illustrations.

Écrivez ensuite le résultat dans votre charte graphique sous forme de règles sur des paires, par exemple « accent seulement sur blanc, jamais sous du texte courant ». On fait moins d’erreurs avec une liste de paires permises qu’avec une liste de couleurs.

Saisie, partage et limites

Séparez les couleurs par des virgules ou des sauts de ligne. L’hexadécimal avec ou sans #, rgb(), hsl() et les noms de couleurs CSS fonctionnent tous. Les doublons sont fusionnés et tout ce qui suit la douzième couleur est ignoré. La barre d’adresse contient toujours la palette courante sous la forme ?c=1d3557,f1faee,…, donc le lien que vous copiez rouvre la même grille. Tout est calculé dans votre navigateur.