Le texte à faible contraste rend votre site Web moins lisible pour tous les utilisateurs, et encore plus pour ceux qui souffrent de déficiences visuelles. Les outils de développement peuvent détecter automatiquement les problèmes de faible contraste et suggérer de meilleures couleurs pour vous aider à les résoudre.
Utilisez les outils de développement pour :
- Détecter les problèmes de contraste. Utilisez le panneau CSS Overview (Aperçu CSS), l'onglet Issues (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 avec une info-bulle en mode Inspecteur et sélectionnez les couleurs suggérées par le sélecteur de couleur pour corriger le rapport de contraste.
- Émuler les déficiences visuelles. Découvrez votre site tel que vos utilisateurs le voient.
Identifier le texte à faible contraste
Pour identifier le texte à faible contraste :
- Ouvrez les outils de développement sur votre page.
Répertoriez tous les problèmes de contraste à l'aide de l'un des trois panneaux suivants :
- CSS Overview (Aperçu CSS)
- (Preview) Issues (Problèmes) (preview)
- Lighthouse
Vous pouvez faire des essais en ouvrant notre CodePen.
Problèmes de contraste dans le panneau CSS Overview (Aperçu CSS)
Pour obtenir une vue d'ensemble :
- Ouvrez CSS Overview (Aperçu CSS).
- Capturez un aperçu.
- Ouvrez la section Colors (Couleurs), accédez à Contrast issues (Problèmes de contraste), puis cliquez sur un problème, le cas échéant.
Dans le tableau Contrast issues (Problèmes de contraste), pointez sur un élément et cliquez sur le lien situé à côté.
Résolvez le problème comme décrit dans la section Résoudre les problèmes de texte à faible contraste.
(Preview) Problèmes de contraste dans l'onglet Issues (Problèmes)
Pour obtenir la liste des problèmes :
- Activez le signalement des problèmes de contraste dans l'onglet Issues (Problèmes) :
- Accédez à Settings (Paramètres) > Experimental (Expérimental).
- Dans la barre de filtre, recherchez
contrast issue. - Sélectionnez Enable automatic contrast issue reporting via the Issues panel (Activer le signalement automatique des problèmes de contraste via le panneau Problèmes).
- Cliquez sur Reload DevTools (Recharger les outils de développement) dans l'invite en haut de la page.
- Ouvrez l'onglet Issues (Problèmes).
Développez les problèmes de contraste détectés par les outils de développement, puis développez le tableau des éléments et cliquez sur un lien à côté de l'élément.
Résolvez le problème comme décrit dans la section Résoudre les problèmes de texte à faible contraste.
Problèmes de contraste dans un rapport Lighthouse
Pour générer un rapport :
- Dans les outils de développement, ouvrez More tabs (Plus d'onglets) > Lighthouse.
Générez un rapport Lighthouse avec les paramètres suivants :
- Mode : Navigation (par défaut)
- Categories (Catégories) : Accessibilité
- Device (Appareil) : Ordinateur
Cliquez sur Analyze page load (Analyser le chargement de page) et attendez que Lighthouse génère le rapport.
Accédez à la section Contrast (Contraste). Dans la liste des éléments, cliquez sur un lien vers un élément concerné.
Résolvez le problème comme décrit dans la section Résoudre les problèmes de texte à faible contraste.
More tabs (Plus d'onglets) > Lighthouse.Résoudre les problèmes de texte à faible contraste
Pour résoudre un problème de faible contraste :
Recherchez un problème de contraste et cliquez sur un lien vers un élément concerné dans le panneau CSS Overview (Aperçu CSS), l'onglet Issues (Problèmes), ou le rapport Lighthouse. Les outils de développement vous redirigent vers le panneau Elements (Éléments) et sélectionnent l'élément correspondant.
Par exemple, dans notre démonstration CodePen inaccessible, le premier élément concerné est
h1.line1.Cliquez sur Inspect (Inspecter) en haut à droite des outils de développement et 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
symbole 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 de premier plan (couleur du texte) et d'arrière-plan.Ouvrez le sélecteur de couleur à côté de la déclaration de couleur du texte de l’élément, puis développez la section Contrast ratio (Rapport de contraste) dans le sélecteur de couleur.
Le sélecteur de couleur indique que le rapport de contraste ne répond pas aux niveaux AA ou AAA des consignes WebAIM.
Cliquez sur le bouton Use suggested color (Utiliser la couleur suggérée) à côté du niveau AAA. Le sélecteur de couleur applique la couleur de texte conforme aux consignes relatives au rapport de contraste.
Vous pouvez également choisir une couleur manuellement en faisant glisser le cercle dans l'aperçu des nuances. Pour rester au niveau AA ou AAA, choisissez une couleur en dessous de la ligne supérieure ou inférieure, respectivement.
De même, résolvez tous les problèmes de contraste que vous avez trouvés avec le panneau CSS Overview, l'onglet Issues, ou le rapport Lighthouse.
Inspect (Inspecter) en haut à droite des outils de développement et pointez sur l'élément dans
la fenêtre d'affichage. Les outils de développement affichent une info-bulle pour cet élément.
Use suggested color (Utiliser la couleur suggérée) à côté du niveau AAA. Le sélecteur de couleur applique la couleur de texte conforme aux consignes relatives au rapport de contraste.Enregistrer les modifications
Pour enregistrer les modifications que vous avez apportées dans les outils de développement :
- Copiez toutes les modifications CSS en une seule fois et collez-les dans votre code.
- Configurez un espace de travail pour permettre aux outils de développement d'enregistrer directement les fichiers dans vos sources.
Étape suivante
En savoir plus :
- En savoir plus sur l'accessibilité en général
- En savoir plus sur l'accessibilité des couleurs et des contrastes en particulier