Vérificateur du rapport de contraste WCAG Vérifiez les rapports de contraste WCAG entre les couleurs de premier plan et d'arrière-plan.
Vérificateur de rapport de contraste
Vérifiez les rapports de contraste WCAG entre les couleurs de premier plan et d'arrière-plan.
Définir les couleurs
Entrez les couleurs du texte et de l'arrière-plan.
Vérifier la conformité
Voyez le rapport de contraste et les résultats de passage/échec WCAG AA/AAA.
Ajuster et échanger
Modifiez les couleurs jusqu'à ce que vous atteigniez votre niveau de conformité cible.
What Is Vérificateur de rapport de contraste?
Un vérificateur de ratio de contraste WCAG évalue l'accessibilité des combinaisons de couleurs en calculant le ratio de contraste entre les couleurs de premier plan (texte) et d'arrière-plan selon les Directives d'accessibilité du contenu Web (WCAG) 2.1. L'outil calcule le ratio de contraste basé sur la luminance et le teste contre quatre seuils WCAG : AA pour le texte normal (≥4,5:1), AA pour le texte grand (≥3,0:1), AAA pour le texte normal (≥7,0:1) et AAA pour le texte grand (≥4,5:1). Le respect de ces seuils garantit que le texte est lisible pour les utilisateurs ayant différents niveaux de déficience visuelle, y compris la basse vision et la cécité des couleurs. L'outil fournit une prévisualisation du texte en direct montrant à quoi ressemble votre combinaison de couleurs à différentes tailles, ainsi que des indicateurs clairs de passage ou d'échec pour chaque niveau WCAG. C'est un outil essentiel pour tout développeur Web ou concepteur déterminé à créer des expériences numériques accessibles et inclusives.
Why Use Vérificateur de rapport de contraste?
-
Vérification instantanée de la conformité WCAG AA et AAA
-
Prévisualisation visuelle du texte à plusieurs tailles pour une lisibilité réelle
-
Indicateurs clairs de passage/échec avec des seuils de rapport requis
-
Bouton d'échange pour tester rapidement les combinaisons de couleurs inversées
-
Tests de quatre niveaux de conformité : AA/AAA pour le texte normal et large
Common Use Cases
Accessibilité Web
Vérifiez que les combinaisons de texte et d'arrière-plan répondent aux exigences WCAG 2.1 pour la conformité ADA et AODA.
Audit du système de design
Testez toutes les combinaisons de couleurs dans un système de design pour la conformité à l'accessibilité.
Évaluation des couleurs de marque
Vérifiez si les couleurs de marque peuvent être utilisées pour des combinaisons de texte et d'arrière-plan qui répondent aux normes d'accessibilité.
Conformité légale
Assurez-vous que le contenu numérique répond aux lois sur l'accessibilité qui référencent les critères WCAG.
Technical Guide
Le ratio de contraste est calculé en utilisant la formule de luminance relative WCAG 2.1. Tout d'abord, chaque canal de couleur est linéarisé : si sRGB ≤ 0,03928, linéaire = sRGB/12,92 ; sinon linéaire = ((sRGB + 0,055)/1,055)^2,4. La luminance relative L = 0,2126×R + 0,7152×G + 0,0722×B. Le ratio de contraste = (L_plus_clair + 0,05) / (L_plus_sombre + 0,05). Le ratio varie de 1:1 (pas de contraste, même couleur) à 21:1 (noir sur blanc). Les WCAG 2.1 définissent quatre seuils : le niveau AA nécessite ≥4,5:1 pour le texte normal (<18pt ou <14pt gras) et ≥3:1 pour le texte grand (≥18pt ou ≥14pt gras). Le niveau AAA nécessite ≥7:1 pour le texte normal et ≥4,5:1 pour le texte grand. Ces seuils sont basés sur des recherches sur l'acuité visuelle et garantissent la lisibilité pour les utilisateurs ayant une vision de 20/40 ou une déficience visuelle modérée.
Tips & Best Practices
-
1Viser un rapport de contraste d'au moins 4,5:1 pour le texte du corps - c'est le minimum pour la conformité WCAG AA
-
2Le texte large (18px+ ou 14px+ en gras) a une exigence inférieure de 3:1 pour l'AA
-
3La conformité AAA (7:1) garantit la lisibilité pour les utilisateurs ayant des déficiences visuelles plus graves
-
4Utilisez le bouton d'échange pour tester si vos couleurs fonctionnent bien dans les deux orientations
-
5Les conceptions de mode sombre nécessitent les mêmes rapports de contraste - testez les deux modes
Related Tools
Convertisseur HEX vers RGB
Convertissez les codes de couleur HEX en valeurs RVB instantanément avec un aperçu de couleur interactif.
🎨 Color Tools
Sélecteur de couleurs
Sélecteur de couleurs interactif avec sorties HEX, RGB, HSL et CMYK.
🎨 Color Tools
Générateur de nuances de couleur
Générer des nuances plus foncées de n'importe quelle couleur avec un nombre d'étapes ajustable.
🎨 Color Tools
Générateur de palettes de couleurs accessibles
Générer des palettes de couleurs qui répondent aux exigences de contraste du WCAG.
🎨 Color Tools
Simulateur de daltonisme
Simulez l'apparence des couleurs pour les personnes atteintes de différents types de déficience visuelle des couleurs.
🎨 Color ToolsFrequently Asked Questions
Q Qu'est-ce que le rapport de contraste WCAG ?
Q Quelle est la différence entre AA et AAA ?
Q Qu'est-ce qui compte comme du texte large ?
Q La couleur seule détermine-t-elle l'accessibilité ?
About This Tool
Vérificateur de rapport de contraste is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.