Contraste WCAG entre texte et fond

Un gris clair sur fond blanc fatigue les yeux. Saisissez deux couleurs : l'outil calcule le rapport de contraste et indique si le texte respecte les niveaux AA et AAA.

Jimenez JulienPar , éditeur de Calepin Binaire · mis à jour le

Rapport de contraste
7 : 1
AA, texte normal (4,5 : 1)
Réussi
AA, grand texte (3 : 1)
Réussi
AAA, texte normal (7 : 1)
Réussi
AAA, grand texte (4,5 : 1)
Réussi
Éléments d'interface (3 : 1)
Réussi

Comment ça se calcule

Chaque canal est converti en valeur linéaire, puis la luminance relative vaut 0,2126 R + 0,7152 V + 0,0722 B. Le rapport est (L1 + 0,05) / (L2 + 0,05), L1 étant la plus claire des deux. Les seuils des WCAG sont 4,5 pour un texte normal en AA, 3 pour un grand texte et 7 pour un texte normal en AAA.

Questions fréquentes

Qu'est-ce qu'un grand texte ?

Selon les WCAG, un texte d'au moins 18 points (environ 24 pixels), ou de 14 points en gras (environ 18,7 pixels). Il tolère un contraste plus faible.

Le contraste suffit-il à garantir l'accessibilité ?

Non, c'est un critère parmi d'autres. Il faut aussi penser à la taille, à la police et à ne jamais transmettre une information par la couleur seule.

Cas fréquents

Des exemples déjà remplis, avec leur explication :

Intégrer cet outil sur votre site

Copiez ce code pour afficher l'outil sur votre site ou votre blog. L'outil s'exécute dans le navigateur du visiteur, sans cookie ni suivi, et affiche un lien « Propulsé par Calepin Binaire » vers cette page.

Aperçu de la version intégrable : https://mircode.org/embed/contraste-wcag-couleur-texte-et-fond/

Les résultats sont fournis à titre indicatif. Pour aller plus loin, découvrez les sites de la catégorie Octets de bureau de l'annuaire et lisez le guide de cette catégorie.

Autres outils

Voir les 35 outils