Vérificateur de contraste des couleurs

Qu'est-ce que Vérificateur de contraste des couleurs ?

Le Vérificateur de contraste des couleurs est un outil en ligne gratuit de contraste WCAG et APCA pour les designers, les développeurs et les testeurs d'accessibilité. Il accepte les couleurs en HEX (#rgb, #rrggbb et #rrggbbaa à 8 chiffres avec alpha), rgb()/rgba() et hsl()/hsla(), compose un premier plan translucide sur le fond avant de mesurer et indique à la fois le rapport WCAG 2.1 (1:1 à 21:1) et le score de contraste de luminosité APCA Lc. Il signale le niveau AA de WCAG 2.1 (4.5:1 normal, 3:1 grand) et AAA (7:1 normal, 4.5:1 grand), ajoute un badge 3:1 pour les composants d'interface et graphiques non textuels, et peut suggérer le premier plan conforme le plus proche — en n'ajustant que sa luminosité jusqu'à atteindre AA ou AAA — que vous appliquez en un clic.

Comment utiliser Vérificateur de contraste des couleurs

1. Saisissez la couleur de premier plan (texte) en HEX, rgb() ou hsl() — le HEX à 8 chiffres ou rgba avec alpha est accepté — ou cliquez sur le sélecteur de couleur.
2. Saisissez la couleur de fond de la même façon ; un premier plan semi-transparent est composé dessus (et le fond sur du blanc) avant de mesurer le contraste.
3. Utilisez le bouton Échanger pour inverser le premier plan et le fond à tout moment.
4. Lisez le rapport de contraste WCAG 2.1 et le score APCA Lc affiché juste à côté.
5. Vérifiez les badges AA et AAA pour le texte normal et grand, ainsi que le badge 3:1 pour les composants d'interface et les graphiques.
6. Si une paire échoue, regardez la couleur AA ou AAA conforme la plus proche et cliquez sur Appliquer pour mettre à jour le premier plan.

Exemples

Premier plan #595959, Fond #ffffff

Rapport 7.00:1 avec un APCA Lc élevé — satisfait AA et AAA pour le texte normal et grand

Premier plan #00000080 (noir à 50 %) sur #ffffff

Composé d'abord en un gris opaque, puis le rapport WCAG et l'APCA Lc sont calculés

Premier plan #999999 sur #ffffff — 2.85:1, échoue à AA

Ouvrez la couleur AA la plus proche et cliquez sur Appliquer pour atteindre 4.5:1 en gardant la même teinte

Questions fréquentes

Quels rapports de contraste WCAG exige-t-il ?

Le niveau AA de WCAG 2.1 nécessite au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte ; le niveau AAA nécessite 7:1 et 4.5:1. Les composants d'interface et objets graphiques non textuels (SC 1.4.11) nécessitent 3:1. Ce vérificateur affiche un badge réussite/échec pour chacun de ces seuils.

Qu'est-ce que le score APCA Lc ?

L'APCA (Accessible Perceptual Contrast Algorithm) est la méthode de contraste proposée pour WCAG 3. Il donne une valeur de contraste de luminosité (Lc) d'environ 0 à 108, où plus haut signifie plus de contraste, et tient compte de la polarité (sombre sur clair contre clair sur sombre). Il s'affiche à côté du rapport WCAG 2.1 et utilise ses propres niveaux de recommandation plutôt qu'un unique réussite/échec.

Comment fonctionne la suggestion de couleur conforme la plus proche ?

Elle conserve la teinte et la saturation du premier plan et n'ajuste que sa luminosité, plus claire ou plus sombre, jusqu'à ce que le contraste avec le fond atteigne AA (4.5:1) ou AAA (7:1) ; vous pouvez ensuite l'appliquer en un clic. Si le fond est de ton moyen et que la cible est inatteignable, elle affiche la couleur possible la plus proche.

Quels formats de couleur puis-je saisir ?

HEX (#rgb, #rrggbb, plus #rgba et #rrggbbaa à 8 chiffres avec alpha), rgb()/rgba() et hsl()/hsla(), avec un sélecteur de couleur natif pour chaque champ. Un premier plan semi-transparent est composé sur le fond — lui-même aplati sur du blanc — avant le calcul du rapport. Les couleurs nommées ne sont pas prises en charge.

Mes couleurs sont-elles envoyées à un serveur ?

Non. Toute l'analyse, la composition et les calculs de luminance, de rapport et d'APCA s'exécutent entièrement dans votre navigateur avec JavaScript — aucune couleur n'est envoyée et rien n'est transmis à un serveur, il fonctionne donc en toute confidentialité et même hors ligne une fois la page chargée.