Contraste de couleurs et accessibilité Web

Le daltonisme est une déficience visuelle qui entraîne une altération de la perception des couleurs pour les personnes qui en souffrent. Plus de 10 % de la population mondiale masculine est daltonienne, la population féminine est beaucoup moins atteinte par ce handicap visuel.

L’accessibilité Web dicte des recommandations précises dans la gestion des contrastes de couleurs. Une attention particulière pendant la phase de conception de la charte graphique et un peu de bon sens permettent de passer outre la barrière des contrastes de couleurs hasardeux.

Recommandations pour des contrastes de couleurs accessibles

Afin de rendre une page lisible par tout le monde, la méthode la plus simple est de produire un contraste élevé entre l’arrière-plan et les couleurs utilisées dans le contenu. Le WCAG, référentiel international instauré par le W3C, annonce :

1.4.3 Contraste (minimum) : la présentation visuelle du texte et du texte sous forme d’image a un rapport de contraste d’au moins 4,5:1, sauf dans les cas suivants : (Niveau AA)

Texte agrandi : le texte agrandi et le texte agrandi sous forme d’image ont un rapport de contraste d’au moins 3:1;
Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d’image qui fait partie d’un composant d’interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d’une image contenant un autre contenu significatif.
Logotypes : aucune exigence de contraste pour le texte faisant partie d’un logo ou d’un nom de marque.

En France, le RGAA reprend les recommandations de niveau AA du WCAG, tandis que le référentiel Accessiweb 2.1 présente les choses de cette façon :

Critère 3.3 [Argent] Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?

Pour ces critères, il existe une gestion de cas particulier lorsque le texte fait partie d’un logo ou d’un élément associé à l’identité graphique d’un organisme ou d’une société (un slogan, par exemple). Dans ces situations, les critères sont non applicables pour ces éléments.
Note 1 : Les changements de couleurs consécutifs à la prise de focus ne sont pas concernés par l’application du critère, sauf si le contenu change également lors de la prise de focus.
Note 2 : Les indications des états de liens (visités ou actifs) ne sont pas concernées par l’application du critère.

Mise en oeuvre de l’accessibilité des contrastes

Il existe plusieurs outils pour analyser en quelques clics le contraste entre les couleurs d’arrière-plan et du contenu :

• Snook Color Contratst Checker [en] fonctionne en ligne, ce script très simple d’utilisation propose d’entrer une couleur de premier-plan (foreground) et d’arrière-plan (background). Le résultat affiche instantanément le ratio ainsi que la conformité aux différents niveaux des critères critères WCAG.
  
• Contrast Analyser [en] est un logiciel gratuit à installer sur votre ordinateur. La fonctionnalité de base est la même, il propose toutefois quelques suppléments intéressants comme une pipette qui permet de reproduire une couleur affichée à l’écran et l’affichage des résultats de perception des couleurs selon les différents types de daltonisme. Le programme peut être téléchargé en version française.
  
• ColorSchemeDesigner [en] est un outil en ligne propose de simuler la perception des couleurs par un daltonien.
  

Nos offres

Abonnements gratuits

• Twitter
• Facebook
• Favoris
• RSS
• E-mail