Corregir «Contraste de color insuficiente» en HTML
Por qué es un problema
Un texto con poco contraste sobre su fondo es ilegible para personas con baja visión o daltonismo, o a pleno sol. El RGAA exige al menos 4,5:1 (3:1 para texto grande).
Cómo corregirlo — HTML
Es una corrección CSS, independiente del framework: ajuste los colores hasta alcanzar el ratio. Compruebe el valor calculado (p. ej. #767676 sobre blanco = 4,54:1).
/* ratio 2.85:1 — échoue */
.hint { color: #999999; background: #ffffff; }/* ratio 4.54:1 — conforme */
.hint { color: #767676; background: #ffffff; }Criterio 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) ?
Cómo verificarlo: pruebas oficiales (en francés)
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é ?
Ficha completa del criterio 3.2 · Texto oficial: Référentiel général d'amélioration de l'accessibilité (RGAA) 4.1, DINUM, Licence Ouverte 2.0.
Compruebe su sitio en 30 segundos
Conformly detecta este tipo de problema en todas sus páginas, de forma continua, y le avisa en cada regresión.
Escaneo gratis