FR

Vérificateur de contraste des couleurs

Vérifiez que la couleur de votre texte est lisible sur son fond. Saisissez les deux couleurs et voyez le rapport de contraste WCAG, les résultats réussi ou échoué et un aperçu en direct.

Gratuit et privé. Tout se passe dans votre navigateur, rien n'est envoyé.

Comment ça marche

  1. Saisissez la couleurTapez ou collez la valeur dans le champ.
  2. Copiez le résultatLa valeur convertie se trouve en haut de la liste.
  3. Allez plus loinLes autres formats, le contraste et les nuances sont juste en dessous.

Lisible par tous

Environ un homme sur douze a un trouble de la vision des couleurs, et bien plus de gens lisent leur écran en plein soleil ou avec une vue qui baisse avec l'âge. Les règles pour l'accessibilité des contenus web (WCAG) fixent donc des rapports de contraste minimum : 4,5:1 pour le texte normal et 3:1 pour le grand texte et les éléments d'interface au niveau AA, 7:1 et 4,5:1 au niveau AAA.

Le rapport est calculé à partir de la luminance relative des deux couleurs, exactement comme le définit WCAG 2. Utilisez Inverser pour tester un texte clair sur fond foncé et inversement, puis choisissez une nuance plus foncée ou plus claire dans la palette jusqu'à ce que le résultat passe.

Couleurs transparentes

Si la couleur du texte est transparente, elle est d'abord mélangée au fond : le rapport correspond à ce que les utilisateurs voient réellement.

Questions fréquentes

Qu'est-ce qui compte comme grand texte ?

Au moins 24 px en normal ou environ 19 px en gras. Le grand texte demande un rapport de 3:1 pour le niveau AA.

Quels formats de couleur puis-je saisir ?

Tout ce qui est valide en CSS : HEX à 3, 4, 6 ou 8 chiffres, rgb(), hsl(), hwb(), lab(), oklch() et les noms de couleurs.

La valeur CMJN est-elle exacte pour l'impression ?

C'est une conversion simple, sans profil d'impression. Pour une impression professionnelle, utilisez les valeurs CMJN issues du profil de votre imprimeur.

Quel rapport de contraste faut-il viser ?

Le niveau WCAG AA demande 4,5:1 pour le texte normal et 3:1 pour le grand texte et les éléments d'interface.

Pourquoi l'OKLCH est-il important ?

Il correspond à la façon dont nous percevons la luminosité : les palettes et les dégradés créés en OKLCH paraissent réguliers.