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 premiers millions de pages d'accueil 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 d'un coup d'œil tous les problèmes de contraste 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 d'inspection, ainsi que les valeurs de ratios recommandées dans le sélecteur de couleurs.

    Les rapports de contraste sont disponibles dans une info-bulle, avec un sélecteur de couleur pour mesurer le ratio des autres couleurs. La notation AA et AAA de la ration est disponible.

  • Dans le sélecteur de couleurs, sélectionnez les couleurs suggérées ou choisissez-en une sous les lignes de rapport de contraste afin de respecter les consignes de WebAIM.

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

  • Découvrez tous les problèmes de contraste dans les panneaux Présentation des 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 pour 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 Rendre votre site Web plus lisible.

Pour en savoir plus, consultez les sections suivantes :