Cette application va vous permettre de vérifier que le contraste entre la couleur d'un texte et son arrière-plan est suffisamment grand pour que le texte soit correctement lu. Se base sur les recommandations WCAG 2.0.
Si vous avez besoin de convertir des unités CSS, vous pouvez utiliser le convertisseur d'unités CSS.
Accessibilité RGAA contraste avec la couleur #EB1700.
Résultat du test de contraste entre les couleurs de fond #EB1700 et du texte
Règles 1.4.3(2) et 1.4.6(4)
WCAG AA (4.5:1): WCAG AAA (7:1) : Ratio : 4.5:1Règles 1.4.3(1) et 1.4.6(3)
WCAG AA (3:1) : WCAG AAA (4.5:1) : Ratio : 4.5:1Avec vos valeurs 14pt et normal
Exemple de code CSS
background-color : #EB1700;
color : #ffffff;
font-size : 14pt;
Proposition de couleurs pour 14pt et normal (en test) :
WCAG AA (4.5:1) : WCAG AAA (7:1) : Ratio : 7.4:1Codes des couleurs
Recommandations WCAG 2.0 pour les couleurs
Règle 1.4.3, pour obtenir le niveau AA.
(1)Le texte (ou les images de texte informatif) d'au moins 18 points ou d'au moins 14 points gras (ou une taille de caractère équivalente pour les polices chinoises, japonaises ou coréennes) devrait posséder un contraste de luminosité d’au moins 3 pour 1 avec son arrière-plan.
(2)Sinon le texte (ou les images de texte informatif) devrait posséder un contraste de luminosité d'au moins 4.5 pour 1 avec son arrière-plan.
Aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque.
Règle 1.4.6, pour obtenir le niveau AAA.
(3)Le texte (ou les images de texte informatif) d'au moins 18 points ou d'au moins 14 points en gras (ou une taille de caractère équivalente pour les polices chinoises, japonaises ou coréennes) devrait posséder un contraste de luminosité d’au moins 4.5 pour 1 avec son arrière-plan.
(4)Sinon le texte (ou les images de texte informatif) devrait posséder un contraste de luminosité d’au moins 7 pour 1 avec son arrière-plan.
Aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque.
Les niveaux d'accessibilité WCAG 2.0
Niveau | Objectif | Exemple |
---|---|---|
A | Atteindre un niveau d'accessibilité minimal. | La couleur n'est pas le seul moyen visuel de véhiculer l'information. |
AA | Améliorer le niveau d'accessibilité | Les textes de petite taille ont un ratio de contraste au moins égal à 4.5 |
AAA | Atteindre un niveau supérieur d'accessibilité. | Les textes de petite taille ont un ratio de contraste au moins égal à 7 |