Contraste WCAG
Vérifiez le ratio de contraste entre deux couleurs selon WCAG 2.1. Résultats AA et AAA en temps réel.
Aperçu du texte normal (16px)
Ceci est un exemple de texte en taille normale. La lisibilité dépend directement du contraste entre la couleur du texte et celle du fond.
Grand texte (24px+)
Questions fréquentes
Qu'est-ce que le ratio de contraste WCAG ?
Le ratio de contraste WCAG mesure la différence de luminosité entre deux couleurs. Il est calculé selon la formule (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre.
Le ratio va de 1:1 (aucun contraste, couleurs identiques) à 21:1 (noir sur blanc, contraste maximal).
Quelle est la différence entre AA et AAA ?
Le niveau AA est le niveau minimum recommandé pour la plupart des sites web : ratio ≥ 4.5:1 pour le texte normal et ≥ 3:1 pour le grand texte (≥ 18pt ou 14pt en gras).
Le niveau AAA est le plus strict : ratio ≥ 7:1 pour le texte normal et ≥ 4.5:1 pour le grand texte. Le niveau AAA est conseillé pour les sites à forte accessibilité (administrations, santé, éducation).
Qu'est-ce que la luminance relative ?
La luminance relative est une mesure de la clarté perçue d'une couleur, indépendante de la teinte. Elle est calculée à partir des composantes R, G, B après linéarisation sRGB : L = 0.2126×R + 0.7152×G + 0.0722×B.
Les coefficients reflètent la sensibilité de l'œil humain : nous percevons le vert comme bien plus lumineux que le bleu. La noir pur a une luminance de 0, le blanc pur de 1.
Mon site doit-il obligatoirement respecter WCAG ?
En France, les sites des services publics sont soumis au RGAA (Référentiel Général d'Amélioration de l'Accessibilité) qui est basé sur WCAG 2.1 niveau AA.
Pour les sites privés, ce n'est pas légalement obligatoire pour la plupart, mais fortement recommandé. Un bon contraste améliore la lisibilité pour tous les utilisateurs, en particulier les personnes malvoyantes, daltoniennes, ou utilisant un écran en plein soleil.
Qu'est-ce que le grand texte selon WCAG ?
Selon WCAG 2.1, le grand texte correspond à du texte d'au moins 18pt (24px) en style normal, ou 14pt (environ 18.67px) en gras. Le grand texte bénéficie de critères de contraste moins stricts car il est plus facile à lire même avec un contraste plus faible.
Les logotypes et textes décoratifs sont exemptés des exigences de contraste.
Découvrez nos autres outils de design :
Calcul conforme à WCAG 2.1 Success Criterion 1.4.3 (W3C, 2018). Formule de luminance relative selon la spécification sRGB (IEC 61966-2-1).