Créer des ressources accessibles : Couleur et contraste
La couleur et le contraste jouent un rôle clé dans la manière dont les utilisateurs perçoivent votre contenu et interagissent avec lui. Pour respecter les normes d’accessibilité, il est important d’assurer un contraste suffisant entre le texte et l’arrière-plan, d’éviter de s’appuyer uniquement sur la couleur pour transmettre le sens, et de choisir des palettes qui favorisent la lisibilité pour tous les utilisateurs. Cet article vous présente les meilleures pratiques en matière d’utilisation des couleurs et des contrastes pour créer des expériences web accessibles et inclusives.
Pour vous assurer que votre site web, votre page de renvoi, votre formulaire ou votre message répond aux exigences d’accessibilité, utilisez la liste de contrôle disponible ici.
Exigences
- Le texte de petite taille (police régulière de moins de 18 pt (24 pixels CSS) ou police grasse de 14 pt (19 pixels CSS)) doit présenter un rapport de contraste d’au moins 4,5:1 par rapport à l’arrière-plan.
- Le texte de grande taille (18 pt ou 14 pt gras ou plus) doit présenter un rapport de contraste d’au moins 3:1 par rapport à l’arrière-plan.
- La règle du contraste s’applique également aux images de texte, bien qu’il soit préférable d’éviter d’utiliser des images pour le texte.
- Le contraste des contrôles de l’interface utilisateur et des éléments non textuels (tels que les bascules, les cases à cocher, etc.) par rapport à l’arrière-plan doit être de 3:1.
- Le contraste de tous les indicateurs visuels de focalisation (par exemple, le survol d’un bouton) par rapport à l’arrière-plan doit être de 3:1.
- Les objets graphiques tels qu’une icône autonome, un graphique ou une image doivent présenter un contraste minimum de 3:1 entre l’élément et son arrière-plan.
- Toute information affichée en couleur doit être accompagnée d’un texte alternatif compréhensible par un programme.
- Fournissez toujours une alternative visible, comme du texte ou une image, pour toute information véhiculée par la couleur.
La meilleure façon de vérifier si la mise en page est indépendante de la couleur est d’effectuer un test en niveaux de gris. Cela vous permettra de vérifier si tous les éléments importants du point de vue de l’utilisateur sont visibles et s’ils nécessitent des ajustements.
Exemples
 | OUI: Un contour plus foncé marque l’étape actuelle de l’utilisateur dans le flux. En regardant l’échelle de gris de cette vue, une telle solution permettrait à un daltonien d’obtenir des informations sur l’endroit où il se trouve dans le processus. |
  | OUI: Les données d’un graphique peuvent être distinguées les unes des autres en ajoutant des formes aux lignes. En regardant l’échelle de gris de cette vue, une telle solution permettrait à un daltonien d’obtenir des informations sur les données. |
  | OUI: Le texte doit être placé sur un fond présentant un rapport de contraste de 4,5:1. NON: N’utilisez pas de couleur d’arrière-plan pour le texte en dessous d’un rapport de 4,5:1. |