Vérificateur de Contraste de Couleur
Entrez une couleur de premier plan et d'arrière-plan pour vérifier le ratio de contraste WCAG avec des badges AA et AAA pour texte normal et grand.
21.00:1
AA
Texte normal
AA
Texte grand
AAA
Texte normal
AAA
Texte grand
Aperçu
Portez ce vieux whisky au juge blond qui fume.
Portez ce vieux whisky au juge blond qui fume.
Comment ça marche
Cet outil calcule le rapport de contraste entre deux couleurs selon les directives WCAG 2.1, et indique si votre combinaison de couleurs est accessible.
Comment l’utiliser :
- Entrez la couleur du texte et la couleur d’arrière-plan en hexadécimal, RGB ou en utilisant le sélecteur de couleurs.
- L’outil affiche instantanément le rapport de contraste.
- Vérifiez si le résultat respecte les niveaux AA (4,5:1 pour le texte normal) ou AAA (7:1).
Exemple : Texte noir (#000000) sur fond blanc (#FFFFFF) → rapport de contraste 21:1 (AAA).
Limites : L’outil évalue uniquement le contraste texte/fond. Il ne couvre pas tous les critères d’accessibilité WCAG.
Confidentialité : Aucune donnée n’est transmise — tout est calculé localement.
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
Questions fréquentes
- Qu'est-ce que le rapport de contraste WCAG ?
- C'est un ratio calculé selon la luminance relative des deux couleurs, allant de 1:1 (aucun contraste) à 21:1 (contraste maximal).
- Quelle est la valeur minimale pour l'accessibilité ?
- 4,5:1 pour le texte normal (niveau AA) et 3:1 pour le texte large.
- Que signifie le niveau AAA ?
- Un rapport de 7:1, recommandé pour une accessibilité maximale.
- Puis-je tester plusieurs combinaisons ?
- Oui, modifiez les couleurs et le résultat se met à jour en temps réel.
- L'outil prend-il en charge le format HSL ?
- L'entrée accepte les formats hexadécimal et RGB.