Tout le monde doit pouvoir lire votre texte.

Il est important que le texte soit visible et lisible. Si vous voulez que vos étudiants comprennent vos contenus, ils doivent pouvoir les lire.

Un contraste de texte adapté garantit que tout le monde peut voir le texte par rapport à l'arrière-plan sur lequel il se trouve.

Tout le monde ne voit pas les couleurs de la même manière. Les WCAG ont défini des exigences de contraste spécifiques dans les Directives WCAG 2.1 AA qui vous permettent de vous assurer que le texte est lisible pour tous. Suivez ces exigences et nos bonnes pratiques en matière de contraste pour corriger ou éviter les problèmes de contraste.

Ally contrôle le respect de ces exigences en vérifiant que le contraste entre la couleur du texte et son arrière-plan est suffisant. Un faible contraste de texte est un problème majeur. Les problèmes majeurs nuisent à l'accessibilité et méritent votre attention, même s'ils ne sont pas graves.

Utiliser Ally pour repérer du texte avec un contraste médiocre

Utilisez le rapport sur l'accessibilité d'Ally pour identifier et résoudre les problèmes d'accessibilité de votre site. Utilisez le lien fourni pour le rapport et connectez-vous. Ouvrez le rapport et consultez la liste des problèmes dans le tableau Problèmes d'accessibilité.

Le tableau Problèmes d'accessibilité se trouve à la fois dans les onglets Présentation et Domaine. Ouvrez d'abord l'onglet Domaine pour consulter les problèmes spécifiques à un domaine. 

Un faible contraste de texte est un problème majeur. Consultez l'onglet Majeur du tableau Problèmes d'accessibilité pour afficher la liste des problèmes majeurs. Sélectionnez les problèmes relatifs au contraste.

Si vous démarrez dans l'onglet Présentation, sélectionnez le problème, puis le domaine concerné.

Dans la liste, les mentions de problèmes de contraste peuvent commencer par Document ou HTML.

Depuis la liste des problèmes de contraste du domaine en question, sélectionnez l'indicateur de résultat en regard d'un élément présentant le problème. Le volet de feed-back d'éditeur de contenu s'ouvre.

Afficher un aperçu du texte avec un contraste médiocre

Le volet de feed-back Ally vous offre un aperçu du contenu, ainsi qu'un feed-back détaillé et une assistance pour vous aider à résoudre vos problèmes d'accessibilité. Utilisez l'aperçu pour afficher le texte avec un contraste médiocre.

L'aperçu indique où surviennent les problèmes d'accessibilité spécifiques rencontrés dans le document. Les surbrillances indiquent chaque occurrence d'un problème, un type de problème à la fois. Par exemple, si du texte présente un contraste médiocre, des surbrillances s'affichent à chaque emplacement où ce problème spécifique se répète.

Outils d'aperçu

Utilisez les outils de l'aperçu pour explorer les problèmes dans votre document.

  • Permettent de parcourir l'aperçu du document page par page.
  • Indiquent le nombre de fois où un problème spécifique apparaît dans le document.
  • Permettent de passer d'un problème à l'autre.
  • Permettent de masquer ou d'afficher les surbrillances.
  • Permettent d'effectuer un zoom avant ou arrière sur le contenu d'aperçu.
  • Si le problème se trouve dans un document joint, téléchargez le fichier d'origine.

Suivre les étapes guidées d'Ally pour résoudre les problèmes de contraste

Ally suppose que vous avez des connaissances de base en HTML et que vous savez utiliser votre système de gestion de contenu (CMS). Pour suivre les étapes guidées, vous devez savoir comment modifier une page Web dans le code HTML ou dans le code source de votre CMS.

Ally suppose également que vous êtes autorisé à mettre à jour les couleurs sur votre site Web. Les couleurs sont souvent définies dans le Guide de style d'un site et peuvent refléter une image de marque. Avant d'apporter des modifications, consultez le Guide de style de votre site. 

