Accessibilité : Préparer votre texte et vos graphiques
5 min
Dans cet article
- Nos recommandations
- Trouver les codes de couleur
- Ajuster le contraste des couleurs
Les visiteurs souffrant de troubles visuels peuvent avoir du mal à faire la différence entre le premier plan et l'arrière-plan des pages d'un site. Par conséquent, nous vous suggérons de vérifier et d'ajuster le contraste des couleurs de votre site si nécessaire.
Nos recommandations
Afin d'améliorer l'accessibilité pour les visiteurs avec des besoins visuels différents, 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.
Bon à savoir :
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).
Trouver les codes de couleur
Vous pouvez trouver les codes de couleur dans le constructeur de site que vous utilisez (Éditeur Studio ou Éditeur Wix).
Éditeur Wix
Responsable Studio
- Sélectionnez l'élément concerné (texte, arrière-plan de la bande, boîte conteneur, etc.) et accédez à la palette de couleurs .
- Survolez l'une des couleurs pour voir le code de couleur.
Tester les contrastes de couleurs :
Il existe de nombreux sites et plugins de navigateur tels que [Vérificateur de contraste] (href = "https://webaim.org/resources/contrastchecker/" target = "_ blank") 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] (href = "https://developer.paciellogroup.com/resources/contrastanalyser/" target = "_ blank") qui vous permet de choisir la couleur d'arrière-plan puis testez.
Ajuster le contraste des couleurs
Vous pouvez utiliser l'assistant d'accessibilité dans votre éditeur pour rechercher et ajuster tout contraste de couleur faible sur un site, que vous utilisiez l'Éditeur Wix ou l'Éditeur Studio. L'Assistant analyse votre site à la recherche de problèmes d'accessibilité potentiels et met en évidence les moyens d'améliorer l'accessibilité du site.
Avec la plupart des éléments, vous pouvez apporter des modifications dans l'Assistant lui-même. Cependant, certains éléments (ex. éléments d'appli) ne sont actuellement pas entièrement intégrées à l'Assistant et doivent être ajustées manuellement.
Éditeur Wix
Responsable Studio
- Accédez à votre éditeur.
- Cliquez sur Paramètres en haut de votre éditeur.
- Sélectionnez Assistant d'accessibilité.
- Sélectionnez Analyser le site.
- Cliquez sur l'onglet Problèmes détectés.
- Sélectionnez une page dans la liste.
- Cliquez sur Améliorer le contraste des couleurs.
- Sélectionnez l'élément concerné et ajustez-le si nécessaire :
Ajuster le contraste dans l'Assistant
Ajuster manuellement le contraste
.
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 liste de vérification pour l'accessibilité pour continuer à améliorer l'accessibilité de votre site.