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 pages d'accueil principales présentaient ce problème. Pour en savoir plus, consultez le rapport WebAIM Million 2022.

Les outils pour les développeurs Chrome vous permettent d'identifier tous les problèmes de contraste d'un seul coup d'œil et de les résoudre d'un simple 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 autres couleurs. Les notations AA et AAA du ratio sont disponibles.

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

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

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

    Problèmes de contraste répertoriés dans le panneau "Présentation du CSS" et dans l'onglet "Problèmes".

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

    Vision floutée sélectionnée dans l'onglet "Rendu" et émulée dans la fenêtre d'affichage.

Pour une expérience d'apprentissage plus pratique, consultez le tutoriel Améliorer la lisibilité de votre site Web.

Pour en savoir plus, consultez les sections suivantes :