Vérificateur de contraste : Calculateur de ratio de contraste WCAG

Calculez le ratio de contraste WCAG entre deux couleurs avec le Vérificateur de contraste. Obtenez des résultats en temps réel et évaluez le contraste de vos couleurs.

Colors

Foreground (Text)

Background

Preview & Results

Sample Text

The quick brown fox jumps over the lazy dog.

21.00

Contrast Ratio

AAA

WCAG Grade

AA (normal text, 4.5:1)

AA Large (3:1)

AAA (7:1)

Vérificateur de contraste : Calculateur de ratio de contraste WCAG

Résumé rapide : Contrast Checker est un outil web qui calcule le rapport de contraste WCAG entre deux couleurs, fournissant des résultats en temps réel et notant votre contraste de couleur.

Ce que fait cet outil et ses caractéristiques principales

Contrast Checker est un outil web qui vous aide à calculer le rapport de contraste WCAG entre deux couleurs. Il fournit des résultats en temps réel et note votre contraste de couleur selon les normes WCAG (AA, AA Large, AAA).

Guide étape par étape d'utilisation

Ouvrez l'outil Contrast Checker.
Choisissez la couleur de premier plan (texte) en cliquant sur le sélecteur de couleur ou en saisissant le code hexadécimal dans le champ de texte.
Choisissez la couleur d'arrière-plan en cliquant sur le sélecteur de couleur ou en saisissant le code hexadécimal dans le champ de texte.
Visualisez le rapport de contraste et la note affichés en temps réel.

Sous

Formule sous-jacente / Logique technique Le rapport de contraste est calculé à l'aide de la formule suivante :

Rapport de contraste = (L1 + 0,05) / (L2 + 0,05)

où L1 et L2 sont respectivement les valeurs de luminance relatives des couleurs du premier plan et de l'arrière-plan. Exemples concrets

Exemple 1 : Premier plan : #000000 (noir), Arrière-plan : #ffffff (blanc) Rapport de contraste : 21,00, Niveau : AAA
Exemple 2 : Premier plan : #ffffff (blanc), Arrière-plan : #000000 (noir) Rapport de contraste : 21,00, Niveau : AAA
Exemple 3 : Premier plan : #808080 (gris), Arrière-plan : #ffffff (blanc) Rapport de contraste : 4,50, Niveau : AA

Comparaison ou Matrice de décision / Liste de contrôle

Rapport de contraste	Niveau WCAG
≥ 7,00	AAA
≥ 4,50	AA
≥ 3,00	AA Large

rt>

Erreurs courantes et comment les éviter

Erreur : Utiliser des couleurs avec des rapports de contraste faibles. Comment éviter : Vérifiez toujours le rapport de contraste et la note avant d'utiliser des couleurs dans vos conceptions.
Erreur : Ignorer les directives WCAG pour le contraste des couleurs. Comment éviter : Utilisez le vérificateur de contraste pour vous assurer que vos conceptions respectent les normes WCAG en matière d'accessibilité.

Questions fréquemment posées

Comment le vérificateur de contraste calcule-t-il le rapport de contraste ?

Le vérificateur de contraste calcule le rapport de contraste à l'aide de la formule (L1 + 0,05) / (L2 + 0,05), où L1 et L2 sont les valeurs de luminance relative des couleurs de premier plan et d'arrière-plan.

Quelle est la différence entre les notes AA, AA Large et AAA ?

La note AA exige un rapport de contraste de ≥ 4,50, AA LaLe niveau AA exige un rapport de contraste de ≥ 3,00, et le niveau AAA exige un rapport de contraste de ≥ 7,00.

Comment puis-je utiliser Contrast Checker pour améliorer l'accessibilité de mon site Web ?

Utilisez Contrast Checker pour calculer le rapport de contraste entre les couleurs de votre texte et de votre arrière-plan, et assurez-vous qu'il respecte les normes WCAG (AA, AA Large, AAA). Cela contribuera à améliorer l'accessibilité de votre site Web pour les utilisateurs malvoyants.