Aller au contenu principal

Vérificateur de contraste

Votre texte est-il assez lisible sur sa couleur de fond ? Choisissez les deux couleurs : le résultat indique tout de suite si le contraste convient à tout le monde, y compris aux personnes malvoyantes.Le calcul suit les règles internationales d’accessibilité (WCAG 2.2). Tout se passe dans votre navigateur.

Vos couleurs

Cliquez sur une couleur pour la modifier ou coller un code.

Résultat

14,03 : 1

Excellent

Lisible par presque tout le monde, à toutes les tailles.

Couleurs conformes les plus proches

Objectif déjà atteintVos couleurs atteignent AA et AAA.

  • Texte courant

    Paragraphes, liens, libellés

  • Grand texte

    Titres, 24 px ou 18,66 px gras

  • Composants d’interface

    Boutons, champs, icônes

Détail technique

Détail des critères WCAG de contraste
CritèreSeuilRésultat
1.4.3 AATexte courant4,5 : 1Réussi
1.4.3 AAGrand texte3 : 1Réussi
1.4.6 AAATexte courant7 : 1Réussi
1.4.6 AAAGrand texte4,5 : 1Réussi
1.4.11 AAComposants3 : 1Réussi

Grand texte : 24 px ou plus, ou 18,66 px en gras. Les seuils ne sont jamais arrondis : 4,499 échoue à 4,5.

Qu’est-ce que WCAG 2.2 ?

Les WCAG (Web Content Accessibility Guidelines) sont les règles internationales d’accessibilité du web, publiées par le W3C. La version 2.2 date de 2023. En France, le RGAA s’appuie sur elles et la loi impose le niveau AA. Le contraste y est mesuré par un ratio entre 1 : 1 (aucune différence) et 21 : 1 (noir sur blanc).

Comprendre le contraste WCAG

Autres mesures du contraste Informatif

D’autres formules mesurent l’écart entre deux couleurs. Elles servent aux designers et aux experts pour comprendre un résultat limite. Elles n’ont aucune valeur réglementaire : seul le résultat WCAG 2.2 fait foi.

Autres mesures du contraste
MesureValeurRepère
Différence de luminositéAncienne méthode du W3C (AERT, 2000), abandonnée208,7 / 255125 ou plus. Au-dessus du repère.
Différence de couleurMême méthode AERT597 / 765500 ou plus. Au-dessus du repère.
Contraste de WeberUtilisé en sciences de la vision13,040Pas de seuil. Négatif quand le texte est plus sombre que le fond.
Contraste de MichelsonPrévu pour les motifs et rayures, peu adapté au texte0,959Pas de seuil.
Écart de clarté ΔL*CIELAB, identique à l’écart de tonalité HCT de Material Design81,8Repères Material : 40 (≈ 3 : 1) et 50 (≈ 4,5 : 1).
Écart de couleur ΔE 2000Formule de référence de l’industrie78,1Environ 1 : différence à peine visible.
Écart de couleur ΔE 76Ancienne formule de ΔE87,9Pas de seuil.
Écart de clarté OKLabEspace de couleur moderne, utilisé en CSS0,699Pas de seuil.