Vérificateur de Contraste de Couleur

Comment ça marche

Choisissez une couleur de premier plan et d'arrière-plan via les sélecteurs ou en saisissant directement les valeurs hex. L'outil calcule la luminance relative de chaque couleur selon la formule WCAG 2.1 — une somme pondérée des canaux sRGB après décodage gamma — et divise la luminance la plus claire par la plus sombre (plus 0,05 au numérateur et au dénominateur pour éviter la division par zéro avec le noir pur). Le ratio de contraste résultant va de 1:1 (couleurs identiques) à 21:1 (noir pur sur blanc pur). Quatre badges WCAG indiquent réussite ou échec : AA pour texte normal (≥ 4,5:1), AA pour texte large (≥ 3:1), AAA pour texte normal (≥ 7:1) et AAA pour texte large (≥ 4,5:1). Un panneau d'aperçu en direct montre des phrases d'exemple en texte normal et large pour une vérification visuelle. Le calcul est entièrement réalisé dans votre navigateur sans appel serveur, et chaque changement met à jour instantanément le ratio et l'aperçu.

Cas d'utilisation

• Vérifier une palette de couleurs de marque pour la conformité à l'accessibilité avant la refonte d'un site
• Choisir des couleurs de boutons et liens qui restent lisibles sur un thème clair ou sombre
• Respecter les exigences WCAG 2.1 AA ou AAA pour la conformité Section 508, EN 301 549 ou ADA
• Examiner une maquette envoyée par un designer pour signaler un texte illisible avant le développement
• Enseigner les concepts d'accessibilité en montrant comment de petites différences de luminance provoquent de gros échecs de contraste