L'histoire du vérificateur de contraste
Un contraste trop faible est l'un des problèmes d'accessibilité les plus fréquents sur le web. Ses règles ressemblent à des nombres magiques, mais chacune a une raison, liée à la perte de sensibilité de l'œil avec l'âge et à la façon dont les écrans produisent la lumière.
D'où viennent 4,5 et 7
WCAG 2.0 est devenu une recommandation du W3C en décembre 2008. Ses auteurs sont partis d'un minimum de 3:1 issu de la norme ISO 9241-3 et l'ont relevé pour compenser la perte de sensibilité au contraste d'une vision d'environ 20/40, courante vers 80 ans. Cela donne 4,5:1 pour le niveau AA. Le niveau AAA, 7:1, fait de même pour une vision d'environ 20/80.
La luminance relative
La formule reconvertit d'abord chaque canal sRGB en lumière linéaire, puis pondère le rouge, le vert et le bleu par 0,2126, 0,7152 et 0,0722, les mêmes poids que la norme de télévision ITU-R BT.709, car l'œil est le plus sensible au vert. Le rapport est la luminance la plus claire plus 0,05 divisée par la plus sombre plus 0,05. Ce 0,05 représente la lumière reflétée par l'écran et limite l'échelle de 1:1 à 21:1, du noir sur blanc.
Au delà du texte
Un grand texte, au moins 24 px ou 18,66 px en gras, reste lisible avec moins de contraste et ne demande que 3:1 en AA. WCAG 2.1, publié en juin 2018, a ajouté le critère 1.4.11 Contraste du contenu non textuel : bordures de champs, anneaux de focus, icônes et éléments d'un graphique nécessaires à sa compréhension doivent atteindre 3:1 par rapport à leur voisinage.
Le daltonisme et la suite
Environ un homme sur 12 et une femme sur 200 ont un trouble de la vision des couleurs, surtout pour le rouge et le vert. Le contraste se mesure sur la luminance, donc une paire conforme reste lisible, mais des couleurs qui ne diffèrent que par la teinte peuvent se ressembler. La simulation utilise le modèle de Machado, Oliveira et Fernandes de 2009. Les brouillons de WCAG 3 explorent APCA, une méthode plus récente qui tient aussi compte de la taille du texte et du sens sombre sur clair ou clair sur sombre.
Questions fréquemment posées
Un bon contraste suffit-il pour l'accessibilité ?
Non. C'est une exigence parmi d'autres. WCAG demande aussi que la couleur ne soit pas le seul moyen de transmettre une information, par exemple en ajoutant une icône ou un soulignement à un lien ou une erreur.
La simulation montre-t-elle exactement ce que voit une personne ?
C'est une bonne approximation d'une dichromatie complète. Beaucoup de personnes ont une forme plus légère et chacun voit un peu différemment, considérez-la donc comme un guide.
Faut-il utiliser APCA plutôt que le rapport WCAG 2 ?
Pour la conformité aujourd'hui, utilisez le rapport WCAG 2. WCAG 2.2, publié en octobre 2023, garde la même formule, et des lois et normes comme EN 301 549 s'y réfèrent. APCA est encore en développement.
Outils associés
Vérificateur de contraste des couleurs
Vérificateur de contraste WCAG gratuit : saisissez les couleurs du texte et du fond en HEX, RGB ou HSL, voyez le rapport de contraste avec les résultats AA et AAA, obtenez la couleur conforme la plus proche et simulez le daltonisme.
Générateur de palettes de couleurs
Créez, verrouillez et mélangez des palettes dans le navigateur. Copiez HEX, variables CSS ou JSON, exportez PNG ou SVG, et extrayez les couleurs d’une photo.
Roue chromatique
Choisissez une couleur sur une roue interactive, générez des palettes complémentaires, analogues, triadiques et autres, et copiez HEX, RVB, HSL, HSV ou CMJN.
Éditeur de dégradé
Créez des dégradés CSS linéaires et radiaux dans votre navigateur. Faites glisser les arrêts, réglez l’angle et copiez CSS, HEX, RVB, HSL, HSV ou CMJN.
Les couleurs
Comment la couleur fonctionne à l’écran et à l’impression : RVB, CMJN, HSL, hex, cercle chromatique, dégradés, contraste et outils PictorX.
Prêt à l'essayer ?
Ouvrez PictorX dans votre navigateur – aucune installation, aucune carte de crédit requise pour démarrer.
Ouvrir le vérificateur de contraste