Vérificateur de contraste
Vérifiez le contraste pour WCAG
Comment utiliser Vérificateur de contraste
Vérifiez le contraste pour WCAG Outil gratuit en ligne, sans inscription, sans publicités intrusives. Utilisez maintenant.
Pourquoi le contraste des couleurs est-il important ?
Environ 8% des hommes et 0,5% des femmes ont une forme de déficience de la vision des couleurs. De plus, les gens lisent dans des conditions difficiles — forte lumière solaire, écrans de mauvaise qualité, fatigue ou yeux vieillissants. Un contraste de couleur suffisant garantit que votre contenu est lisible pour tous les utilisateurs, quelles que soient leurs conditions visuelles.
- Conformité à l'accessibilité web : Les WCAG 2.1 (Règles pour l'Accessibilité des Contenus Web) définissent des ratios de contraste minimaux. En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) rend l'accessibilité numérique obligatoire pour les services publics et certaines entreprises privées, avec des exigences de contraste précises.
- Révision de design : Vérifiez les combinaisons de couleurs de texte et d'arrière-plan pendant la phase de design, avant le développement. Il est beaucoup moins coûteux de corriger les problèmes de contraste dans Figma qu'après le lancement.
- Bibliothèques de composants : Vérifiez que chaque combinaison de couleurs dans votre système de design — texte sur couleur primaire, texte sur couleur secondaire, états désactivés — répond aux exigences d'accessibilité dans tous les contextes d'utilisation.
- Mode sombre : Lors de l'implémentation du mode sombre, les couleurs qui fonctionnaient sur des fonds clairs échouent souvent sur des fonds sombres. Chaque mode nécessite une vérification de contraste indépendante.
- Visualisation de données : Assurez-vous que les couleurs des graphiques sont distinguables par les utilisateurs daltoniens et lisibles sur différentes couleurs d'arrière-plan — important pour les tableaux de bord et rapports utilisés en entreprise.
Niveaux WCAG et RGAA : Niveau A est le minimum absolu. Niveau AA (ratio ≥ 4,5:1 pour le texte normal, ≥ 3:1 pour le texte large) est la norme légale dans la plupart des juridictions et le niveau cible du RGAA français. Niveau AAA (ratio ≥ 7:1) est pour la plus haute accessibilité.
Frequently Asked Questions
Quel ratio de contraste est requis par WCAG AA et RGAA ?
WCAG AA et RGAA requièrent un ratio minimum de contraste de 4,5:1 pour le texte normal (en dessous de 18pt ou 14pt en gras) et 3:1 pour le texte large (18pt ou plus, ou 14pt en gras ou plus). Les composants UI et éléments graphiques (icônes, bordures de formulaire) nécessitent 3:1. Ce sont des minimums — un contraste plus élevé est toujours meilleur pour la lisibilité générale.
Comment le ratio de contraste est-il calculé ?
Ratio de contraste = (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre. La luminance est calculée à partir des valeurs RGB linéaires selon une formule spécifique. Le contraste maximum est 21:1 (noir sur blanc). Un ratio de 1:1 signifie aucun contraste — couleurs identiques.
Le ratio de contraste s'applique-t-il au texte coloré sur des fonds colorés ?
Oui — la formule WCAG compare la luminance relative, pas seulement la luminosité perçue. Du texte rouge sur fond vert peut avoir un faible contraste même si les deux sont des couleurs vives. Testez toujours les combinaisons de couleurs réelles — ne faites pas confiance à l'intuition visuelle car la luminance perçue peut tromper.
Quelle est la différence entre contraste des couleurs et daltonisme ?
Le ratio de contraste mesure la différence de luminance — cela concerne tous les utilisateurs, y compris ceux ayant une vision normale des couleurs (particulièrement en forte lumière ou sur des écrans de mauvaise qualité). Le daltonisme affecte comment les couleurs sont distinguées, pas nécessairement leur luminance. Un design à fort contraste utilisant uniquement rouge et vert passe le test de luminance mais peut être indiscernable pour les utilisateurs daltoniens rouge-vert.
Le poids de la police affecte-t-il les exigences de contraste ?
Oui. Le texte en gras et le texte large ont des exigences minimales plus basses car ils sont intrinsèquement plus faciles à lire. WCAG AA requiert 3:1 pour le texte de 18pt (24px) ou plus, ou 14pt (environ 18,67px) en gras. Pour le texte plus petit ou sans gras, l'exigence est 4,5:1.
Vérificateur de contraste vs simulateur de daltonisme vs audit d'accessibilité
Un vérificateur de contraste vérifie le ratio de luminance entre deux couleurs spécifiques. Un simulateur de daltonisme (Coblis, DevTools de Chrome) montre comment un design apparaît avec différents types de déficience visuelle. Un audit d'accessibilité complet (axe, Lighthouse, WAVE) scanne une page entière pour toutes les violations WCAG et RGAA. Pour une accessibilité complète : vérifiez le contraste pendant la phase de design, simulez le daltonisme avant le lancement et exécutez des audits automatisés sur le site en production.