Conseils concernant les outils de développement: identifier et corriger le texte à faible contraste

Sofia Emelianova
Sofia Emelianova

Le texte à faible contraste est le principal problème d'accessibilité sur le Web. En février 2022, 83,9% des millions de premières pages d'accueil concernées par ce problème. Pour en savoir plus, consultez le rapport WebAIM Million 2022.

Les outils pour les développeurs Chrome vous permettent de découvrir tous les problèmes de contraste en un coup d'œil et de les résoudre en un clic.

Regardez la vidéo pour découvrir comment:

  • Affichez les rapports de contraste dans l'info-bulle du mode inspecteur et les valeurs de rapport recommandées dans le sélecteur de couleur.

    Les rapports de contraste sont disponibles dans une info-bulle, avec un sélecteur de couleur pour mesurer le rapport des couleurs alternatives. Les classifications AA et AAA sont disponibles pour la ration.

  • Dans le sélecteur de couleur, sélectionnez les couleurs suggérées ou choisissez une couleur située sous les lignes de rapport de contraste pour respecter les consignes WebAIM.

    Des lignes de rapport de contraste recommandé sont disponibles dans l'aperçu des nuances du sélecteur de couleur.

  • Découvrez tous les problèmes de contraste dans les panneaux CSS Overview (Aperçu CSS) et Issues (Problèmes) (aperçu).

    Problèmes de contraste listés dans le panneau "CSS Overview" (Aperçu CSS) et dans l'onglet "Issues" (Problèmes).

  • Émulez les déficiences visuelles pour comprendre à quoi ressemble votre page pour tous vos utilisateurs.

    Vision floue sélectionnée dans l'onglet "Rendering" (Rendu) et émulée dans le viewport.

Pour une expérience d'apprentissage plus pratique, consultez le tutoriel Rendre votre site Web plus lisible.

Pour en savoir plus, consultez les sections suivantes :