1.4.11 Contraste des éléments non textuels (AA)

Les composants de l’interface et les objets graphiques doivent avoir un rapport de contraste d’au moins 3:1 par rapport aux couleurs avoisinantes.

 

L’importance d’un bon contraste

Un contraste élevé permet aux personnes daltoniennes ou malvoyantes de plus facilement voir et reconnaître les icônes et autres éléments non textuels. De plus, bon nombre de visiteurs de votre site web lisent vos textes sur un smartphone avec un petit écran (ou un écran de moins bonne qualité) et/ou dans des mauvaises conditions de luminosité. Ce critère de succès leur facilite aussi la lecture.

Les WCAG définissent les composants de l'interface et les objets graphiques comme suit.

Composants de l’interface

« Informations visuelles nécessaires à l’identification des composants de l’interface utilisateur et des statuts, à l’exception des composants inactifs ou des composants dont la présentation est déterminée par l’agent utilisateur et n’est pas modifiée par l’auteur. »

 

Exemple

Dans la plupart des navigateurs, le rapport de contraste d’un bouton inactif qui n’a pas été conçu avec CSS (comme

 <input type=”button” disabled=”true”>

) est inférieur à 3:1. Mais cela n’enfreint toutefois pas ce critère de succès car dans ce cas, le navigateur – ou l’agent utilisateur– détermine à quoi ressemble un composant inactif.

Objets graphiques

« Parties d’images nécessaires à la compréhension du contenu, sauf lorsqu’une présentation spécifique des images est essentielle pour l’information véhiculée. »

 

Exemple

Dans une infographie, les couleurs des icônes et autres images doivent avoir un rapport de contraste d’au moins 3:1 par rapport aux couleurs avoisinantes. Sauf (évidemment) dans les situations où vous voulez afficher des échantillons de couleurs (par exemple dans une boutique en ligne), des drapeaux nationaux ou des logos.

 

Comment le mesurer ?

Découvrez comment mesurer vous-même un rapport de contraste dans l’article « Utilisez un contraste suffisant ».