Accessibilité RGAA contraste avec la couleur #2C7F8C.

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 #2C7F8C et du texte

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

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

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

WCAG AA (3:1) : PasseWCAG AAA (4.5:1) : PasseRatio : 4.6:1
texte 14pt, texte 16pt, texte 18pt

Avec vos valeurs 14pt et normal

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

Exemple de code CSS

: #2c7f8c;
: #ffffff;
: 14pt;

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

WCAG AA (4.5:1) : Passe WCAG AAA (7:1) : Passe Ratio : 7.2:1
T. : #FFFFFF, Ar. : #215F69

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

NiveauObjectifExemple
AAtteindre un niveau d'accessibilité minimal.La couleur n'est pas le seul moyen visuel de véhiculer l'information.
AAAméliorer le niveau d'accessibilitéLes textes de petite taille ont un ratio de contraste au moins égal à 4.5
AAAAtteindre 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