Corriger « Contraste des couleurs insuffisant » en HTML
Pourquoi c'est un problème
Un texte trop peu contrasté avec son fond est illisible pour les personnes malvoyantes, daltoniennes, ou sur un écran en plein soleil. Le RGAA exige un ratio d'au moins 4,5:1 (3:1 pour le grand texte).
Comment corriger — HTML
C'est une correction CSS, indépendante du framework : ajustez les couleurs jusqu'à atteindre le ratio. Vérifiez la valeur calculée (ex. #767676 sur blanc = 4,54:1).
/* ratio 2.85:1 — échoue */
.hint { color: #999999; background: #ffffff; }/* ratio 4.54:1 — conforme */
.hint { color: #767676; background: #ffffff; }Critère RGAA 3.2 — Couleurs
Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Comment vérifier : tests officiels
Test 3.2.1
Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions (hors cas particuliers) ?
Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.
Test 3.2.2
Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?
Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.
Test 3.2.3
Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px vérifient-ils une de ces conditions (hors cas particuliers) ?
Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ;
Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.
Test 3.2.4
Dans chaque page web, le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?
Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ;
Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.
Test 3.2.5
Dans le mécanisme qui permet d’afficher un rapport de contraste conforme, le rapport de contraste entre le texte et la couleur d’arrière-plan est-il suffisamment élevé ?
Fiche complète du critère 3.2 · Texte officiel : Référentiel général d'amélioration de l'accessibilité (RGAA) 4.1, DINUM, Licence Ouverte 2.0.
Vérifiez votre site en 30 secondes
Conformly détecte ce type de problème sur toutes vos pages, en continu, et vous alerte à chaque régression.
Scan gratuit