Outil gratuit

Contraste des couleurs

Un texte gris pâle sur blanc, c'est élégant, et personne ne le lit sur un téléphone au soleil. Entrez deux couleurs : vous obtenez le ratio WCAG, un verdict, et la couleur la plus proche qui passe.

Hexadécimal (#13243a), rgb(), hsl() ou nom CSS (navy).

Ratio de contraste

–

Le renard brun rapide

Voici un paragraphe de texte courant, à la taille habituelle d'un article. Est-il agréable à lire longtemps ? Un lien dans le texte.

Petit texte : mentions, légendes, notes de bas de page.

Bouton

Les seuils

4,5 : 1

AA, texte courant

Le minimum exigé par les normes d'accessibilité (WCAG 2) et par la plupart des organismes publics.

Vaut pour le texte de moins de 24 px (ou 18,66 px en gras).

3 : 1

Grand texte et commandes

Les titres de 24 px et plus, et le contour des boutons, des champs et des icônes.

C'est aussi le minimum pour les graphiques.

7 : 1

AAA

Le niveau renforcé : très confortable pour tout le monde, y compris les personnes malvoyantes.

À viser pour les longs textes.

Comment le ratio est calculé

Chaque couleur reçoit une luminance relative, de 0 (noir) à 1 (blanc), qui tient compte de la façon dont l'œil perçoit le rouge, le vert et le bleu. Le ratio vaut (plus claire + 0,05) ÷ (plus foncée + 0,05) : de 1:1 (même couleur) à 21:1 (noir sur blanc). La suggestion garde la teinte et la saturation de votre couleur et ne change que sa luminosité.