common.you_need_to_be_loggedin_to_add_tool_in_favorites
Vérificateur de contraste de couleur
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
WCAG Compliance
Normal Text
Large Text (18pt+ or 14pt+ bold)
UI Components & Graphics
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Comment fonctionne notre vérificateur de contraste de couleurs
Saisissez vos couleurs de premier plan et d'arrière-plan à l'aide des valeurs hexadécimales RVB, ou sélectionnez-les directement avec le Sélecteur de couleurs.
- Ajustez Alpha pour modifier le degré de transparence de la couleur de premier plan.
- Utilisez le curseur Luminosité pour rendre la couleur plus claire ou plus foncée.
Notre outil calcule ensuite le rapport de contraste et le vérifie par rapport aux directives WCAG :
- WCAG 2.0 niveau AA
- Au moins 4,5:1 pour le corps du texte normal
- Au moins 3:1 pour les gros textes
- WCAG 2.1 (interface utilisateur et graphiques)
- Au moins 3:1 pour les icônes, les bordures et autres composants de l'interface
- WCAG Niveau AAA
- Au moins 7:1 pour un texte normal
- Au moins 4,5:1 pour les textes volumineux
Un texte de grande taille signifie :
- 14 pts (environ 18,66 px) et gras, ou
- 18 pts (environ px) ou plus grand
Vous pouvez utiliser la pipette dans le sélecteur de couleurs pour saisir les couleurs exactes de n'importe quel élément de votre écran.
Pour les liens qui reposent uniquement sur la couleur pour se démarquer, utilisez notre vérificateur de contraste de couleurs pour vous assurer qu'ils répondent aux normes d'accessibilité et restent faciles à lire pour tout le monde.