Vérificateur de contraste des couleurs

Teste le rapport de contraste entre les couleurs d'avant-plan et d'arrière-plan pour garantir l'accessibilité.

1.00:1
Contraste
Fail
Très faible

Texte normal

AA (4.5:1)
AAA (7:1)

Grand texte

AA (3:1)
AAA (4.5:1)
Black
#000000
Black
#ff009e

Corrections rapides

Aa

Titre de l'aperçu

Le renard brun et rapide saute par-dessus le chien paresseux.

Exemple de petit texte (12px)

Texte
#000000
Contexte
#ff009e

Normes WCAG

Level AA

Rapport de contraste minimum de 4,5:1 pour le texte normal et de 3:1 pour le texte en gros caractères. Requis pour la plupart des sites web.

Level AAA

Rapport de contraste amélioré de 7:1 pour le texte normal et de 4,5:1 pour le texte en gros caractères. Recommandé pour une accessibilité optimale.

Contraste insuffisant pour toutes les tailles de texte - ne répond pas aux normes WCAG.

Vérificateur de contraste des couleurs

Calcule le rapport de contraste des couleurs du texte et de l'arrière-plan.

Choisis une couleur à l'aide du sélecteur de couleurs pour le texte et la couleur d'arrière-plan ou saisis une couleur au format hexadécimal RVB (par exemple, #259 ou #2596BE). Tu peux ajuster le curseur pour sélectionner la couleur. Les directives d'accessibilité au contenu Web (WCAG) ont une ligne directrice spécifique pour aider à déterminer si le texte est lisible pour les utilisateurs voyants. Ce critère utilise un algorithme particulier pour faire correspondre les combinaisons de couleurs à des rapports comparables. À l'aide de cette formule, les WCAG indiquent qu'un rapport de contraste de 4,5:1 entre le texte et son arrière-plan est adéquat pour un texte normal (corps), et qu'un texte de grande taille (18+ pt normal, ou 14+ pt gras) doit avoir un rapport de contraste d'au moins 3:1.

Caractéristiques principales

  • Calcul du rapport de contraste en temps réel
  • Vérification de la conformité aux normes WCAG AA et AAA
  • Curseurs HSL pour un réglage précis
  • Plusieurs formats de prévisualisation

Outils avancés

  • Fixation automatique des couleurs
  • Exemples de textes et d'arrière-plans
  • Détection du nom de la couleur
  • Exporter les résultats