Accessibilité : Préparer votre texte et vos graphiques
9 min
Dans cet article
- Nos recommandations
- Trouver les codes de couleur
- Ajuster le contraste des couleurs
- Examiner manuellement 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és à l'Assistant et doivent être vérifiés ou ajustés 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
.
Examiner manuellement le contraste des couleurs
Il peut y avoir des contrastes de couleurs sur le site que l'Assistant d'accessibilité ne détecte pas. Nous vous recommandons de vérifier manuellement le contenu du site avec le Vérificateur de contraste Wix et d'ajuster le contraste si nécessaire.
Vous pouvez installer et utiliser le Vérificateur de contraste à partir de votre constructeur de site (Éditeur Wix ou Éditeur Studio). Si les éléments ne répondent pas aux exigences, vous pouvez également tester de nouveaux ratios avec la palette de couleurs.
Éditeur Wix
Responsable Studio
Pour vérifier le contraste :
- (Première fois uniquement) Installez le module complémentaire dans votre éditeur.
- Cliquez sur Outils
en haut à droite de votre Éditeur. - Cliquez sur Modules de l'éditeur.
- Cliquez sur Vérificateur de contraste.
- Utilisez les cases de couleur pour sélectionner la couleur de l'élément et de l'arrière-plan dans le vérificateur, ou collez les codes couleur correspondants.
Pour ajuster le contraste :
- Ajustez les couleurs du premier plan et de l'arrière-plan dans le Vérificateur de contraste selon le ratio recommandé.
- Copiez les codes des couleurs en bas à droite de la palette de couleurs.
- Sélectionner l'élément de votre choix dans votre éditeur.
- Ouvrez la palette de couleurs à partir des paramètres de design de l'élément.
- Cliquez sur Ajouter à côté de Mes couleurs.
- Collez le code copié dans le champ.
Suggestion :
La façon dont vous ouvrez les paramètres de design dépend de l'élément, mais vous pouvez généralement les trouver en sélectionnant l'élément, puis en cliquant sur l'icône Design 
.
.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 de l'accessibilité pour continuer à améliorer l'accessibilité de votre site.