Color
Contrast

Vérifiez instantanément le contraste des couleurs selon les normes WCAG AA et AAA — pour les textes, boutons et composants UI.

Norme WCAG 2.14 critères vérifiésAperçu en direct

① Entrer la couleur de premier plan ② Entrer la couleur de fond ③ Vérifier le contraste WCAG

Premier plan (texte)

Arrière-plan

Presets:

WCAG AA

4.5:1 normal · 3:1 large

WCAG AAA

7:1 normal · 4.5:1 large

Non-text

3:1 UI components (1.4.11)

Qu'est-ce que le contraste de couleurs WCAG et pourquoi est-il important ?

Les WCAG (Web Content Accessibility Guidelines) définissent des rapports de contraste minimaux entre le texte et l'arrière-plan pour garantir la lisibilité aux utilisateurs malvoyants, y compris le daltonisme et la basse vision. Le niveau WCAG 2.1 AA exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA exige 7:1 et 4,5:1. Le rapport est calculé avec la luminance relative — mesure perceptuelle dérivée de la linéarisation RGB (0,2126R + 0,7152G + 0,0722B). Une vérification précoce garantit une accessibilité légale (ADA, EN 301 549, AODA).

Questions fréquemment posées

Le contraste de couleurs WCAG est une norme qui définit le rapport minimum de contraste entre le texte et son arrière-plan pour garantir la lisibilité aux utilisateurs malvoyants. Il est publié par le W3C dans le cadre des WCAG 2.1.

Le rapport est calculé à partir des valeurs de luminance relative dérivées des composantes RGB de chaque couleur. La formule est (L1 + 0,05) / (L2 + 0,05) où L1 est la couleur la plus claire et L2 la plus sombre.

WCAG AA est le niveau standard requis légalement : 4,5:1 pour le texte normal et 3:1 pour le grand texte. WCAG AAA est le niveau amélioré : 7:1 pour le texte normal et 4,5:1 pour le grand texte.

Le grand texte est au moins 18 points (environ 24px) normal ou 14 points (environ 18,67px) en gras. À ces tailles, des rapports légèrement inférieurs sont acceptés.

Pas nécessairement. Le contraste concerne la lisibilité, mais un design accessible implique aussi la taille de police, la lisibilité typographique, l'espacement et le contexte.

Collez les codes HEX de vos couleurs de marque ou UI dans les deux champs. Visez au moins le niveau AA pour tout le texte courant. Utilisez le bouton d'inversion pour tester rapidement les combinaisons inversées.

Le critère WCAG 2.1 1.4.11 (Contraste non textuel) exige au moins 3:1 pour les composants UI par rapport aux couleurs adjacentes. Le texte dans le bouton suit la règle standard de 4,5:1.

Qu'est-ce que le contraste de couleurs WCAG et pourquoi est-il important ?

Questions fréquemment posées

Explorez notre réseau