Aller au contenu principal
MOBALIB — Accueil

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

2,85 : 1

Insuffisant

Trop peu de contraste : ce texte sera difficile à lire pour beaucoup de personnes.

Couleurs conformes les plus proches

AA · 4,5 : 1

  • Texte plus clair#3388F2Atteint : 4,50 : 1
  • Fond plus clair#E7E7E7Atteint : 4,50 : 1

AAA · 7 : 1

  • Texte plus clair#72AFFFAtteint : 7,03 : 1

Les couleurs les plus proches des vôtres qui atteignent l’objectif, même teinte. Calcul sur les couleurs opaques.

  • 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 : 1Échoué
1.4.3 AAGrand texte3 : 1Échoué
1.4.6 AAATexte courant7 : 1Échoué
1.4.6 AAAGrand texte4,5 : 1Échoué
1.4.11 AAComposants3 : 1Échoué

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ée49,1 / 255125 ou plus. Sous le repère.
Différence de couleurMême méthode AERT272 / 765500 ou plus. Sous le repère.
Contraste de WeberUtilisé en sciences de la vision1,858Pas 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,793Pas de seuil.
Écart de clarté ΔL*CIELAB, identique à l’écart de tonalité HCT de Material Design30,8Repères Material : 40 (≈ 3 : 1) et 50 (≈ 4,5 : 1).
Écart de couleur ΔE 2000Formule de référence de l’industrie34,9Environ 1 : différence à peine visible.
Écart de couleur ΔE 76Ancienne formule de ΔE68,7Pas de seuil.
Écart de clarté OKLabEspace de couleur moderne, utilisé en CSS0,270Pas de seuil.

Guides associés

Autres outils