En plus de l'aperçu, Ally vous donne des conseils pas-à-pas sur la résolution du problème. Ally organise ce feed-back sous forme d'arbre décisionnel : il vous suffit de lire les instructions et de répondre aux invites du système. Prenez connaissance du problème, identifiez en quoi il est important et voyez comment le résoudre de façon appropriée.

Sélectionnez Comment corriger le contraste pour suivre les étapes guidées.

Méthodes de correction des problèmes de contraste

Lorsque le texte présente un contraste médiocre, cela signifie qu'il n'y a pas assez de contraste de couleurs entre le texte et l'arrière-plan sur lequel il se trouve.

Les étapes guidées d'Ally expliquent comment modifier la couleur du texte. Vous pouvez également modifier la couleur d'arrière-plan. 

Avant d'apporter des modifications, consultez le Guide de style de votre site. Les couleurs sont souvent liées à une image de marque et doivent être modifiées avec prudence.

Les étapes guidées d'Ally expliquent également comment effectuer les mises à jour dans le code source HTML des pages Web individuelles. Les CMS peuvent varier. Certains CMS disposent d'un éditeur de texte enrichi (RTE) qui peut vous fournir des méthodes conviviales de modification des styles du texte. Les RTE vous permettent de choisir un style prédéfini pour les titres, les couleurs, les polices, les images, etc. Cependant, tous les CMS ne fournissent pas de RTE et certains nécessitent de modifier le code HTML source. Parfois, les deux options (HTML et RTE) sont disponibles.

Pour les problèmes de contraste récurrents, il est préférable de mettre à jour le modèle. Les mises à jour du modèle nécessitent des connaissances en langages HTML et CSS et il est également possible que l'image de marque de votre site doive être respectée. 

Consultez le site Web w3schools pour en savoir plus sur les langages HTML et CSS.

Couleurs HEX ou RVB

HEX et RVB sont deux systèmes distincts de définition des couleurs.

  • Le système RVB définit la couleur en fonction de la quantité de rouge (R), de vert (V) et de bleu (B) utilisée. Par exemple, une nuance de rouge peut être définie comme RVB (253, 2, 2).
  • Le système HEX est un format hexadécimal qui définit une couleur à l'aide des valeurs rouge, vert et bleu sous la forme d'une combinaison de six lettres et chiffres. Les valeurs hexadécimales commencent par le symbole dièse (#). Par exemple, la même nuance de rouge est définie comme #fd0202.

Le format hexadécimal est le mode le plus courant pour définir les couleurs sur les pages Web.

Meilleures pratiques en matière de contraste du texte

Vous pouvez effectuer une multitude d'ajustements pour améliorer la lisibilité du texte, et ce, moyennant un minimum d'efforts.

  • Utilisez des polices avec des traits de caractères larges.
  • Utilisez une taille de police de 12 px au moins. Si vous utilisez une police avec des déliés, utilisez au moins une taille de 16 px.
  • Utilisez uniquement des polices « déliées » sur des arrière-plans sombres.
  • Utilisez du texte clair sur les arrière-plans foncés.
  • Utilisez du texte foncé sur les arrière-plans clairs.
  • Évitez les combinaisons de couleurs suivantes :
    • Vert et rouge
    • Vert et marron
    • Bleu et violet
    • Vert et bleu
    • Vert clair et jaune
    • Bleu et gris
    • Vert et gris
    • Vert et noir

Vous n'êtes pas sûr que votre texte présente un contraste assez élevé ?  Utilisez l'analyseur de contraste des couleurs du groupe Paciello pour vérifier votre contenu.

Pourquoi le contraste du texte est-il important ?

Un texte à faible contraste peut être difficile à lire dans de nombreuses situations.

  • En cas de projection en classe
  • Pour les étudiants daltoniens
  • Sur un appareil mobile avec une forte luminosité ou un reflet sur l'écran
  • Sur les moniteurs de basse qualité

Le contraste faible peut entraîner une fatigue oculaire, rendre le contenu difficile à découvrir et à analyser et induire de la frustration.

Un bon contraste permet à tous de voir le texte clairement et de bénéficier d'une meilleure expérience de lecture globale.