Vérificateur de contraste des couleurs
Vérifier WCAG AA et AAA contraste texte pour les couleurs opaques de hexagone. Prévisualisez votre paire, échangez des couleurs et appliquez une alternative de texte plus contrastante.
Rapport contraste
Color contrast report
Text: #777777 Background: #ffffff Contrast ratio: 4.4781:1
- AA · normal text: Fail (requires 4.5:1)
- AA · large text: Pass (requires 3:1)
- AAA · normal text: Fail (requires 7:1)
- AAA · large text: Fail (requires 4.5:1)
Large text: at least 24 CSS px, or approximately 18.67 CSS px when bold. This checks opaque sRGB text contrast only, not overall accessibility.
Le texte exporté reste en anglais ; vos saisies sont conservées telles quelles.
Pas d'inscription. Pas de crédits d'IA. Cet outil assemble votre sortie dans votre navigateur.
D'une idée à quelque chose d'utile.
- 01
Entrez les couleurs de texte et de fond.
- 02
Examiner le ratio calculé et les seuils normaux ou à grands textes.
- 03
Essayez une couleur de texte suggérée et exportez le résultat.
Un peu de contexte.
Les ratios de contraste utilisent les WCAG formule relative de luminance pour les couleurs sRGB opaques. AA texte normal nécessite 4.5:1 et AA grand texte nécessite 3:1. Le texte gros signifie généralement au moins 24 CSS pixels, ou environ 18,67 CSS pixels en gras. Le rapport brut détermine le résultat avant l'arrondi. C'est une vérification de couleur, pas un audit d'accessibilité.
Bonnes questions.
Puis-je entrer dans les couleurs transparentes?
C'est pas vrai. Utiliser des valeurs opaques à trois ou six chiffres. Couleurs composites transparentes sur leur arrière-plan final avant de mesurer.
Est-ce qu'un rapport de passage signifie que ma page est accessible ?
C'est pas vrai. La navigation par clavier, la sémantique, la focalisation, le calibrage lisible et d'autres exigences doivent encore être testées. L'outil n'évalue que cette paire texte/arrière-plan.