Comprendre les Ratios de Contraste WCAG
Les normes de contraste WCAG assurent que votre texte reste lisible pour les personnes malvoyantes. Apprenez les ratios minimum et comment les tester facilement.
Pourquoi le contraste compte vraiment
Vous pensez peut-être que votre design est clair. Mais 1 personne sur 12 a une forme de daltonisme, et environ 2 millions de personnes en France ont une vision malvoyante. C’est énorme. Quand vous testez vos ratios de contraste WCAG, vous rendez votre site utilisable pour tous ces gens.
La bonne nouvelle ? C’est facile à faire correctement. Les normes WCAG existent depuis 2008, et elles sont vraiment claires sur ce qui marche. Pas de magie, juste des chiffres et des formules simples.
Ratio minimum AA (texte normal)
Ratio minimum AAA (texte normal)
Ratio minimum AA (texte grand)
Qu’est-ce qu’un ratio de contraste ?
Un ratio de contraste mesure simplement la différence entre la luminosité du texte et la luminosité du fond. C’est un nombre, et plus il est élevé, mieux c’est. Le ratio se calcule en comparant les valeurs de luminosité relative de deux couleurs.
Voici comment ça marche : chaque couleur a une luminosité relative entre 0 (noir) et 1 (blanc). On prend la couleur la plus claire, on ajoute 0.05, puis on divise par la couleur la plus sombre plus 0.05. Le résultat ? C’est votre ratio. Un ratio de 1:1 signifie pas de contraste du tout. Un ratio de 21:1 est le maximum possible (blanc sur noir).
Vous ne devez pas calculer ça à la main. Les outils le font pour vous.
Les niveaux WCAG : AA vs AAA
Les normes WCAG ont deux niveaux de conformité qui nous intéressent pour le contraste : AA et AAA.
Niveau AA
C’est le standard minimum accepté. Pour le texte normal, vous avez besoin d’un ratio de 4.5:1. Pour le texte grand (18pt ou plus), 3:1 suffit. La plupart des sites visent le AA. C’est accessible et pas impossible à atteindre.
Niveau AAA
C’est le niveau premium. Texte normal ? 7:1. Texte grand ? 4.5:1. Franchement, c’est strict. Mais si vous travaillez sur du contenu critique — un site médical, une plateforme gouvernementale, une application bancaire — le AAA c’est ce qu’il faut viser.
Comment tester vos ratios
Utilisez WebAIM Contrast Checker
Allez sur webaim.org/resources/contrastchecker/. Entrez vos codes couleur (hex, RGB, ou nommées). L’outil vous dit immédiatement si vous êtes en conformité AA ou AAA.
Testez dans votre navigateur
Les DevTools modernes (Chrome, Firefox) ont des vérificateurs de contraste intégrés. Inspectez un élément et regardez les couleurs. Chrome vous montre directement le ratio et la conformité.
Utilisez une extension de navigateur
WAVE, Axe DevTools, ou Lighthouse sont gratuits et vous scanneront votre site entier en quelques secondes. Vous obtenez un rapport complet avec tous les problèmes de contraste.
Conseils pratiques pour un bon contraste
Pensez en luminosité, pas en couleur
Le problème c’est pas la couleur elle-même. C’est sa luminosité. Un bleu clair sur un fond blanc ? Mauvais contraste. Un bleu foncé sur un fond blanc ? Bon contraste. Même la couleur, luminosité différente.
Testez avant de déployer
Intégrez le test de contraste à votre processus de design. Avant de coder, testez votre palette. Avant de lancer, scannez le site complet. Ça prend 5 minutes et ça vous évite 100 corrections plus tard.
Testez sur différents appareils
Les écrans vieillissent, les téléphones ont des écrans différents. Ce qui semble clair sur votre moniteur 4K peut être difficile à lire sur un téléphone plus ancien. Vérifiez sur plusieurs appareils.
Les grands textes sont plus faciles
Vous avez besoin de 7:1 pour du texte normal, mais seulement 4.5:1 pour du texte grand. Si vous utilisez 18pt ou plus, vous pouvez être un peu plus flexible avec les couleurs.
Résumé et prochaines étapes
Les ratios de contraste WCAG ne sont pas une option ou un luxe. C’est une obligation si vous voulez que votre site soit réellement accessible. Bonne nouvelle ? C’est facile à tester et facile à corriger une fois que vous savez comment faire.
Commencez par 4.5:1 (niveau AA). C’est le standard accepté et c’est faisable avec presque n’importe quelle palette de couleurs. Si vous avez du contenu critique, visez 7:1. Et surtout, testez vraiment. Pas sur un écran, sur plusieurs.
Votre site sera mieux. Vos utilisateurs seront heureux. Et vous respecterez les normes qui comptent.
Prêt à améliorer votre accessibilité ?
Découvrez comment les autres éléments d’accessibilité (navigation clavier, texte alternatif, hiérarchie des titres) fonctionnent ensemble pour créer une expérience vraiment inclusive.
Explorer tous les guides d’accessibilitéÀ propos de ce guide
Ce guide est informatif et éducatif. Les normes WCAG sont publiques et maintenues par le W3C. Les ratios de contraste mentionnés ici correspondent à WCAG 2.1. Bien que nous nous efforçons d’être précis, les standards évoluent. Consultez toujours la documentation officielle du W3C pour les mises à jour les plus récentes. Cet article n’est pas un conseil juridique en matière d’accessibilité, et les circonstances peuvent varier selon votre juridiction.
