Contraste de couleurs insuffisant : la règle du 4,5:1 expliquée

Un texte gris clair sur fond blanc paraît élégant dans une maquette. Pour des millions de personnes malvoyantes - dont la plupart des personnes de plus de 40 ans, chez qui la sensibilité au contraste décline naturellement - il peut être difficile, voire impossible, à lire. La réponse des WCAG à la question « quel contraste suffit ? » n'est pas une appréciation subjective : c'est un rapport mathématique précis, ce qui en fait l'une des vérifications les plus fiables à automatiser. Les données du secteur situent le contraste insuffisant autour de 68 % des plaintes d'accessibilité web fondées sur l'ADA - le troisième problème le plus cité, après les alternatives textuelles et les étiquettes de formulaire.

Les chiffres exacts

Le critère de succès 1.4.3 des WCAG (Contraste minimum), niveau AA, exige :

• 4,5:1 pour le texte courant
• 3:1 pour le texte de grande taille - défini comme 18 pt ou plus en graisse normale, ou 14 pt ou plus en gras

Le rapport se calcule à partir de la luminance relative des couleurs du texte et de l'arrière-plan. Les vérifications automatisées supposent d'identifier correctement ces couleurs ; les dégradés, les images, la transparence et les changements d'état peuvent imposer une mesure manuelle.

Où cela casse réellement en pratique

• Texte gris sur blanc ou gris sur gris - la source la plus fréquente, généralement une couleur de texte « secondaire » trop claire dans un système de design
• Texte sur image ou dégradé - une légende suffisamment contrastée sur la zone la plus claire d'une photo, mais pas sur la plus sombre
• Texte indicatif des champs de formulaire, que les équipes de conception éclaircissent par convention, passant souvent bien en dessous de 4,5:1
• Boutons qui semblent désactivés mais restent en réalité interactifs, avec un texte à lire

Comment le corriger

Choisissez des couleurs qui atteignent le rapport requis et vérifiez-le avec un véritable calculateur de contraste plutôt qu'à l'œil : l'écart entre réussite et échec tient souvent à une nuance que l'on ne distingue pas. Le vérificateur de contraste de WebAIM et le sélecteur de couleurs intégré aux outils de développement de Chrome (qui affiche le rapport en direct) sont gratuits et fiables.

/* Avant : 2,8:1 - échoue au niveau AA */
color: #999999;
background-color: #ffffff;

/* Après : 4,6:1 - satisfait le niveau AA pour le texte normal */
color: #767676;
background-color: #ffffff;

Si la cause réelle est une couleur du système de design, corrigez cette couleur une fois plutôt que de rustiner page par page : une seule teinte « texte secondaire » trop claire se traduit généralement par des dizaines de non-conformités à l'échelle du site.

Un modèle plus fidèle arrive, mais ce n'est pas encore la norme

APCA (Accessible Perceptual Contrast Algorithm) est un modèle de contraste plus récent, fondé sur la perception, développé pour les WCAG 3.0 ; il reflète plus fidèlement la façon dont l'œil humain perçoit réellement le contraste, la formule des WCAG 2.x étant connue pour signaler à tort certaines combinaisons et en manquer d'autres. AllyProof affiche les scores APCA à titre informatif et préliminaire, à côté de la vérification standard, mais le rapport 4,5:1 / 3:1 des WCAG 2.x reste la norme opposable aujourd'hui : traitez les résultats APCA comme un signal d'alerte sur les cas limites, non comme un remplacement.

Références officielles

• Deque University : color-contrast
• Technique W3C G18