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 lightgray / gris clair.
Résultat du test de contraste entre les couleurs de fond lightgray et du texte
Règles 1.4.3(2) et 1.4.6(4)
WCAG AA (4.5:1): WCAG AAA (7:1) : Ratio : 1.5:1 texte 12pt, texte 13pt, texte 16pt
Règles 1.4.3(1) et 1.4.6(3)
WCAG AA (3:1) : WCAG AAA (4.5:1) : Ratio : 1.5:1 texte 14pt, texte 16pt, texte 18pt
Avec vos valeurs 14pt et normal
WCAG AA (4.5:1) :
WCAG AAA (7:1) :
Ratio : 1.5:1
Mon texte
Mon texte en niveau de gris
Exemple de code CSS
background-color : #d3d3d3;
color : #ffffff;
font-size : 14pt;
Proposition de couleurs pour 14pt et normal (en test) :
WCAG AA (4.5:1) : WCAG AAA (7:1) : Ratio : 4.7:1
T. : #595959, Ar. : #D3D3D3
WCAG AA (4.5:1) :
WCAG AAA (7:1) :
Ratio : 4.6:1
T. : #FFFFFF, Ar. : #757575
WCAG AA (4.5:1) :
WCAG AAA (7:1) :
Ratio : 7.3:1
T. : #3D3D3D, Ar. : #D3D3D3
WCAG AA (4.5:1) :
WCAG AAA (7:1) :
Ratio : 7:1
T. : #FFFFFF, Ar. : #595959
Codes 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 |
Que dit le Référentiel général d'amélioration de l'accessibilité (RGAA) sur la couleur
Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
RGAA #couleur