Les textes à faible contraste rendent votre site Web moins lisible pour tous les utilisateurs, encore plus pour les personnes souffrant de déficiences visuelles. Les outils de développement peuvent détecter automatiquement les problèmes de faible contraste et vous suggérer de meilleures couleurs pour vous aider à les résoudre.
Utilisez les outils de développement pour:
- Découvrir les problèmes de contraste Utilisez le panneau Présentation du CSS, l'onglet Problèmes (preview) ou un rapport Lighthouse pour obtenir la liste de tous les problèmes.
- Résoudre les problèmes de contraste Affichez les problèmes liés à une info-bulle en mode inspecteur, puis sélectionnez les couleurs suggérées par le sélecteur de couleurs pour corriger le rapport de contraste.
- Émulez une déficience visuelle. Examinez votre site tel que les internautes le perçoivent.
Découvrir le texte à faible contraste
Pour identifier le texte à faible contraste:
- Accédez aux Outils de développement sur votre page. Dans ce tutoriel, vous pouvez utiliser cette page de démonstration.
Obtenez la liste de tous les problèmes de contraste à l'aide de l'un des trois panneaux suivants:
Problèmes de contraste dans le panneau "Présentation du CSS"
Pour avoir un aperçu:
- Ouvrez CSS Overview (Aperçu CSS).
- Capturez une vue d'ensemble.
- Ouvrez la section Couleurs, faites défiler la page jusqu'à Problèmes de contraste, puis cliquez sur un problème, le cas échéant.
Dans le tableau Problèmes de contraste, pointez sur un élément et cliquez sur le lien situé à côté.
Corrigez le problème comme décrit dans la section Corriger le texte à faible contraste.
(Aperçu) Problèmes de contraste dans l'onglet "Problèmes"
Pour obtenir la liste des problèmes:
- Activez les rapports sur les problèmes de contraste dans l'onglet Issues (Problèmes) :
- Ouvrez Paramètres > Expérimental.
- Dans la barre de filtre, recherchez
contrast issue. - Cochez Activer la création automatique de rapports sur les problèmes de contraste dans le panneau "Problèmes".
- Cliquez sur Actualiser les outils de développement dans l'invite en haut de la page.
- Ouvrez l'onglet "Problèmes".
Développez les problèmes de contraste détectés par les outils pour les développeurs, développez le tableau des éléments, puis cliquez sur un lien à côté de l'élément.
Corrigez le problème comme décrit dans la section Corriger le texte à faible contraste.
Problèmes de contraste dans un rapport Lighthouse
Pour exécuter un rapport :
- Dans les outils de développement, ouvrez
Plus d'onglets > Lighthouse. - Générer un rapport Lighthouse avec les paramètres suivants :
- Mode: navigation (par défaut)
- Catégories: Accessibilité
- Appareil: Ordinateur
- Cliquez sur Analyser le chargement de la page et attendez que Lighthouse génère le rapport.
- Faites défiler la page jusqu'à la section Contraste et, dans la liste des éléments, cliquez sur un lien vers un élément concerné.
- Corrigez le problème comme décrit dans la section Corriger le texte à faible contraste.
Corriger le texte à faible contraste
Pour résoudre un problème de faible contraste:
- Identifiez un problème de contraste, puis cliquez sur un lien vers un élément concerné dans le panneau Présentation CSS, dans l'onglet Problèmes ou dans le rapport Lighthouse. Les outils de développement vous permettent d'accéder au panneau Éléments et de sélectionner l'élément correspondant.
Par exemple, sur cette page de démonstration, le premier élément concerné est h1.line1. Cliquez sur Inspecter
en haut à droite des Outils de développement, puis pointez sur l'élément dans la fenêtre d'affichage. Les outils de développement affichent une info-bulle pour cet élément.
Notez le signe d'avertissement
à côté de la valeur du rapport de contraste dans l'info-bulle. Le rapport de contraste mesure la différence de luminosité entre les couleurs du premier plan (couleur du texte) et de l'arrière-plan.Ouvrez le sélecteur de couleurs à côté de la déclaration de couleur du texte de l'élément, puis développez la section Rapport de contraste dans le sélecteur de couleurs.
Le sélecteur de couleur vous indique que le rapport de contraste ne respecte pas les niveaux AA ou AAA des consignes de WebAIM.
Cliquez sur le bouton
Utiliser la couleur suggérée à côté du niveau AAA. Le sélecteur de couleur applique une couleur de texte conforme aux consignes relatives au rapport de contraste.
Pour choisir une couleur manuellement, vous pouvez également faire glisser le cercle dans l'aperçu des nuances. Pour rester dans le niveau AA ou AAA, choisissez une couleur en dessous de la ligne supérieure ou inférieure, respectivement.
De même, corrigez tous les problèmes de contraste détectés dans le panneau Présentation CSS, l'onglet Problèmes ou le rapport Lighthouse.
Enregistrez les modifications.
Pour enregistrer vos modifications dans les outils de développement:
- Copiez toutes les modifications CSS en même temps et collez-les dans votre code.
- Envisagez de configurer un espace de travail permettant aux outils de développement d'enregistrer des fichiers directement dans vos sources.
Étape suivante
En savoir plus :
- En savoir plus sur l'accessibilité en général
- L'accessibilité aux couleurs et au contraste en particulier