Améliorez la lisibilité de votre site Web

Sofia Emelianova

Les textes à faible contraste rendent votre site Web moins lisible pour tous les utilisateurs, d'autant plus pour ceux qui ont une déficience visuelle. 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:

• Identifier les problèmes de contraste Utilisez le panneau Présentation du CSS, l'onglet Problèmes (aperçu) ou un rapport Lighthouse pour obtenir la liste de tous les problèmes.
• Corrigez les problèmes de contraste. Affichez les problèmes à l'aide d'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. Examinez votre site tel que les internautes le voient.

Découvrez le texte à faible contraste

Pour découvrir le texte à faible contraste:

1. Ouvrez les outils de développement sur votre page. Dans ce tutoriel, vous pouvez utiliser cette page de démonstration.

2. Obtenez une liste de tous les problèmes de contraste en utilisant l'un des trois panneaux:

   • Présentation des CSS
   • (Preview) Problèmes
   • Phare

Problèmes de contraste dans le panneau "Aperçu du CSS"

Pour obtenir un aperçu:

1. Ouvrez CSS Overview (Aperçu CSS).
2. Faites une capture d'écran.
3. Ouvrez la section Couleurs, faites défiler la page jusqu'à Problèmes de contraste, puis cliquez sur un problème, le cas échéant.

4. Dans le tableau Problèmes de contraste, pointez sur un élément, puis cliquez sur le lien situé à côté.

   

5. Résolvez le problème comme décrit dans la section Résoudre les problèmes de texte à faible contraste.

(Aperçu) Problèmes de contraste dans l'onglet "Problèmes"

Pour obtenir une liste de problèmes:

1. Activez la création de rapports sur les problèmes de contraste dans l'onglet Issues (Problèmes) :
   1. Ouvrez Paramètres > Expérimental.
   2. Dans la barre de filtres, recherchez contrast issue.
   3. Cochez la case Activer la création de rapports automatiques sur les problèmes de contraste via le panneau "Problèmes".
   4. Cliquez sur Actualiser les outils de développement dans l'invite située en haut de la page.
2. Ouvrez l'onglet "Problèmes".

3. Développez les problèmes de contraste détectés par les outils de développement, développez le tableau des éléments, puis cliquez sur un lien à côté de l'élément.

   

4. 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 exécuter un rapport :

1. Dans les outils de développement, ouvrez Plus d'onglets > Lighthouse.
2. Générez un rapport Lighthouse avec les paramètres suivants :
   • Mode: Navigation (par défaut)
   • Catégories: Accessibilité
   • Appareil: Ordinateur
3. Cliquez sur Analyser le chargement de la page et attendez que Lighthouse génère le rapport.
4. Faites défiler la page jusqu'à la section Contraste, puis cliquez sur un lien vers l'élément concerné dans la liste des éléments.
5. Résolvez le problème comme décrit dans la section Résoudre les problèmes de texte à faible contraste.

Corriger le texte à faible contraste

Pour résoudre un problème de faible contraste:

1. Identifiez un problème de contraste, puis cliquez sur un lien vers un élément concerné dans le panneau Présentation du CSS, dans l'onglet Problèmes ou dans le rapport Lighthouse. Les outils de développement vous redirigent vers le panneau Éléments et sélectionne l'élément correspondant. Par exemple, sur cette page de démonstration, le premier élément concerné est h1.line1.

2. Cliquez sur Inspect (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 de premier plan (couleur du texte) et d'arrière-plan.

3. 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 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 WebAIM.

4. Cliquez sur le bouton Utiliser la couleur suggérée à côté du niveau AAA. Le sélecteur de couleur applique la couleur du texte qui respecte les consignes relatives au rapport de contraste.

   

5. 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.

   

6. De même, corrigez tous les problèmes de contraste que vous avez détectés à l'aide du panneau Présentation CSS, de l'onglet Problèmes ou du rapport Lighthouse.

Enregistrez les modifications.

Pour enregistrer les modifications que vous avez apportées dans les outils de développement:

• Copier toutes les modifications CSS simultanément et les coller dans votre code
• Envisagez de configurer un espace de travail qui permettra aux outils de développement d'enregistrer des fichiers directement dans vos sources.

Étape suivante

En savoir plus :

• Découvrir l'accessibilité en général
• L'accessibilité par couleur et contraste en particulier