Outil Gratuit

Vérificateur de contraste de couleur

Vérifiez les ratios de contraste entre les couleurs de premier plan et de fond. Consultez la conformité WCAG 2.1 AA et AAA pour le texte normal et le texte grand instantanément.

Vérificateur de contraste de couleur

Le renard brun rapide

Texte normal

Contrast ratio: 14.10:1

Ratio de contraste

14.10:1

WCAG AA

Texte normal

Conforme

WCAG AAA

Texte normal

Conforme

WCAG AA Grand

Texte grand

Conforme

WCAG AAA Grand

Texte grand

Conforme

Pourquoi le ratio de contraste est important

Un contraste de couleur suffisant garantit que le texte reste lisible pour les utilisateurs malvoyants ou daltoniens. WCAG 2.1 Niveau AA (la norme requise par la plupart des lois d'accessibilité) nécessite un ratio de 4,5:1 pour le texte normal et 3:1 pour le texte grand (18px+ ou 14px+ en gras).

Comment utiliser

  1. Choisissez votre couleur de texte en utilisant le sélecteur de couleur ou en entrant une valeur hexadécimale.
  2. Choisissez votre couleur de fond de la même manière.
  3. Lisez le ratio de contraste et les badges de conformité WCAG instantanément.
  4. Utilisez les présets pour des paires de référence rapides.
  5. Cliquez sur Copier le CSS pour obtenir la paire de couleurs en tant que propriétés CSS.

Tous les calculs se font dans votre navigateur — aucune donnée de couleur n'est envoyée à aucun serveur.

Depuis le blog Skybin

Free developer tools from Skybin

Lire le guide sur Skybin

Questions Fréquemment Posées

Quelle est la différence entre WCAG AA et AAA ?
WCAG AA nécessite 4,5:1 pour le texte normal et 3:1 pour le texte grand. AAA (le niveau amélioré) nécessite 7:1 et 4,5:1. La plupart des normes d'accessibilité et des exigences légales font référence à AA.
Qu'est-ce qui compte comme texte grand ?
WCAG définit le texte grand comme 18pt (24px) ou plus, ou 14pt (environ 18,67px) en gras ou plus.