Balou Tools

Vérificateur de Contraste (WCAG)

Calcule le rapport de contraste entre deux couleurs selon les directives WCAG 2.1 (AA/AAA).

Vérificateur de contraste des couleurs (WCAG 2.1)

4.47 : 1
Rapport de contraste
Accessibilité WCAG 2.1
Texte normal Plus petit que 18pt (env. 24px)
AA Échec AAA Échec
Grand texte Plus grand que 18pt ou 14pt en gras
AA Réussi AAA Échec
Éléments UI / icônes Contrôles et graphiques informatifs
AA Réussi

Aperçu

Grand titre

Ceci est un exemple de texte courant. La lisibilité dépend fortement du rapport de contraste entre la couleur de premier plan et celle d’arrière-plan.

Exemple d’application
Bouton

L’aperçu ci-dessus montre les couleurs exactes. Utilisez un rapport de contraste de **4.5:1** pour le texte courant (AA) et **3:1** pour les grands textes afin d’assurer une bonne accessibilité.

WCAG 2.2 / APCA-Light

APCA-Light: Lc 62
Améliorer le contraste

Le texte normal devrait atteindre au moins 4.5:1.

APCA-Light est fort

Lc 62

Suggestions de palette
#1B1EA9 11.63:1
#3336C1 8.61:1
#4B4ED9 6.19:1

Guide & bonnes pratiques

Contrast Checker pour un contraste couleur conforme WCAG

Assurez-vous que texte et UI offrent un contraste suffisant – avec ratio de contraste et évaluation AA/AAA claire.

Cas d’utilisation typiques

Idéal pour les audits d’accessibilité, les design systems, la conformité accessibilité et la revue de thèmes.

Comment Balou calcule le contraste

Vous saisissez la couleur de premier plan et d’arrière-plan (HEX/RGB) ; Balou calcule le ratio et l’évalue selon les seuils WCAG.

Bonnes pratiques couleurs accessibles

Visez au moins AA (4,5:1 texte normal), vérifiez aussi le grand texte et les composants UI et testez les états hover/focus.

Questions fréquentes

Quel ratio de contraste satisfait WCAG AA ?

Au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (à partir d’environ 18 pt ou 14 pt gras).

Quelle différence entre AA et AAA ?

AAA est plus strict et exige 7:1 pour le texte normal et 4,5:1 pour le grand texte.

Le contraste s’applique-t-il aux icônes et à l’UI ?

Oui, les éléments non textuels comme icônes et contrôles exigent au moins 3:1 (WCAG 1.4.11).

HEX ou RGB – est-ce important ?

Non, les deux décrivent la même couleur ; le ratio de contraste est identique.