Vérificateur de Contraste de Couleurs
Vérifiez les ratios de contraste des couleurs selon les directives d'accessibilité WCAG 2.1. Teste la conformité AA et AAA pour le texte normal et grand.
Paramètres
Couleur du texte ou de l'élément.
Couleur d'arrière-plan à tester.
Résultats
Le rapport de contraste entre les deux couleurs
Autres résultats (6)
Le texte normal (moins de 18 pt ou 14 pt en gras) répond aux exigences WCAG AA
Le texte de grande taille (18 pt+ ou 14 pt+ gras) répond aux exigences WCAG AA
Le texte normal répond aux exigences plus strictes des WCAG AAA
Les textes volumineux répondent aux exigences plus strictes des WCAG AAA
Relative luminance of #000000
Relative luminance of #FFFFFF
Pourquoi choisir Vérificateur de Contraste de Couleurs
Le Color Contrast Checker teste le rapport de contraste entre une couleur de premier plan et une couleur d’arrière-plan par rapport aux directives WCAG 2.1. Vérifiez instantanément si votre combinaison de couleurs est conforme aux normes AA et AAA pour les textes normaux et de grande taille.
- ✓Calcule le rapport de contraste à l'aide de la formule de luminance relative WCAG 2.1
- ✓Teste les quatre niveaux de conformité WCAG : AA/AAA pour les textes normaux et de grande taille
- ✓Affiche les valeurs de luminance relatives pour les deux couleurs
- ✓Utilise les entrées du sélecteur de couleurs pour une sélection facile des couleurs
Comment utiliser
- 1Choisissez votre couleur de premier plan (texte) à l'aide du sélecteur de couleurs
- 2Choisissez votre couleur de fond à l'aide du sélecteur de couleurs
- 3Visualisez immédiatement le rapport de contraste affiché
- 4Vérifiez les résultats de réussite/échec des WCAG AA et AAA pour les textes normaux et volumineux.
- 5Ajustez les couleurs jusqu'à ce que votre combinaison dépasse le niveau requis
Questions fréquentes (FAQ)
Qu'est-ce qu'un bon rapport de contraste pour l'accessibilité du Web ?
WCAG 2.1 nécessite un rapport de contraste minimum de 4,5 : 1 pour le texte normal (niveau AA) et de 3 : 1 pour le texte de grande taille. Pour la conformité AAA, le texte normal a besoin de 7:1 et le texte volumineux a besoin de 4,5:1. Le noir sur blanc (21:1) représente le contraste maximum possible.
Qu'est-ce qui est considéré comme un « texte volumineux » dans les WCAG ?
WCAG définit le texte volumineux comme étant en gras d'au moins 18 pts (24 px) ou 14 pts (18,66 px). Les textes volumineux nécessitent moins de contraste, car ils sont plus faciles à lire avec des taux de contraste inférieurs.
Comment est calculé le rapport de contraste ?
The contrast ratio uses relative luminance values: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker. Luminance is calculated using the WCAG formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, with each channel linearized from sRGB.
Cet outil vérifie-t-il l'accessibilité des daltoniens ?
Cet outil vérifie le contraste basé sur la luminance, ce qui profite à tous les utilisateurs, y compris ceux souffrant de déficiences de vision des couleurs. Cependant, il ne simule pas des types spécifiques de daltonisme. Pour les tests de daltonisme, utilisez un simulateur de daltonisme dédié.
Quel est le rapport de contraste minimum requis par la loi ?
De nombreuses réglementations en matière d'accessibilité (ADA, section 508, EN 301 549) font référence au WCAG 2.1 niveau AA comme norme, qui exige 4,5 : 1 pour le texte normal. Les sites Web gouvernementaux et éducatifs de nombreux pays sont légalement tenus de respecter ce niveau.
Références & sources autorisées
WCAG 2.1 Understanding Contrast (Minimum)
Voir la sourceRelative Luminance - WCAG Definition
Voir la sourceWebAIM Contrast Checker
Voir la sourceOutils associés
Découvrez d'autres outils pratiques pour ce domaine d'application.
