Vérificateur de contraste des couleurs (WCAG)

WCAG 2.1 AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte (18pt ou 14pt en gras). AAA exige 7:1 et 4.5:1. Les composants d'interface nécessitent >= 3:1.

Le sRGB est corrigé en gamma vers le linéaire, puis la luminance relative = 0.2126R + 0.7152G + 0.0722B. Ratio = (L1 + 0.05) / (L2 + 0.05), où L1 est la plus claire.

Accessible Perceptual Contrast Algorithm (pour WCAG 3) : il prend en compte la graisse du texte, la polarité et la fréquence spatiale. Affiché à titre de référence ; les ratios WCAG 2 restent aujourd'hui la norme de référence.

Oui, le Color Contrast Checker (WCAG) est 100% gratuit, sans inscription, sans frais cachés et sans limite d'utilisation. Tout le traitement s'effectue localement dans votre navigateur, garantissant une confidentialité totale.

Absolument. Le Color Contrast Checker (WCAG) traite tout côté client, dans votre navigateur. Aucune donnée n'est envoyée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.

Oui, le Color Contrast Checker (WCAG) est entièrement responsive et fonctionne sur smartphones et tablettes. Vous pouvez l'utiliser sur n'importe quel appareil doté d'un navigateur web moderne, sans aucun téléchargement d'application.

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le Color Contrast Checker (WCAG) dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni barrière d'inscription ni restriction d'utilisation.

Le Color Contrast Checker (WCAG) prend en charge un large éventail de formats et de langages populaires. Consultez l'interface de l'outil pour la liste complète des options prises en charge.

Saisissez simplement votre entrée dans le champ prévu, ajustez les paramètres selon vos préférences, et l'outil la traitera instantanément. Vous pouvez ensuite copier le résultat dans le presse-papiers ou le télécharger.

Le Color Contrast Checker (WCAG) fonctionne sur tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

Selon les WCAG 2.1, un texte large correspond à tout texte de 18pt et plus, ou de 14pt et plus s'il est en gras. Comme les outils de design travaillent en pixels, cela correspond à environ 24px en régulier ou environ 18,66px (souvent arrondi à 18,5px ou 19px) en gras. Le texte large n'a besoin que d'un ratio de contraste de 3:1 pour le niveau AA et de 4,5:1 pour le niveau AAA, tandis que le texte courant nécessite les seuils plus stricts de 4,5:1 et 7:1. La logique est simple : des lettres plus grandes et plus épaisses ont des traits plus larges, donc elles restent lisibles avec un contraste plus faible. Cette distinction compte parce qu'une couleur de titre qui réussit à 24px peut échouer complètement sur un texte de 16px. Ce vérificateur affiche le ratio par rapport à tous les seuils en même temps, afin que vous voyiez si votre paire franchit la barre du texte normal ou ne qualifie que pour le texte large.

Tout dépend du seuil WCAG applicable à chaque taille de police. Un titre affiché à 24px ou plus (ou 18,66px en gras) est considéré comme du texte large et n'a besoin que d'un ratio de 3:1, alors qu'un texte courant en dessous de cette taille doit atteindre 4,5:1. Ainsi, un premier plan et un arrière-plan qui produisent, par exemple, un ratio de 3,5:1 obtiendront un badge Réussite pour le titre mais un échec net pour le paragraphe utilisant exactement les mêmes couleurs. Le ratio lui-même ne change jamais selon la taille de police, seule la barre à franchir change. C'est pourquoi une palette de couleurs peut sembler validée dans votre section hero mais échouer discrètement dans les légendes et les libellés. Cet outil affiche des exemples en 16px et en 24px dans l'onglet Preview et liste chaque seuil, pour que vous voyiez immédiatement où une paire tient et où elle flanche.

En général, il suffit d'ajuster la luminosité d'une seule couleur plutôt que de reconstruire toute la palette. Le moyen le plus rapide est d'assombrir le texte ou d'éclaircir l'arrière-plan (ou l'inverse) par petits paliers jusqu'à ce que le ratio franchisse 4,5:1, en conservant la teinte d'origine pour préserver l'identité de marque. Ce vérificateur propose des boutons dédiés Assombrir et Éclaircir qui modifient la luminosité d'une couleur par incréments tout en préservant sa teinte, et le ratio se met à jour en direct pour que vous puissiez vous arrêter dès qu'un badge Réussite apparaît. Un bouton Swap inverse le premier plan et l'arrière-plan pour tester la combinaison opposée, qui réussit parfois là où l'originale échoue. Si vous préférez repartir de zéro, le bouton Random accessible pair génère une combinaison qui dépasse déjà 4,5:1, vous offrant une base conforme à partir de laquelle ajuster.

Oui. Vous pouvez taper une valeur HEX à 3 ou 6 chiffres, régler chaque canal RGB de 0 à 255, ajuster la teinte, la saturation et la luminosité en HSL, ou utiliser le sélecteur de couleur natif : les quatre représentations se mettent à jour ensemble automatiquement. Modifier une seule valeur recalcule instantanément les autres, si bien qu'un ajustement d'un canal RGB se répercute immédiatement dans les champs HEX et HSL, ainsi que dans le ratio de contraste affiché en direct. C'est important car les maquettes et le code arrivent dans des formats mélangés : une charte graphique peut lister du HEX, un fichier CSS peut utiliser rgb(), et un outil de design peut exposer des curseurs HSL. Les garder synchronisés évite les conversions manuelles et les erreurs de copier-coller. Une fois qu'une paire fonctionne, le bouton Copy as CSS vars vous fournit un bloc :root prêt à coller, avec les propriétés personnalisées de premier plan et d'arrière-plan pour votre feuille de style.

Non, ils suivent un seuil distinct, plus bas. Le critère de succès WCAG 2.1 1.4.11, « Contraste des éléments non textuels », n'exige qu'un contraste de 3:1 pour les composants d'interface utilisateur et les graphiques porteurs de sens, y compris les bordures de champs, les icônes, les états de bascule et les indicateurs de focus, mesuré par rapport aux couleurs adjacentes. C'est le même seuil que pour le texte large, et non le 4,5:1 requis pour le texte normal. L'idée est qu'un contour de bouton ou une icône n'a pas besoin d'être aussi net qu'un paragraphe pour rester perceptible, mais doit tout de même être distinguable. Une erreur fréquente est une bordure de champ gris pâle qui disparaît sur un formulaire blanc. Ce vérificateur liste le seuil « composants d'interface et graphiques » aux côtés des niveaux de texte, et affiche un bouton ainsi qu'une carte avec bordure dans l'onglet Preview, pour que vous puissiez confirmer que les éléments interactifs sont visibles, et pas seulement les mots.