Vérificateur de contraste
Vérifiez si votre combinaison de couleurs respecte les normes d'accessibilité WCAG.
À propos de Vérificateur de contraste
Le Vérificateur de Contraste de Couleurs de GuruAlpha mesure le rapport de contraste entre les couleurs de premier plan et d'arrière-plan selon les normes WCAG (Règles pour l'Accessibilité des Contenus Web). Saisissez deux couleurs quelconques et l'outil calcule leur rapport de contraste, vous indiquant si la combinaison respecte les normes d'accessibilité AA ou AAA pour le texte normal et le grand texte.
L'accessibilité web est à la fois un impératif moral et une exigence légale. Les règles WCAG 2.1 établissent des rapports de contraste minimaux pour garantir que le texte soit lisible par les personnes ayant des déficiences visuelles, y compris le daltonisme, la basse vision et le déclin visuel lié à l'âge. Le vérificateur de contraste facilite la conformité en fournissant un retour instantané sur vos choix de couleurs.
L'outil calcule les rapports de contraste à l'aide de la formule de luminance relative spécifiée dans WCAG 2.1. Un rapport de 1:1 signifie aucun contraste (même couleur). Un rapport de 21:1 est le contraste maximal (noir sur blanc). Les exigences WCAG sont : le texte normal AA exige 4.5:1, le grand texte AA exige 3:1, le texte normal AAA exige 7:1 et le grand texte AAA exige 4.5:1. L'outil indique clairement si votre combinaison de couleurs atteint chaque seuil.
L'aperçu visuel montre la couleur de votre texte sur la couleur d'arrière-plan, vous offrant une vue réelle de la lisibilité. L'aperçu inclut des échantillons de texte normal (16px) et grand (24px+), car différentes tailles ont des exigences WCAG différentes. Les indicateurs réussite/échec se mettent à jour en temps réel à mesure que vous ajustez les couleurs.
Pour les développeurs et concepteurs web, le vérificateur de contraste est essentiel pour garantir que les sites web soient accessibles à tous les utilisateurs. Il s'intègre naturellement au flux de travail de conception : choisissez les couleurs, vérifiez le contraste, ajustez si nécessaire et poursuivez avec la certitude que votre texte est lisible.
Principales fonctionnalités de Vérificateur de contraste
- Calcul du rapport de contraste entre deux couleurs quelconques
- Vérification de la conformité WCAG AA et AAA
- Seuils pour texte normal (4.5:1) et grand texte (3:1)
- Aperçu en direct du texte sur l'arrière-plan
- Ajustements de couleur suggérés pour respecter les normes
- Prise en charge de la saisie HEX, RGB et HSL
- Fonctionne sur tous les appareils
- Aucune inscription requise
Comment utiliser Vérificateur de contraste
- Ouvrez le Vérificateur de Contraste sur GuruAlpha.
- Saisissez ou sélectionnez la couleur de premier plan (texte).
- Saisissez ou sélectionnez la couleur d'arrière-plan.
- Consultez le rapport de contraste et l'état de conformité WCAG.
- Vérifiez les exigences pour le texte normal et le grand texte.
- Ajustez les couleurs si la combinaison échoue.
- Utilisez les ajustements suggérés pour respecter AA ou AAA.
Conseils pour utiliser Vérificateur de contraste
- La conformité AA (4.5:1) est le minimum pour les sites web publics.
- La conformité AAA (7:1) est préférable pour une accessibilité maximale.
- Le grand texte (18px gras ou 24px normal) a des exigences de contraste plus faibles.
- Ne vous fiez pas uniquement à la couleur pour transmettre l'information : ajoutez des étiquettes de texte ou des motifs.
- Testez avec des simulateurs de daltonisme pour une vérification d'accessibilité supplémentaire.
Questions fréquentes sur Vérificateur de contraste
Qu'est-ce que le WCAG ?
Le WCAG (Règles pour l'Accessibilité des Contenus Web) est la norme internationale d'accessibilité web. Il définit les exigences pour rendre le contenu accessible aux personnes en situation de handicap.
De quel rapport de contraste ai-je besoin ?
Texte normal AA : 4.5:1. Grand texte AA : 3:1. Texte normal AAA : 7:1. Grand texte AAA : 4.5:1. Visez au moins la conformité AA.
Qu'est-ce qui est considéré comme du « grand texte » ?
18px (24pt) de poids normal ou 14px (18.66pt) de poids gras. Le grand texte a des exigences de contraste plus faibles car les caractères plus grands sont plus faciles à lire.
Cela vérifie-t-il les éléments non textuels ?
L'outil se concentre sur le contraste du texte. Le WCAG exige aussi un contraste de 3:1 pour les composants d'interface non textuels, que vous pouvez vérifier manuellement avec le même outil.