Passer au contenu principal
Calnex LogoCalnex
design

Vérificateur de Contraste de Couleurs

Vérifiez les ratios de contraste des couleurs selon les directives d'accessibilité WCAG 2.1. Teste la conformité AA et AAA pour le texte normal et grand.

Paramètres

Couleur du texte ou de l'élément.

Couleur d'arrière-plan à tester.

Résultats

Rapport de contraste21:1

Le rapport de contraste entre les deux couleurs

Autres résultats (6)
Texte normal WCAG AA (≥4,5:1)
PASS ✓

Le texte normal (moins de 18 pt ou 14 pt en gras) répond aux exigences WCAG AA

WCAG AA Texte large (≥3:1)
PASS ✓

Le texte de grande taille (18 pt+ ou 14 pt+ gras) répond aux exigences WCAG AA

Texte normal WCAG AAA (≥7:1)
PASS ✓

Le texte normal répond aux exigences plus strictes des WCAG AAA

WCAG AAA Texte grand (≥4,5:1)
PASS ✓

Les textes volumineux répondent aux exigences plus strictes des WCAG AAA

Luminance du premier plan0

Relative luminance of #000000

Luminance de fond1

Relative luminance of #FFFFFF

Pourquoi choisir Vérificateur de Contraste de Couleurs

Le Color Contrast Checker teste le rapport de contraste entre une couleur de premier plan et une couleur d’arrière-plan par rapport aux directives WCAG 2.1. Vérifiez instantanément si votre combinaison de couleurs est conforme aux normes AA et AAA pour les textes normaux et de grande taille.

  • ✓Calcule le rapport de contraste à l'aide de la formule de luminance relative WCAG 2.1
  • ✓Teste les quatre niveaux de conformité WCAG : AA/AAA pour les textes normaux et de grande taille
  • ✓Affiche les valeurs de luminance relatives pour les deux couleurs
  • ✓Utilise les entrées du sélecteur de couleurs pour une sélection facile des couleurs

Comment utiliser

  1. 1Choisissez votre couleur de premier plan (texte) à l'aide du sélecteur de couleurs
  2. 2Choisissez votre couleur de fond à l'aide du sélecteur de couleurs
  3. 3Visualisez immédiatement le rapport de contraste affiché
  4. 4Vérifiez les résultats de réussite/échec des WCAG AA et AAA pour les textes normaux et volumineux.
  5. 5Ajustez les couleurs jusqu'à ce que votre combinaison dépasse le niveau requis

Questions fréquentes (FAQ)

Qu'est-ce qu'un bon rapport de contraste pour l'accessibilité du Web ?

WCAG 2.1 nécessite un rapport de contraste minimum de 4,5 : 1 pour le texte normal (niveau AA) et de 3 : 1 pour le texte de grande taille. Pour la conformité AAA, le texte normal a besoin de 7:1 et le texte volumineux a besoin de 4,5:1. Le noir sur blanc (21:1) représente le contraste maximum possible.

Qu'est-ce qui est considéré comme un « texte volumineux » dans les WCAG ?

WCAG définit le texte volumineux comme étant en gras d'au moins 18 pts (24 px) ou 14 pts (18,66 px). Les textes volumineux nécessitent moins de contraste, car ils sont plus faciles à lire avec des taux de contraste inférieurs.

Comment est calculé le rapport de contraste ?

The contrast ratio uses relative luminance values: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker. Luminance is calculated using the WCAG formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, with each channel linearized from sRGB.

Cet outil vérifie-t-il l'accessibilité des daltoniens ?

Cet outil vérifie le contraste basé sur la luminance, ce qui profite à tous les utilisateurs, y compris ceux souffrant de déficiences de vision des couleurs. Cependant, il ne simule pas des types spécifiques de daltonisme. Pour les tests de daltonisme, utilisez un simulateur de daltonisme dédié.

Quel est le rapport de contraste minimum requis par la loi ?

De nombreuses réglementations en matière d'accessibilité (ADA, section 508, EN 301 549) font référence au WCAG 2.1 niveau AA comme norme, qui exige 4,5 : 1 pour le texte normal. Les sites Web gouvernementaux et éducatifs de nombreux pays sont légalement tenus de respecter ce niveau.

Références & sources autorisées

WCAG 2.1 Understanding Contrast (Minimum)

Voir la source

Relative Luminance - WCAG Definition

Voir la source

WebAIM Contrast Checker

Voir la source