Fix "Insufficient color contrast" in HTML
Why it's a problem
Text with too little contrast against its background is unreadable for low-vision or color-blind users, or on a screen in sunlight. RGAA requires at least 4.5:1 (3:1 for large text).
How to fix it — HTML
This is a CSS fix, framework-independent: adjust the colors until the ratio is met. Check the computed value (e.g. #767676 on white = 4.54:1).
/* ratio 2.85:1 — échoue */
.hint { color: #999999; background: #ffffff; }/* ratio 4.54:1 — conforme */
.hint { color: #767676; background: #ffffff; }RGAA criterion 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) ?
How to check: official tests (in French)
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é ?
Full page for criterion 3.2 · Official text: Référentiel général d'amélioration de l'accessibilité (RGAA) 4.1, DINUM, Licence Ouverte 2.0.
Check your site in 30 seconds
Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.
Free scan