Introduction au contraste des couleurs

Les concepteurs doivent s’assurer que le contraste est suffisant entre l’arrière-plan de la page et le texte, ainsi qu’avec les éléments de l’interface utilisateur comme les liens, les boutons et les en-têtes.


Contraste approprié

Contraste approprié

La communication au moyen des couleurs uniquement peut rendre l’utilisation d’une application difficile pour certaines personnes. Les éléments en couleur doivent toujours être accompagnés de texte ou d’un symbole qui indique la fonction de l’élément de l’interface utilisateur. Par exemple, un chevron (>) peut indiquer un lien.

En plus d’aider les personnes malvoyantes, un contraste approprié peut aussi faciliter la consultation en cas de reflets sur l’écran.

Le rapport de contraste minimal est de 4,5:1 pour le texte plus petit et de 3:1 pour le texte plus grand (14 pt en gras/18 pt) et correspond au niveau AA de la norme WCAG 2.0. Les meilleures pratiques décrites dans les normes de la marque TELUS visent un contraste de 7:1 pour les sites web réactifs mobiles. Le texte qui fait partie d’un logo ou d’un nom de marque n’a pas à se conformer aux exigences en matière de contraste.

 Découvrez comment le contraste de couleurs peut vous aider à créer des éléments distincts.

Découvrez le lien entre le daltonisme et le contraste des couleurs.

La communication au moyen des couleurs uniquement peut rendre l’utilisation d’une application difficile pour certaines personnes. Les éléments en couleur doivent toujours être accompagnés de texte ou d’un symbole qui indique la fonction de l’élément de l’interface utilisateur. Par exemple, un chevron (>) peut indiquer un lien.

En plus d’aider les personnes malvoyantes, un contraste approprié peut aussi faciliter la consultation en cas de reflets sur l’écran.

Le rapport de contraste minimal est de 4,5:1 pour le texte plus petit et de 3:1 pour le texte plus grand (14 pt en gras/18 pt) et correspond au niveau AA de la norme WCAG 2.0. Les meilleures pratiques décrites dans les normes de la marque TELUS visent un contraste de 7:1 pour les sites web réactifs mobiles. Le texte qui fait partie d’un logo ou d’un nom de marque n’a pas à se conformer aux exigences en matière de contraste.

 Découvrez comment le contraste de couleurs peut vous aider à créer des éléments distincts.

Découvrez le lien entre le daltonisme et le contraste des couleurs.


Conseils

Conseils

  • Utilisez votre application de conception pour convertir les éléments en niveaux de gris afin de confirmer que vous pouvez toujours distinguer les différences de couleurs.
  • Effectuez des essais automatisés sur des captures d’écran de votre site web pour cerner d’éventuels problèmes de contraste.
  • ●   Confirmez les résultats des essais au moyen d’autres outils dans l’environnement de développement.
  • Utilisez votre application de conception pour convertir les éléments en niveaux de gris afin de confirmer que vous pouvez toujours distinguer les différences de couleurs.
  • Effectuez des essais automatisés sur des captures d’écran de votre site web pour cerner d’éventuels problèmes de contraste.
  • ●   Confirmez les résultats des essais au moyen d’autres outils dans l’environnement de développement.

Explore more

Explore more