Sujets
L’utilisation des couleurs est bien évidemment importante pour créer un joli site internet. Mais tout le monde ne voit pas les couleurs de la même façon.
C’est pour cette raison qu’il est primordial de contrôler l’utilisation des couleurs et de leur contraste :
- Présence d’un contraste suffisant entre la couleur du texte et la couleur d’arrière-plan.
- La couleur ne doit pas être le seul élément permettant de véhiculer la signification d’un élément ou de sa fonction.
Quelques astuces pour vérifier la conformité de votre site :
- Votre site web doit pouvoir être utilisable en niveaux de gris : n’utilisez pas de combinaisons de couleurs peu discernables entre elles
- Les couleurs de police sombres sur fond clair sont plus facile à lire pour la plupart des gens, mais certaines personnes dans certains contextes peuvent avoir plus de facilité à naviguer sur un site proposant l’inverse (des textes en couleurs claires sur fond sombre)
- Si vous utilisez des couleurs claires sur un fond sombre, vous devriez utiliser une taille de police plus grande que d’habitude, pour que cela reste lisible pour tout le monde (il y a un effet d’optique sur les polices claires sur fond sombre qui réduit la taille de police)
Le contraste des couleurs
Il est important de prendre en compte le contraste des couleurs car il s’agit d’un problème d’accessibilité rencontré sur la plupart des sites web. Cela concerne le contraste en la couleur de premier plan (que les éléments concernés soient textuels ou graphiques) et d’arrière-plan (qu’il s’agisse d’aplats de couleurs ou d’images). Cela concerne également le contraste entre les éléments interactifs et leurs effets de survol ou de focus.
Le contraste entre les couleurs doit être suffisant pour une bonne lisibilité mais dans le même temps, il ne doit pas être trop important pour éviter de poser problème aux personnes oculairement sensibles et ayant des handicaps cognitifs.
Le projet WordPress suit lui même les critères de contrastes de couleurs définis au niveau AA par les WCAG, les Règles d’accessibilité des contenus web (en anglais).
Cela nécessite que le contraste entre les couleurs de premier plan et d’arrière-plan aient un ratio de luminosité de :
- 4.5:1 pour le texte en taille normale
- 3:1 pour le texte de grande taille soit 24 pixels ou 19 pixels si le texte est en gras (source en anglais)
Vous trouverez plus bas dans cette page quelques outils pour vérifier le contraste des couleurs.
Ne pas transmettre l’information seulement par la couleur
Vous pouvez absolument utiliser de la couleur pour différencier certains éléments de votre page. Cependant, vous devez éviter d’utiliser la couleur comme unique élément de différenciation pour les éléments interactifs de votre page. Par exemple, vous ne devez pas utiliser uniquement la couleur pour mettre en valeur les éléments suivants :
- Notifications d’erreurs, de succès, ou d’information
- Lien au sein du contenu de la page
- États actifs, de survol ou de focus sur les éléments interactifs (liens, boutons)
Dans ces cas-là, utilisez une mise en forme complémentaire à la couleur :
- Ajoutez des symboles, pictogrammes ou modifiez-les lors de tout changement d’état
- Soulignez les liens contenus dans des paragraphes de texte
- Utilisez des variations de bordure ou de remplissage sur les boutons et éléments de formulaire
Les liens groupés à l’intérieur d’un menu de navigation n’ont pas besoin d’être soulignés, car leur contexte d’affichage montre généralement assez clairement qu’il s’agit de liens hypertextes. Mais à l’exception des liens de navigation, dans la plupart des cas il est nécessaire d’utiliser le soulignement sur les liens de votre site.
Enfin, les variations d’apparence au survol des éléments interactifs ne doivent pas modifier la mise en page (déplacement d’éléments).
Exemples en images
Bonnes pratiques
Soulignement des liens à l’intérieur de paragraphes de texte :
Les liens soulignés sont bien plus faciles à distinguer. Le soulignement est par convention attribué aux liens hypertextes sur le web, donc s’il est nécessaire de souligner les liens (au sein de paragraphes de texte) il est fortement déconseillé de souligner le texte (sans lien) pour le mettre en exergue. Utilisez plutôt l’italique ou le gras pour mettre en valeur les éléments importants d’une phrase.
Utilisation de symboles en plus des couleurs dans les éléments graphiques.
Dans les deux exemples ci-dessous, on voit que la différence entre les deux éléments est toujours discernables même en niveaux de gris :
Mauvaises pratiques
Liens non soulignés : les personnes qui ne voient pas les couleurs ou qui les différencient mal ne pourront pas voir les liens hypertextes présents dans le contenu texte de votre page.
Exemple visuel dans la capture d’écran ci-dessous, on ne discerne pas les liens :
Couleur utilisée pour transmettre l’information. Les éléments seront indiscernables les uns des autres pour les personnes ayant des difficultés à percevoir les couleurs.
Exemple visuel dans la capture d’écran ci-dessous :
La façon la plus simple de vérifier si votre site est utilisable par les personnes ayant des difficultés à discerner les couleurs est de le tester en niveaux de gris. Lorsque l’information colorimétrique est supprimée, il est facile de vérifier si votre site est toujours utilisable ou non.
Outils
Pour tester les contrastes entre les couleurs de premier plan et d’arrière-plan, nous vous conseillons l’outil Tanaguru disponible en ligne, gratuitement et en français. Vous pouvez indiquer vos couleurs en hexadécimal ou en RVB (rouge, vert, bleu) et vérifier leur contraste. Si jamais vos couleurs ne sont pas assez contrastées, l’outil vous proposera alors des jeux de couleurs suffisamment contrastées en restant le plus proche possible des couleurs que vous avez saisies.
Pour simuler différents troubles de la vision et vérifier que l’information est accessible en niveau de gris par exemple, vous pouvez utiliser l’inspecteur d’accessibilité dans les outils de développement de Firefox.
Rédigé par Jb Audras le 03 janvier 2021
Relu par Marie Comet
Dernière mise à jour le 04 janvier 2021