Vérificateur de contraste des couleurs

Vérifie tes couleurs

Teste les combinaisons de couleurs pour t'assurer qu'elles respectent les normes d'accessibilité WCAG pour la lisibilité du texte.

1.00:1

Contraste

Échec

Très mauvais

Texte normal

AA (4.5:1)

AAA (7:1)

Grand texte

AA (3:1)

AAA (4.5:1)

Couleur du texte

Couleur de l'arrière-plan

Corrections rapides

Titre de l'aperçu

Le vif renard brun saute par-dessus le chien paresseux

Exemple de petit texte (12px)

Texte

#2596be

Fond

#ffffff

Normes WCAG

Niveau AA

Ratio de contraste minimal de 4.5:1 pour le texte normal et 3:1 pour le texte large. Requis pour la plupart des sites web.

Niveau AAA

Ratio de contraste amélioré de 7:1 pour le texte normal et 4.5:1 pour le texte large. Recommandé pour une accessibilité optimale.

Contraste insuffisant pour toutes les tailles de texte - ne respecte pas les normes WCAG.

Calcule le ratio de contraste entre les couleurs du texte et de l'arrière-plan.

Choisissez une couleur à l'aide du sélecteur de couleur pour la couleur du texte et de l'arrière-plan ou saisissez une couleur au format hexadécimal RGB (par exemple, #259 ou #2596BE). Vous pouvez ajuster le curseur pour sélectionner la couleur. Les Web Content Accessibility Guidelines (WCAG) ont une directive spécifique pour déterminer si le texte est lisible pour les utilisateurs voyants. Ce critère utilise un algorithme particulier pour mapper les combinaisons de couleurs en ratios comparables. Selon cette formule, les WCAG indiquent qu'un ratio de contraste de couleur de 4.5:1 entre le texte et son arrière-plan est adéquat pour le texte normal, et le texte large (18+ pts normal, ou 14+ pts gras) doit avoir au moins un ratio de contraste de 3:1.

Caractéristiques principales

Calcul du ratio de contraste en temps réel
Vérification de la conformité WCAG AA & AAA
Curseurs HSL pour un réglage précis
Formats d'aperçu multiples

Outils avancés

Correction automatique des couleurs
Échantillons de texte et de fond
Détection du nom de la couleur
Exporter les résultats

Questions fréquemment posées

Pour la conformité WCAG AA, le texte normal exige un ratio de contraste minimum de 4,5:1, tandis que le grand texte (18pt ou 14pt en gras) exige 3:1.

La norme WCAG AAA exige des ratios de contraste plus élevés : 7:1 pour le texte normal et 4,5:1 pour le grand texte, contre 4,5:1 et 3:1 pour AA.

Utilise notre correction automatique pour ajuster le texte ou l'arrière-plan tout en respectant ton intention graphique, ou règle manuellement les couleurs avec les curseurs HSL et leurs indicateurs visuels qui montrent les zones optimales pour la conformité AA/AAA.

Les zones vertes et les repères AA/AAA indiquent les plages optimales pour atteindre la conformité WCAG. Les indications de direction (Plus clair/Plus foncé) t'aident à obtenir un meilleur contraste en fonction de ta combinaison de couleurs actuelle.

Oui, tu peux saisir n'importe quel code couleur hexadécimal ou utiliser le sélecteur de couleurs pour choisir tes propres couleurs. L'URL se met à jour automatiquement pour que tu puisses partager des combinaisons précises.