Le contraste est une notion incontournable pour les sites web (ou n’importe quel support de communication).
Qui n’a jamais eu du mal à lire un texte sur internet parce que le texte est en gris foncé sur un fond gris clair.
Pour garantir une lisibilité maximale
Quel que soit le contexte dans lequel est lu votre site (reflet sur l’écran, daltonisme, fatigue…).
Il est essentiel d’avoir un niveau de contraste suffisant.
Les objectifs(1) sont multiples :
- Permettre une bonne lisibilité des contenus.
- Limiter la charge mentale lors de la consultation.
- Améliorer l’accessibilité des contenus aux personnes en situation de handicap
Pour cela on calcule le ratio entre la couleur de fond et la couleur du texte. Des ratios minimum en fonction de la taille des textes ont été définis au niveau international par le WCAG :
- Pour les textes de moins de 24px, il est nécessaire d’avoir un ratio supérieure à 4.5:1.
- Pour les textes de plus de 24px, le ratio doit être supérieur à 3:1.
Vérifier les ratios
Hop la, doucement, pas besoin de calculatrice. Pour calculer vos ratios, il existe des outils gratuits en ligne pour vous aider à trouver les bonnes couleurs.
Les bons outils
Utiliser un outil comme Trouve-moi les bons contrastes.
Il vous indiquera si votre niveau de contraste est suffisant. Si vos couleurs n’obtiennent pas le ratio minimum, il vous suggérera d’autres couleurs avec un constat suffisant selon le niveau d’accessibilité souhaité.
Un autre outil intéressant pour définir vos couleurs colorsafe.co
Il vous permet d’avoir des suggestions de couleurs de texte en fonction de différents paramètres comme votre couleur de fond, votre typographie, sa taille, sa graisse, et le niveau d’accessibilité souhaité.
Sources : (1) Opquast
