Tester le contraste des couleurs

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 .

#
#

Résultat du test de contraste entre les couleurs de fond et du texte

Règles 1.4.3(2) et 1.4.6(4)

WCAG AA (4.5:1): Echec WCAG AAA (7:1) : Echec Ratio : 2.2:1
texte 12pt, texte 13pt, texte 16pt

Règles 1.4.3(1) et 1.4.6(3)

WCAG AA (3:1) : Echec WCAG AAA (4.5:1) : Echec Ratio : 2.2:1
texte 14pt, texte 16pt, texte 18pt

Avec vos valeurs 14pt et normal

WCAG AA (4.5:1) : Echec WCAG AAA (7:1) : Echec Ratio : 2.2:1
Mon texte
Mon texte en niveau de gris

Exemple de code CSS

: #BFAA8F;
: #ffffff;
: 14pt;

Proposition de couleurs pour 14pt et normal (en test) :

WCAG AA (4.5:1) : Passe WCAG AAA (7:1) : Echec Ratio : 4.6:1
T. : #404040, Ar. : #BFAA8F
WCAG AA (4.5:1) : Passe WCAG AAA (7:1) : Echec Ratio : 4.5:1
T. : #FFFFFF, Ar. : #8B7250
WCAG AA (4.5:1) : Passe WCAG AAA (7:1) : Passe Ratio : 7.2:1
T. : #212121, Ar. : #BFAA8F
WCAG AA (4.5:1) : Passe WCAG AAA (7:1) : Passe Ratio : 7.1:1
T. : #FFFFFF, Ar. : #68553C

Codes des couleurs

Couleur Web "white (blanc) / #FFFFFF"
Couleur Web "- / #BFAA8F"
Nom -
Couleur Web "- / #404040"
Nom -
Couleur Web "- / #8B7250"
Nom -
Couleur Web "- / #212121"
Nom -
Couleur Web "- / #68553C"
Nom -

Recommandations 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