Support Centre

Utiliser le contraste des couleurs pour l'accessibilité

Renée Meloche
Renée Meloche
  • Mise à jour

Le contraste et la couleur jouent un rôle important dans la conformité de votre conception aux normes d'accessibilité.

Bien sûr, vous voulez choisir des couleurs pour votre conception qui  vont bien ensemble  et  créent un intérêt visuel  , mais vous voulez également vous assurer que les lecteurs malvoyants ou handicapés puissent  voir et comprendre votre conception  .

Comment choisir les bonnes couleurs ?

Lorsque vous choisissez des couleurs pour votre conception, vous voulez vous assurer qu'elles

  • Se complètent

  • Racontez une  histoire visuelle  qui  se connecte à vos données

  • Utilisez des couleurs suffisamment  contrastées  pour assurer l'accessibilité

Il existe  de nombreuses ressources  pour vous aider à commencer à choisir les couleurs de votre conception, y compris  des roues chromatiques  de base comme celle ci-dessous, ainsi que des couleurs monochromatiques, analogues, complémentaires et contrastées :

Un ensemble de trois roues de couleur.  Le premier, étiqueté "Primaire", montre les couleurs rouge, bleu et jaune dans leurs positions respectives sur la roue.  La deuxième roue, étiquetée « Secondaire », affiche les couleurs violet, orange et vert.  La troisième roue, " Tertiaire ", montre les couleurs magenta, vermillon, ambre, chartreuse, sarcelle et violet.
 

Comment créer des designs avec un contraste accessible ?

Le contraste est déterminé par la luminosité ou l'éclat d'une couleur ou d'un élément par rapport à un autre élément.

Le texte noir sur fond blanc est  très contrasté  . Ce même texte sur un fond blanc est beaucoup plus difficile à voir s'il s'agit d'une couleur plus claire, comme le jaune, ce qui le rend  peu contrasté  .

Deux échantillons de texte sur fond blanc ;  chacun indique «Exemple de texte» dans la même police serif, la même taille et le même poids.  Sur la gauche, le texte est noir et facile à lire.  À droite, le texte est d'un jaune clair et difficile à voir sur le fond blanc.

Les éléments à faible contraste peuvent être difficiles à voir et le texte à faible contraste peut être difficile à lire. Un rapport de contraste élevé garantit que le texte est lisible et que les éléments non textuels sont perceptibles.

Les lecteurs ayant une déficience visuelle auront particulièrement du mal à lire ou à voir des éléments à faible contraste, mais cela affecte également la lisibilité pour les autres.

Conseils pour créer du contraste

  • Utilisez des couleurs sombres sur un fond clair ou des couleurs claires sur un fond sombre

  • Utilisez des motifs solides en arrière-plan pour rendre tous les éléments superposés plus visibles

  • Exécutez  le vérificateur d'accessibilité de Venngage  pour vérifier les rapports de contraste et voir les suggestions

Quels outils de Venngage Editor peuvent m'aider à régler le contraste ?

Le vérificateur d'accessibilité  de Venngage est le moyen le plus rapide de vérifier les rapports de contraste dans votre conception et de voir comment les ajuster pour les rendre plus clairs.

Sélectionnez "Fichier" dans le menu de navigation supérieur  (au-dessus de la barre d'outils supérieure), puis sélectionnez "Vérifier l'accessibilité" pour ouvrir le panneau d'accessibilité.

Les éléments de votre conception qui ne respectent pas  les exigences de contraste des directives pour l'accessibilité des contenus Web (WCAG)  sont répertoriés sous l'en-tête "Contraste des couleurs".

La vue du panneau de droite du vérificateur d'accessibilité de Venngage, avec la section "Contraste des couleurs" non réduite.  Le texte de la conception (non illustré) est mis en surbrillance comme ayant un contraste de couleur insuffisant, et un bouton d'actualisation permet de renumériser le document lorsque l'utilisateur a modifié les couleurs pour régler le contraste.

Sélectionnez un élément individuel  dans votre conception, comme une icône ou une zone de texte, pour  vérifier s'il répond aux exigences de contraste  .

 

VENNGAGE LOGO

Intéressé à vous abonner? Faites la comparaison entre nos forfaits.

 

Cet article vous a-t-il été utile?

Utilisateurs qui ont trouvé cela utile : 5 sur 9

Vous avez d’autres questions? Envoyer une demande