Accessibilité : Préparer votre texte et vos graphiques

Temps de lecture : 2 min
Les visiteurs ayant une vision limitée peuvent avoir du mal à faire la différence entre le premier plan et l'arrière-plan des pages de votre site. Afin d'améliorer l'accessibilité pour eux, nous recommandons ce qui suit :
  • Modifier la couleur du texte et le contraste de la couleur d'arrière-plan à un ratio de 4,5: 1 pour le texte normal et de 3: 1 pour le texte de grande taille.
  • Un rapport de contraste d'au moins 3: 1 pour les graphiques et les composants de l'interface utilisateur (tels que les bordures de saisie des formulaires, les espaces réservés, etc.).
  • Le niveau AAA nécessite un rapport de contraste supérieur d'au moins 7: 1 pour le texte normal et de 4,5 : 1 pour le texte de grande taille.
Remarque :
Le texte de grande taille est défini comme étant supérieur à 14 points (environ 18 px) et en gras, ou 18 points (environ 24 px).
Test des contrastes de couleurs
Il existe de nombreux sites et plugins de navigateur tels que Contrast Checker qui teste le contraste des couleurs en comparant les couleurs de premier plan et d'arrière-plan (en utilisant les codes couleurs). Pour vérifier le contraste des couleurs du texte sur une image d'arrière-plan, nous vous recommandons d'utiliser Color Contrast Analyzer qui vous permet de choisir la couleur d'arrière-plan puis testez.
Afficher des graphiques ou des données sur votre site ?
La couleur à contraste élevé est un excellent moyen d'afficher des données sur votre site. Cependant, nous recommandons également d'utiliser d'autres indicateurs (tels que les textures et les motifs) pour différencier les informations.
Prochaine étape :
Retournez à la check-list d'accessibilité pour continuer à améliorer l'accessibilité de votre site.

Cela vous a-t-il aidé ?

|