Outil gratuit

Contraste d'une palette

Votre logo a quatre couleurs, votre graphiste en a proposé deux autres : lesquelles peut-on vraiment mettre ensemble ? Entrez toute la palette et voyez toutes les combinaisons d'un coup, avec celles qui passent.

Séparées par des virgules ou des retours à la ligne : hexadécimal (#13243a), rgb(), hsl() ou nom CSS (navy).

Tout se calcule dans votre navigateur.

Toutes les paires

Rangée : couleur du texte. Colonne : couleur du fond. Touchez une case pour voir la paire en situation.

AAA 7 et plus AA 4,5 et plus Grand 3 et plus : titres seulement Échec moins de 3

Combinaisons utilisables

Comment lire la grille

Le contraste ne dépend pas de la couleur qui sert de texte ou de fond : le ratio est le même dans les deux sens. La grille montre les deux pour que vous la lisiez dans le sens où vous travaillez.

4,5 : 1

Texte courant

Paragraphes, menus, liens, étiquettes de formulaire, petits caractères. Le minimum exigé par les WCAG 2 (niveau AA).

Visez 7 : 1 pour les longues lectures.

3 : 1

Titres et grand texte

Texte de 24 px et plus (ou 18,66 px en gras), et éléments non textuels : contour des boutons, champs, icônes, graphiques.

Pas assez pour un paragraphe.

Boutons

Deux contrastes

Le texte du bouton sur son fond (4,5 : 1), et le bouton sur la page (3 : 1), pour qu'on le voie tout simplement.

Les suggestions vérifient les deux.

Quand la palette ne suffit pas

Les couleurs d'une marque sont souvent choisies pour le logo, où elles sont grandes et décoratives. Pour le texte, il faut en général une version foncée de la couleur principale et une très pâle pour les fonds. Notre vérificateur de contraste à deux couleurs propose la nuance la plus proche qui passe, en gardant la même teinte.

Un orange ou un vert pâle fonctionne rarement avec du texte blanc sur un bouton : mettez-y plutôt la couleur de texte foncée de votre palette, ou foncez le bouton.