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

4,54 : 1

Suffisant

Lisible à toutes les tailles. Le niveau renforcé n’est atteint que pour le grand texte.

Couleurs conformes les plus proches

AA · 4,5 : 1

Objectif déjà atteint

AAA · 7 : 1

  • Texte plus foncé#595959Atteint : 7,00 : 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 : 1Réussi
1.4.3 AAGrand texte3 : 1Réussi
1.4.6 AAATexte courant7 : 1Échoué
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ée137,0 / 255125 ou plus. Au-dessus du repère.
Différence de couleurMême méthode AERT411 / 765500 ou plus. Sous le repère.
Contraste de WeberUtilisé en sciences de la vision−0,780Pas 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,693Pas de seuil.
Écart de clarté ΔL*CIELAB, identique à l’écart de tonalité HCT de Material Design50,3Repères Material : 40 (≈ 3 : 1) et 50 (≈ 4,5 : 1).
Écart de couleur ΔE 2000Formule de référence de l’industrie36,9Environ 1 : différence à peine visible.
Écart de couleur ΔE 76Ancienne formule de ΔE50,4Pas de seuil.
Écart de clarté OKLabEspace de couleur moderne, utilisé en CSS0,434Pas de seuil.

Guides associés

Autres outils