Faire en sorte que le contraste soit suffisant entre les couleurs au premier plan et celles en arrière-plan  
Point de contrôle 2.2 de priorité 2 WAI / WCAG 1.0
 
 
Description du problème

La page contient des images, des objets ou des applets. Des cas peuvent exister où le contraste entre les couleurs au premier plan et celles en arrière-plan n'est pas suffisant pour les différencier.

 
 
Procédure de vérification

Vérifiez qu'il est facile de faire la différence entre les couleurs et les éléments colorés sur la page, quel que soit le support utilisé pour afficher la page Web.
Vérifiez que le contraste entre les éléments au premier plan et ceux en arrière-plan ne passe pas uniquement par les couleurs. La luminosité (c'est-à-dire le contraste noir et blanc), différents styles de police, différentes tailles ou noms de police peuvent également être utilisés.

Si vous vous servez de la couleur, accentuez les différences entre les couleurs au premier plan et celles en arrière-plan en vous aidant de ces trois paramètres :

  • teinte
  • saturation
  • luminosité

Pour tester facilement la page, vous pouvez :

  • afficher la page en noir et blanc et examinez chacun de ses éléments ;
  • imprimer la page sur une imprimante noir et blanc ;
  • photocopier deux ou trois fois la page imprimée pour contrôler si les couleurs bougent ou pas. Vous pouvez ainsi repérer les endroits nécessitant l'ajout d'aides visuelles (notamment des traits de soulignement) ou déterminer si les aides visuelles ne peuvent tenir car trop petites ou imprécises.
 
 
Explication du problème

Il existe de nombreuses situations où un choix limité de couleurs empêche la perception et la compréhension de certaines informations ou images se trouvant sur la page.

Ceci est dû à plusieurs facteurs, notamment au fait que :

  • le choix des couleurs de premier plan et d'arrière-plan est limité ;
  • la personne visitant le site Web utilise un écran ne rendant pas la même qualité des couleurs que celui utilisé par le concepteur de la page ;
  • la personne visite le site Web sur un écran noir et blanc d'un assistant personnel ou d'un téléphone portable ;
  • la personne visitant le site Web doit imprimer la page sur une imprimante noir et blanc ;
  • la personne visitant le site Web est daltonienne.

Issu des instructions W3C :

Instruction 2. Ne pas se fier uniquement à la couleur.
Vérifiez que le texte et les images sont lisibles lorsqu'ils sont affichés en noir et blanc.

Si vous n'utilisez que la couleur, les personnes ne pouvant pas faire la différence entre certaines couleurs et celles utilisant des écrans noir et blanc et des supports autres que visuels ne peuvent pas recevoir les informations. Lorsque la teinte des couleurs au premier plan et d'arrière-plan est presque identique, le contraste risque d'être insuffisant lorsque celles-ci sont affichées sur un écran monochrome ou chez les personnes ne percevant pas correctement les couleurs.