Testeur de Contraste WCAG

Vérifiez la lisibilité de votre design. Assurez-vous que la couleur de votre texte contraste suffisamment avec votre arrière-plan.

Couleurs à tester

Couleur de fond (Background)
Couleur du texte (Foreground)

Texte Large (18pt ou 14pt Gras)

Ceci est un aperçu de texte normal. La lisibilité dépend fortement du contraste entre ces deux couleurs. Testez différents niveaux de gris pour observer la différence.

Ratio de Contraste

{{ contrastRatio }} : 1
Niveau AA Texte normal (≥ 4.5:1)
{{ passesAANormal ? 'Pass' : 'Fail' }}
Niveau AA Texte large (≥ 3.0:1)
{{ passesAALarge ? 'Pass' : 'Fail' }}
Niveau AAA Texte normal (≥ 7.0:1)
{{ passesAAANormal ? 'Pass' : 'Fail' }}
Niveau AAA Texte large (≥ 4.5:1)
{{ passesAAALarge ? 'Pass' : 'Fail' }}

Qu'est-ce que les normes WCAG ?

Les WCAG (Web Content Accessibility Guidelines) sont un ensemble de directives internationales conçues pour rendre les contenus web accessibles à tous, y compris aux personnes souffrant de handicaps visuels (daltonisme, malvoyance, vieillissement de la vue). En France, ces normes sont transcrites dans le RGAA (Référentiel Général d'Amélioration de l'Accessibilité), qui est obligatoire pour les sites publics et les grandes entreprises.

Comment fonctionne le calcul du ratio de contraste ?

Le ratio de contraste mesure la différence de luminosité relative entre deux couleurs (le texte et son arrière-plan). L'échelle s'étend de 1:1 (aucune différence, par exemple texte blanc sur fond blanc) à 21:1 (contraste maximal, texte noir sur fond blanc).

Que signifient les niveaux AA et AAA ?

  • Le Niveau AA : C'est la norme standard visée par 99% des sites web. Pour être validé "AA", un texte de taille normale doit avoir un ratio d'au moins 4.5:1. Pour un texte de grande taille (plus de 18pt, ou 14pt en gras), un ratio de 3.0:1 est suffisant.
  • Le Niveau AAA : C'est le niveau d'accessibilité le plus strict (souvent requis pour les sites gouvernementaux spécifiques). Il exige un ratio de 7.0:1 pour du texte normal, et de 4.5:1 pour du texte large.

D'autres outils Design UI :

Mode d’emploi

Comment utiliser Testeur de contraste WCAG ?

Vérifiez que vos couleurs de texte et de fond respectent les normes d’accessibilité WCAG.

  1. Couleur du texte

    Saisissez la couleur du texte.

  2. Couleur du fond

    Saisissez la couleur de fond.

  3. Lisez le résultat

    Ratio de contraste et conformité AA / AAA.

GratuitAucun abonnement, aucune limite cachée.
Sans inscriptionOuvrez la page, utilisez l’outil, c’est tout.
InstantanéRésultat en quelques secondes, même sur mobile.
ConfidentielLe traitement se fait dans votre navigateur.

En savoir plus : Testeur de contraste WCAG

Un contraste suffisant rend un site lisible pour tous, notamment les personnes malvoyantes. Le niveau AA exige un ratio de 4,5:1 pour le texte normal et 3:1 pour le grand texte.

contraste wcag accessibilité couleurs ratio de contraste contrast checker rgaa
FAQ

Questions fréquentes sur Testeur de contraste WCAG

Quel ratio viser ?

Au moins 4,5:1 pour le texte courant (AA), 7:1 pour le niveau AAA.

Qu’est-ce qu’un « grand texte » ?

Un texte d’au moins 24 px, ou 18,66 px en gras ; il nécessite un ratio de 3:1 en AA.

Le contraste est-il obligatoire ?

Pour les sites publics en France, le RGAA s’appuie sur les critères WCAG.

Comment corriger un contraste insuffisant ?

Assombrissez le texte ou éclaircissez le fond jusqu’à atteindre le ratio.