Vérificateur de contraste – Rapport de contraste WCAG

Vérifier le contraste des couleurs pour l'accessibilité

Le contraste des couleurs est essentiel à la lisibilité. Lorsque le texte au premier plan ne se détache pas suffisamment de l'arrière-plan, il devient difficile à lire — en particulier pour les personnes malvoyantes ou présentant des déficiences de la vision des couleurs.

Ce vérificateur de contraste calcule le rapport de contraste entre deux couleurs et l'évalue selon les critères de réussite WCAG 2.1. Saisissez des couleurs au format HEX, RGB ou HSL et obtenez des résultats instantanés.

Comprendre les niveaux de contraste WCAG

Les Directives pour l'accessibilité des contenus Web (WCAG) définissent des rapports de contraste minimaux pour la lisibilité du texte. Il existe deux niveaux de conformité :

• WCAG AA Texte normal — requiert un rapport de contraste d'au moins 4,5:1
• WCAG AA Grand texte — requiert un rapport de contraste d'au moins 3:1 (le grand texte correspond à 18pt+ ou 14pt+ en gras)
• WCAG AAA Texte normal — requiert un rapport de contraste d'au moins 7:1
• WCAG AAA Grand texte — requiert un rapport de contraste d'au moins 4,5:1

AA est le niveau standard que la plupart des sites web et applications visent. AAA est le niveau renforcé, recommandé lorsque la lisibilité maximale est importante.

Comment utiliser le vérificateur de contraste

1. Saisissez une couleur de premier plan (texte) — HEX, RGB ou HSL
2. Saisissez une couleur d'arrière-plan dans un format pris en charge
3. Consultez le rapport de contraste et un aperçu en direct du texte sur l'arrière-plan
4. Vérifiez les résultats réussite/échec pour les niveaux WCAG AA et AAA
5. Utilisez le bouton d'inversion pour intervertir rapidement les couleurs de premier plan et d'arrière-plan

Quand vérifier le contraste des couleurs

• Lors du choix des couleurs de texte et d'arrière-plan pour un site web ou une application
• Pour vérifier qu'un système de design respecte les exigences d'accessibilité
• Pour tester les couleurs de boutons, de liens ou d'icônes par rapport à leur arrière-plan
• Pour vérifier les combinaisons de couleurs en mode sombre
• Pour respecter les normes légales d'accessibilité (ADA, EAA, Section 508)

Précis, instantané et gratuit

Cet outil calcule le rapport de contraste WCAG 2.1 en utilisant la formule standard de luminance relative. Les résultats sont calculés instantanément dans votre navigateur — aucune donnée n'est envoyée à un serveur.

Besoin de trouver ou de convertir une couleur d'abord ? Utilisez le Sélecteur de couleurs pour extraire des couleurs d'une image, ou le Convertisseur de couleurs pour basculer entre HEX, RGB et HSL.

Questions fréquentes

Quel est un bon rapport de contraste pour le texte ?

Pour du texte de taille normale, un rapport de contraste d'au moins 4,5:1 est requis pour satisfaire le niveau WCAG AA. Pour le grand texte (18pt ou 14pt en gras et plus), le minimum est de 3:1. Pour le niveau d'accessibilité le plus élevé (WCAG AAA), le texte normal nécessite au moins 7:1.

Quelle est la différence entre WCAG AA et AAA ?

AA est le niveau de conformité standard que la plupart des sites web et applications devraient respecter. AAA est le niveau renforcé avec des exigences de contraste plus strictes, recommandé pour les contenus où la lisibilité maximale est primordiale, comme les sites gouvernementaux ou de santé.

Qu'est-ce qui compte comme grand texte dans les WCAG ?

Le grand texte est défini comme un texte de 18 points (24px) ou plus en graisse normale, ou de 14 points (environ 18,66px) ou plus en gras. Le grand texte a des exigences de contraste plus faibles car sa taille le rend intrinsèquement plus facile à lire.

Quels formats de couleurs ce vérificateur prend-il en charge ?

Vous pouvez saisir des couleurs en HEX (par ex. #1E293B), RGB (par ex. rgb(30, 41, 59)) ou HSL (par ex. hsl(222, 33%, 17%)). L'outil détecte automatiquement le format.

Comment le rapport de contraste est-il calculé ?

Le rapport de contraste est calculé selon la formule WCAG 2.1 : (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la couleur la plus foncée. Le résultat va de 1:1 (aucun contraste) à 21:1 (contraste maximum, noir sur blanc).

Cet outil fonctionne-t-il sur mobile ?

Oui. Le vérificateur de contraste fonctionne sur tout appareil disposant d'un navigateur moderne — ordinateur, tablette ou téléphone.

Cet outil est-il gratuit ?

Oui. ColourPicker.app est entièrement gratuit, sans inscription requise.

Puis-je vérifier le contraste pour des composants d'interface, pas seulement du texte ?

WCAG 2.1 exige également un rapport de contraste minimum de 3:1 pour les composants d'interface significatifs et les objets graphiques (Critère de réussite 1.4.11). Vous pouvez utiliser ce vérificateur pour contrôler ces combinaisons également — le calcul du rapport est identique.