Contraste
WCAG
accessible.
Verifiez instantanement le ratio de contraste entre deux couleurs selon les normes WCAG 2.1. 100 % navigateur, zero donnee envoyee.
Tout savoir sur le contraste et l'accessibilite
Pourquoi le contraste compte ?
Un contraste insuffisant rend le texte illisible pour les personnes malvoyantes, daltonniennes ou en situation de fatigue visuelle. Environ 1 personne sur 12 est daltonienne. Un bon contraste beneficie a tous les utilisateurs.
Obligations legales RGAA
En France, le RGAA impose le respect des criteres WCAG 2.1 niveau AA pour les sites publics et certaines entreprises privees. Le non-respect peut entrainer des sanctions financieres et une exclusion numerique.
Vie privee garantie
Le calcul du ratio de contraste est effectue localement dans votre navigateur via la formule officielle WCAG. Rien n'est envoye sur le reseau, rien n'est stocke, rien n'est journalise.
Vérifiez en quelques secondes si votre combinaison de couleurs texte/fond respecte les normes d’accessibilité WCAG 2.1. Entrez vos deux couleurs en HEX, RGB ou HSL, obtenez le ratio de contraste calculé et le résultat de conformité pour chaque niveau — AA, AAA — et pour chaque taille de texte. Aucune donnée n’est envoyée à un serveur : le calcul est réalisé intégralement dans votre navigateur.
Qu’est-ce que le ratio de contraste et comment se calcule-t-il
Le ratio de contraste est calculé selon la formule de luminance relative définie par le W3C : (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance de la couleur la plus claire et L2 celle de la plus sombre. Il varie de 1:1 (aucun contraste, deux couleurs identiques) à 21:1 (noir sur blanc, contraste maximal). Cette formule tient compte de la perception humaine de la luminosité et non de la valeur brute des composantes RVB.
Niveaux WCAG AA et AAA : quelles différences
La norme WCAG 2.1 (Web Content Accessibility Guidelines) définit deux niveaux de conformité pour le contraste. Le niveau AA — seuil légal minimum en France dans le cadre du RGAA — exige un ratio de 4.5:1 pour le texte normal (moins de 18pt ou 14pt en gras) et 3:1 pour le grand texte (18pt et plus, ou 14pt en gras). Le niveau AAA, plus strict, exige 7:1 pour le texte normal et 4.5:1 pour le grand texte. Les composants d’interface et éléments graphiques informatifs suivent les règles du grand texte (3:1 minimum en AA).
Pourquoi l’accessibilité des couleurs est obligatoire
En France, le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) impose le niveau AA aux services publics en ligne depuis la loi de 2005 renforcée en 2019. Pour les entreprises privées de plus de 250 millions d’euros de chiffre d’affaires, cette obligation s’applique également depuis 2023. Au-delà de la conformité légale, un contraste insuffisant impacte directement les utilisateurs malvoyants, daltoniens, et toute personne consultant votre interface dans des conditions d’éclairage difficiles.
Erreurs de contraste les plus fréquentes
En pratique, les erreurs de contraste les plus fréquentes sont le texte gris clair sur fond blanc (très courant dans les interfaces minimalistes), le texte coloré sur fond de la même teinte, le texte blanc sur fond de couleur vive non testée, et les placeholders de formulaires en gris trop clair. Cet outil permet de tester chaque combinaison avant intégration et d’ajuster la luminosité ou la saturation pour atteindre la conformité sans trahir la charte graphique.
Questions fréquentes
Tout savoir sur le contraste et l'accessibilité.
En France, le RGAA rend le niveau AA obligatoire pour les services publics en ligne et les entreprises privées dépassant 250 millions d'euros de CA. Pour les autres, ce n'est pas une obligation légale directe mais une bonne pratique forte : le contraste insuffisant affecte environ 8% des hommes (daltonisme) et toute personne utilisant un écran en plein soleil ou vieillissant. Ignorer l'accessibilité, c'est exclure une partie de votre audience.
Le niveau AA est le seuil standard recommandé et légalement requis dans de nombreux contextes. Il exige 4.5:1 pour le texte courant. Le niveau AAA est le niveau d'excellence (7:1 pour le texte courant) — difficile à atteindre sur l'ensemble d'un site sans sacrifier la lisibilité du design. L'objectif réaliste pour la plupart des projets web est d'atteindre AA sur 100% du contenu textuel et de viser AAA sur les éléments critiques (titres, CTA, navigation).
Dans la majorité des cas, il suffit d'assombrir légèrement la couleur de texte ou d'éclaircir le fond — souvent quelques points de luminosité suffisent. Pour une couleur de marque imposée, ajustez la luminosité (L en HSL) plutôt que la teinte (H) pour conserver l'identité visuelle. Si la contrainte est forte, testez le texte blanc sur la couleur de marque assombrie plutôt que la couleur de marque directe.
Oui, pour les composants d'interface porteurs d'information. Un bouton, une icône interactive ou un champ de formulaire doivent respecter le ratio 3:1 (niveau AA) entre leur couleur et le fond adjacent. Les éléments purement décoratifs (images de fond, séparateurs, icônes sans signification) ne sont pas concernés par la règle de contraste.
Parce que le ratio de contraste dépend de la luminance relative des deux couleurs comparées, pas de leur différence perçue de teinte. Le blanc a une luminance maximale (1.0) et le jaune une luminance élevée aussi — leur écart de luminance avec le vert est donc plus faible qu'avec le blanc. C'est pourquoi tester chaque combinaison réelle est indispensable : l'intuition visuelle ne remplace pas le calcul.
Le ratio de contraste est calcule directement dans votre navigateur selon la formule officielle WCAG 2.1 (luminance relative). Aucune donnee n'est transmise ni conservee par Osmova. Conditions d'utilisation