Vérificateur de contraste
Vérifiez le rapport WCAG 2.1 et l'APCA Lc moderne (brouillon WCAG 3) pour une paire premier plan/arrière-plan, ou passez en mode palette pour une matrice de contraste complète entre chaque couleur de votre palette. Simulez quatre types de daltonisme, appliquez des suggestions automatiques et exportez la palette en variables CSS ou en JSON.
Colors are processed entirely in your browser. Nothing is sent to a server.
Comment utiliser ce vérificateur de contraste
- Vérification de paire : choisissez le premier plan (texte) et l'arrière-plan, et lisez le rapport WCAG + l'APCA Lc avec les badges Réussi/Échoué.
- Mode palette : ajoutez des couleurs (ou chargez un préréglage) pour obtenir la matrice de contraste complète entre chaque paire.
- Activez la simulation de vision (protanopie, deutéranopie, tritanopie, achromatopsie) pour tester le daltonisme.
- Si une vérification échoue, cliquez sur une suggestion automatique pour appliquer la couleur réussie la plus proche.
- Exportez la palette en variables CSS ou en JSON, ou envoyez la paire actuelle vers la matrice.
Questions fréquentes
Qu'est-ce que l'APCA et en quoi diffère-t-il du WCAG 2.1 ?
L'APCA (Advanced Perceptual Contrast Algorithm) est un modèle de contraste perceptuellement uniforme proposé pour WCAG 3. Il modélise mieux la lisibilité que l'ancien rapport 4,5:1 — Lc 75 est le minimum pour le texte courant, Lc 90+ est optimal.
Quels niveaux WCAG 2.1 sont testés ?
AA exige 4,5:1 pour le texte normal, 3:1 pour le grand texte (≥18 pt ou 14 pt gras) et les composants d'interface. AAA relève le texte normal à 7:1 et le grand texte à 4,5:1.
Comment fonctionne la matrice de palette ?
Chaque couleur est testée contre chaque autre en tant que texte et arrière-plan. Le nombre est le rapport WCAG ; le badge indique AA/AAA/grand/échec. Survolez pour voir la valeur APCA Lc.
Comment fonctionne la correction automatique ?
Elle éclaircit ou assombrit le texte de façon linéaire jusqu'à ce que le rapport atteigne la cible — en choisissant le plus petit changement. Vous pouvez aussi ajuster l'arrière-plan.