Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Quel contraste de couleur est requis pour le texte des sites web ?
Le texte normal a besoin d'un rapport de contraste d'au moins 4,5:1 par rapport au fond, le texte grand — à partir d'environ 24 pixels ou gras à partir d'environ 18,7 pixels — au moins 3:1. Ces limites proviennent de la norme internationale WCAG. Elles garantissent que même les gens dont la vue baisse peuvent lire vos textes — et chaque visiteur en plein soleil sur téléphone.
Le rapport de contraste, expliqué en langage quotidien
Le rapport de contraste décrit comment la couleur du texte et la couleur de fond diffèrent fortement en luminosité. Le noir sur blanc atteint la valeur maximale 21:1 et se lit sans effort. Le gris clair à la mode sur blanc se situe souvent sous 3:1 — pour les gens dont la vue baisse avec l'âge, ce texte devient une surface grise. Les personnes affectées ne sont pas uniquement des malvoyants : aussi le client qui cherche vos horaires au soleil sur son téléphone échoue aux faibles contrastes. La limite 4,5:1 pour le texte normal et 3:1 pour le texte grand est le compromis fixé dans la norme entre liberté de conception et lisibilité fiable.
Comment notre noyau de mesure mesure le contraste — aussi sur les images
La mesure de base est prise en charge par axe-core : il calcule pour les textes de votre site le rapport de contraste à partir de la couleur du texte et du fond. Pour le texte sur les photos ou les dégradés, aucun outil ne peut lire simplement le fond — c'est précisément là que notre noyau de mesure progresse : il rend le texte brièvement invisible, prend une photo du lieu dans le navigateur, calcule la luminosité du fond réel pixel par pixel et en déduit le vrai contraste contre la couleur du texte. Cela transforme « indéterminable » en un jugement solide. Chaque lieu échoué, le rapport l'enregistre avec la valeur mesurée, la limite requise et une photo d'écran de preuve — vous voyez donc précisément quel passage de texte est affecté.
Améliorer le contraste sans sacrifier le design
De bons contrastes ne forcent pas un design noir et blanc. Généralement, il suffit de foncer légèrement la couleur du texte — d'un gris clair devient un anthracite moyen, qui rayonne la même retenue et reste lisible. Pour le texte sur les photos, des astuces éprouvées aident : une surface sombre semi-transparente derrière le texte, un dégradé en bas de l'image ou le déplacement du texte vers une partie calme de l'image. Vous n'avez généralement pas besoin de changer vos couleurs de marque — souvent, il suffit de les utiliser pour les grandes surfaces et pour le texte une variante plus sombre ou plus claire de la même famille de couleurs.
Beispiele
Grauer Fließtext auf Weiß
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */Die Grenze für normalen Text ist 4,5:1, für großen Text ab 24 Pixel 3:1. Der Wert steht im Prüfbericht je Fundstelle.
Weiße Schrift auf Markenfarbe
.knopf { color: #fff; background: #5aa9ff; } /* 2,5:1 */.knopf { color: #fff; background: #1a5fb4; } /* 6,3:1 */- Vérifiez d'abord les textes gris de votre site — les pieds de page, légendes et conseils de formulaire sont le plus souvent en dessous du seuil.
- Demandez à votre agence de vérifier toutes les couleurs de texte par rapport aux seuils 4,5:1 et 3:1 et de documenter les valeurs.
- Superposez le texte sur les photos avec une surface semi-transparente foncée, plutôt que de laisser la lisibilité dépendre de l'image.
- Consultez votre page à la lumière du jour éclatante sur un téléphone — ce qui se dérègle là se dérègle toujours pour les visiteurs malvoyants.
- Documentez les combinaisons de couleurs vérifiées dans votre guide de design, pour que les nouvelles pages les adoptent.