Vérificateur de contraste – Contrast Checker

Ce Vérificateur de contraste audite le contraste des couleurs WCAG et APCA pour la conformité ADA — un test d'accessibilité des…

✅ Ce que vous obtiendrez avec ce vérificateur de contraste : - Ratio de contraste WCAG 2.2 et APCA Lc, - éléments avec des problèmes mis en évidence sur la page, - règles CSS qui ont produit les couleurs, tracées à travers des cartes sources (si disponibles), - outil de sélection de couleur intégré avec un analyseur de contraste et des alternatives suggérées, - aperçu en direct des corrections, - exportation des corrections vers CSS (avec des commentaires de localisation de source). 🔍 Conçu comme un vérificateur de contraste de couleur pour sites web qui prend en compte les états pseudo, le Shadow DOM, les iframes de même origine, et le texte sur des images et des dégradés — pas seulement des arrière-plans plats. ⚠️ Autorisation de débogage requise. La couverture de ce vérificateur de contraste n'est possible que par le biais du protocole Chrome DevTools, qui nécessite l'autorisation 'debugger'. Une fois attaché, Chrome affiche une barre d'information sur tous les onglets et ne la cache pas lors du détachement. ⚡ Flux de travail hautement optimisé : • Voir tous les éléments avec des problèmes d'accessibilité des couleurs mis en évidence d'un coup d'œil. • Prévisualiser les changements immédiatement, avec des ratios de contraste et des verdicts recalculés. • Appliquer du CSS personnalisé dans l'onglet Feuille de style ; les problèmes affectés sont marqués dans la liste. • Pour vérifier manuellement le contraste des couleurs, utilisez l'outil de sélection de couleur intégré : clic gauche pour définir le premier plan, clic droit pour l'arrière-plan, et le ratio se met à jour instantanément. • Utilisez l'onglet Exclusions pour masquer tout sauf les éléments que vous corrigez. 📐 Critères derrière les verdicts. Ce vérificateur de ratio de contraste teste l'accessibilité des couleurs par rapport aux exigences WCAG et APCA. L'APCA Lc est noté par rapport aux seuils Bridge-PCA, qui sont plus stricts que les ratios WCAG correspondants — donc un passage Bridge-PCA implique toujours un passage WCAG. 🔬 Qu'est-ce que l'APCA ? L'APCA (Accessible Perceptual Contrast Algorithm) est un modèle qui suit comment les gens lisent du texte sur un écran. Deux paires de couleurs avec le même ratio WCAG peuvent sembler visiblement différentes, et leur APCA Lc (contraste de luminance) le reflète : une paire peut passer le WCAG tout en étant difficile à lire. Ce vérificateur d'accessibilité des couleurs pour sites web calcule les deux chiffres. 🚧 Limitations : 1. Comme tout autre vérificateur d'accessibilité des sites web, celui-ci fournit des estimations de bonne foi, pas un certificat de conformité. 2. La couverture est uniquement textuelle ; la vérification des éléments non textuels (WCAG 1.4.11) est sur la feuille de route. 3. Les iframes de différentes origines ne sont pas explorées. 4. Les arrière-plans complexes et les animations sont échantillonnés à un nombre fini de points spatiaux et temporels ; le ratio du pire échantillon est rapporté mais peut encore être optimiste ; l'échantillonneur peut également être induit en erreur par des artefacts de rendu. 5. Les sites hautement dynamiques peuvent produire des problèmes fallacieux. 6. Ce vérificateur de contraste de couleur ne fait pas d'OCR sur les images automatiquement ; testez les images avec du texte significatif via l'outil de sélection de couleur inclus. 🔒 Confidentialité et autorisations. ▸ Fonctionne localement ; aucune donnée de page web ne quitte jamais votre machine. ▸ 'activeTab' uniquement : le script d'analyse est injecté lorsque vous cliquez sur l'icône de la barre d'outils. ▸ L'autorisation 'debugger' est requise pour explorer le Shadow DOM et les iframes, tracer les sources CSS et échantillonner des arrière-plans complexes. 🧮 Détails de précision. Le texte semi-transparent et l'opacité des ancêtres sont gérés correctement : le premier plan est composé sur son véritable arrière-plan avant que la luminance ne soit mesurée, de sorte que le ratio rapporté correspond à ce que les utilisateurs voient réellement. Les fonctions de couleur à large gamme — oklch, lab, lch, color(display-p3) — sont également prises en charge, limitées à sRGB lorsqu'elles sont hors gamme. 🎨 Texte sur des images et des dégradés. Contrairement à la plupart des outils similaires, celui-ci ne renonce pas aux arrière-plans non plats ni ne fait confiance à ce que 'getComputedStyle' / 'CSS.getBackgroundColors' rapportent. Il suit l'ordre de peinture du navigateur pour composer le véritable arrière-plan — opacité, modes de fusion, dégradés linéaires, filtre d'arrière-plan — et lorsque cela n'est pas suffisant, cet outil de contraste de couleur échantillonne les pixels rendus à l'emplacement du texte. ❓ Q&R 📌 Pourquoi la même paire de couleurs obtient-elle parfois des verdicts différents sous WCAG et APCA ? ↳ WCAG mesure la luminance ; APCA mesure le contraste perceptuel. Une paire qui passe 4.5:1 peut encore ne pas atteindre le seuil Lc de Bridge-PCA — un modèle plus strict. 📌 L'APCA remplace-t-il le WCAG ? ↳ Non — l'APCA n'est pas un remplacement, mais un avis secondaire utile. Ce vérificateur de contraste rapporte les deux. 📌 Puis-je scanner un fichier local ou mon serveur de développement avec ce vérificateur d'accessibilité ? ↳ Oui. Activez "Autoriser l'accès aux URL de fichiers" dans les paramètres de l'extension. Ouvrez l'URL file:// ou localhost et cliquez sur l'icône de la barre d'outils. Seules les URL chrome://, le Chrome Web Store et d'autres schémas restreints sont ignorés. 📌 Cet outil certifie-t-il la conformité ADA ? ↳ Non. Il vérifie uniquement le contraste des couleurs — un aspect de l'accessibilité. La conformité ADA est une détermination légale couvrant de nombreuses normes et critères (sémantique, accès au clavier, texte alternatif, sous-titres, et plus) et doit être évaluée par un professionnel qualifié.