Vérificateur de contraste

Un vérificateur de contraste compare deux couleurs, une de premier plan et une d’arrière-plan, et indique si un texte écrit avec elles reste lisible. Il calcule le rapport de contraste WCAG et le compare aux quatre seuils standards : AA pour le texte normal, AA pour le texte grand, AAA pour le texte normal et AAA pour le texte grand. Choisissez les couleurs avec les sélecteurs ou saisissez directement les codes HEX, et regardez l’aperçu se mettre à jour aussitôt.

Comment le rapport est-il calculé ?

L’outil suit exactement la formule WCAG 2. Les canaux sRGB de chaque couleur sont linéarisés (pour annuler la courbe gamma appliquée par les écrans), puis combinés en une luminance relative selon les pondérations standards de 21,26 % pour le rouge, 71,52 % pour le vert et 7,22 % pour le bleu, qui reflètent la sensibilité de l’œil humain à chaque canal. La plus claire des deux luminances est ensuite comparée à la plus sombre, avec une petite constante ajoutée aux deux pour tenir compte de la lumière ambiante, ce qui donne un rapport compris entre 1:1 (couleurs identiques) et 21:1 (noir pur sur blanc). Ce rapport est comparé à quatre seuils : 4,5:1 pour le AA en texte normal, 3:1 pour le AA en texte grand, 7:1 pour le AAA en texte normal et 4,5:1 pour le AAA en texte grand. Seuls les codes HEX à 3 et 6 chiffres sont acceptés ; le calcul n’a pas besoin de canal alpha ni d’autre notation puisqu’il compare toujours deux couleurs totalement opaques.

Mes données sont-elles envoyées quelque part ?

Non. Tout le calcul s’exécute dans votre navigateur avec quelques lignes de math, rien n’est envoyé à un serveur. Les couleurs testées ne quittent jamais votre machine, ce qui permet de vérifier des couleurs de marque issues d’un design system interne ou de la charte d’un client sans les envoyer nulle part.

Qu’est-ce qu’un texte grand selon les WCAG ?

Les WCAG définissent le texte grand comme du 18pt (24px) en graisse normale, ou du 14pt (18,66px) en gras et plus. Le seuil est plus souple pour ce texte car des traits plus grands et plus épais restent lisibles à un contraste plus faible. Utile pour confirmer qu’un texte de corps atteint le niveau AA avant de publier un design, vérifier si le libellé d’un bouton reste lisible sur son fond, ou auditer l’accessibilité de la palette de couleurs d’un site existant. Consultez le guide Understanding Contrast Minimum du W3C pour la formule exacte et le raisonnement derrière ces seuils, ou l’article de WebAIM sur le contraste pour une explication en langage simple.