Vérificateur de contraste des couleurs
Vérifiez les combinaisons de couleurs de premier plan/ fond pour la conformité aux normes d'accessibilité WCAG 2.1 AA et AAA.
Texte normal
Texte de grande taille (18 pt / 14 pt gras)
The quick brown fox jumps over the lazy dog.
Rapport de contraste
17.40:1
Pourquoi utiliser le vérificateur de contraste PixConvert ?
Vérification de la conformité WCAG avec un seul outil : choisissez les couleurs, visualisez les résultats instantanément.
Conformité aux WCAG 2.1
Vérifie tous les critères de succès pertinents des WCAG 2.1 : AA normal, AA large, AAA normal, AAA large et composants d’interface utilisateur.
Aperçu en direct
Visualisez le texte rendu sur la couleur de fond réelle en tailles normale, grande et pour les composants d'interface utilisateur.
Sélecteur de couleurs
Sélecteur de couleurs natif du navigateur avec saisie hexadécimale pour une sélection précise des couleurs.
Rapport exact
Affiche le rapport de contraste exact à 2 décimales près (ex 4,53:1) à des fins de documentation.
Inverser les couleurs
Inversez le premier plan et fond en un seul clic pour vérifier instantanément les deux combinaisons.
100% privé
Calcul pur des conditions WCAG directement dans votre navigateur. Aucun serveur, aucun suivi.
Quand vérifier le contraste des couleurs
L'accessibilité est une obligation légale dans de nombreuses juridictions. Renseignez-vous au plus tôt.
Revue de conception
Vérifiez que les choix de couleurs dans les maquettes Figma respectent les exigences WCAG avant de les transmettre à l'équipe d'ingénierie.
- Vérifier les couleurs principales des boutons
- Vérifier le texte sur les fonds de marque
- Test de lisibilité du texte de substitution
Audit d'accessibilité
Auditer l'interface utilisateur existante pour vérifier sa conformité aux normes WCAG 2.1 AA dans le cadre d'un examen juridique ou de qualité.
- Identifier les paires de couleurs défaillantes
- Rapports de contraste des documents
- Prioriser les correctifs par niveau de gravité
Système de conception
Avant publication, vérifiez l'accessibilité de chaque jeton de votre palette de couleurs.
- Valider les paires de jetons de couleur
- Créer des variantes de thème accessibles
- Combinaisons conformes aux documents
Comment vérifier le contraste des couleurs
Choisissez la couleur de votre texte (premier plan) et la couleur fond à l'aide des sélecteurs de couleurs ou des entrées hexadécimales.
Le rapport de contraste et les résultats de conformité/échec aux WCAG sont mis à jour instantanément. Utilisez l'option « Échanger » pour vérifier la combinaison inverse.
Examinez les résultats pour les niveaux de conformité AA et AAA — tous les calculs suivent la formule officielle WCAG 2.1 et s'exécutent entièrement dans votre navigateur.
Explorer plus d'outils
Découvrez d'autres outils gratuits qui fonctionnent parfaitement en complément de celui-ci.
Générateur de gradient CSS
Créez visuellement des dégradés CSS personnalisés
Générateur d'ombres de boîte
Concevoir des ombres portées CSS avec aperçu en direct
Convertisseur de couleurs
Convertissez instantanément les codes de couleur HEX, RGB et HSL
Extracteur de palette de couleurs
Extraire les couleurs dominantes de n'importe quelle image
Formateur JSON
Formatez, validez et minifiez instantanément le JSON
Testeur d'expressions régulières
Tester et déboguer en direct les expressions régulières
Foire aux questions
Explication du contraste des couleurs et de l'accessibilité.
Quelle est l'exigence de rapport de contraste des WCAG ?
Le niveau AA des WCAG 2.1 exige un rapport de 4,5:1 pour le texte normal, de 3:1 pour le texte de grande taille (18 pt et plus ou 14 pt et plus en gras) et de 3:1 pour les composants d'interface utilisateur et les objets graphiques. Le niveau AAA exige un rapport de 7:1 pour le texte normal et de 4,5:1 pour le texte de grande taille.
Comment calcule-t-on le rapport de contraste ?
Rapport de contraste = (L1 + 0,05) / (L2 + 0,05), où L1 représente la luminance relative de la couleur la plus claire et L2 celle de la couleur la plus foncée. La luminance est calculée à partir des valeurs sRGB linéarisées selon la formule WCAG 2.1.
Qu’est-ce qui est considéré comme un « texte de grande taille » ?
Les WCAG définissent un texte de grande taille comme étant de 18 points (24 px) ou plus, OU de 14 points (environ 18,67 px) ou plus en gras. Le texte de grande taille bénéficie d'une exigence de contraste moins stricte (3:1 au lieu de 4,5:1) car il est intrinsèquement plus lisible.
Dois-je rencontrer l'AAA ?
Le niveau AA des WCAG est la norme légale dans la plupart des juridictions (ADA aux États-Unis, EN 301 549 dans l'UE). Le niveau AAA est l'objectif supérieur : visez le niveau AA au minimum et le niveau AAA lorsque cela est possible pour les contenus critiques.
Cela fonctionne-t-il pour les images et les dégradés ?
Cet outil vérifie les paires de couleurs unies. Pour le texte superposé à des images ou des dégradés, vous devez évaluer la couleur fond -plan la plus défavorable (le point le plus clair derrière le texte pour un texte foncé, le point le plus foncé pour un texte clair). Les WCAG n'exigent pas que les arrière-plans d'images respectent les critères de contraste ; il s'agit d'une bonne pratique.