Notre vérificateur de contraste WCAG calcule en temps réel le ratio de contraste entre deux couleurs et indique si la combinaison respecte les critères d’accessibilité WCAG 2.1 niveaux AA et AAA, pour du texte normal, du texte large et des composants d’interface. Indispensable pour garantir l’accessibilité d’un site web, une exigence légale pour les acteurs publics en France et un standard de qualité pour toutes les agences de design web.

Qu’est-ce que le contraste WCAG ?

Les Web Content Accessibility Guidelines (WCAG) sont le standard international d’accessibilité du web, publié par le W3C. Parmi leurs critères, le ratio de contraste entre un texte et son fond est essentiel pour garantir la lisibilité des contenus aux personnes malvoyantes, daltoniennes, ou simplement aux utilisateurs dans des conditions de luminosité difficiles (écran en plein soleil, écran de mauvaise qualité).

Le ratio de contraste est un nombre qui compare la luminance relative de deux couleurs. Il varie de 1:1 (aucun contraste, invisible) à 21:1 (contraste maximal : noir pur sur blanc pur).

Les seuils WCAG à connaître

En tailles CSS, 18 pt correspond à environ 24 px, et 14 pt gras à environ 18,67 px en gras. En dessous, le texte est considéré comme « normal » et nécessite un contraste plus élevé pour rester lisible.

Niveau AA : l’obligation légale

En France, le Référentiel Général d’Amélioration de l’Accessibilité (RGAA) impose aux sites des services publics, administrations, établissements de santé et grandes entreprises un respect du niveau WCAG AA. C’est aussi un critère fréquent dans les appels d’offres privés et les exigences de marques soucieuses d’inclusion.

Niveau AAA : l’excellence accessible

Le niveau AAA va plus loin et garantit une lisibilité optimale, y compris pour des utilisateurs avec des déficiences visuelles importantes. Il n’est que rarement requis par la loi, mais constitue un objectif à viser pour les contenus critiques (formulaires, paiements, documentation médicale).

Cas concrets et exemples

Leçon importante : les couleurs accent vives (rose, orange, jaune) atteignent rarement le contraste AA sur fond blanc pour du texte normal. Elles sont parfaites pour des boutons, des titres ou des éléments larges, mais pas pour du texte courant. Préférez les utiliser en inversion (fond coloré + texte blanc) ou assombrir légèrement la couleur.

Comment corriger un contraste insuffisant

• Assombrir la couleur de texte si le fond est clair : passer de #999 à #666 double souvent le ratio.
• Éclaircir la couleur de fond si elle est trop saturée : un #F73760 devient plus lisible sur du #FEE2E8 que sur du #FFFFFF.
• Augmenter la taille de police : passer de 14 px à 20 px fait passer le texte en catégorie « large » et abaisse le seuil de 4,5 à 3.
• Mettre le texte en gras : un texte de 14 pt en gras (~18,67 px bold) entre dans la catégorie « large ».
• Ajouter une ombre ou un contour : sur une image de fond, un text-shadow peut sauver un contraste limite. À utiliser avec modération.
• Utiliser un fond alternatif : placer le texte sur un bandeau semi-transparent au lieu de directement sur l’image.

WCAG 3 et la nouvelle formule APCA

La future norme WCAG 3 (encore en brouillon en 2026) introduira une nouvelle formule de contraste appelée APCA (Accessible Perceptual Contrast Algorithm), qui reflète mieux la perception humaine que le ratio actuel. APCA tient compte de la polarité (texte foncé sur fond clair vs inverse), de la taille et du poids du texte dans un seul calcul. Les scores ne sont pas des ratios mais des valeurs Lc (lightness contrast) qui vont de 0 à ~106.

WCAG 3 n’est pas encore officiellement recommandé par le W3C, et la conformité légale en France reste fondée sur WCAG 2.1 / RGAA. Notre outil utilise donc la formule WCAG 2.1 classique, qui reste la référence en production.

Foire aux questions

Pourquoi un texte gris pâle est-il un problème ?

Un texte gris clair sur fond blanc (#999 sur #FFF) a un ratio d’environ 2,85:1, bien en dessous du minimum WCAG AA de 4,5:1 pour du texte normal. Il paraît « élégant » aux designers qui ont une vision parfaite, mais il devient illisible pour les utilisateurs âgés, les malvoyants, ou quiconque lit en plein soleil. Éviter absolument sur les contenus importants.

Le contraste s’applique-t-il aux images et icônes ?

Oui, mais avec un seuil plus bas (3:1) et seulement pour les icônes et graphiques qui transmettent une information essentielle (bouton « envoyer », pictogramme « avertissement »). Les images purement décoratives n’ont pas d’obligation de contraste, tant qu’elles sont accompagnées d’une alternative textuelle.

Quelle différence entre AA et AAA ?

AA est le niveau minimum légalement requis pour les sites publics français (via le RGAA) et une bonne pratique pour les sites privés. AAA est une exigence renforcée destinée aux contenus où la lisibilité est critique. En pratique, atteindre AAA sur un site grand public est difficile et peut nuire à l’esthétique. Viser AA partout est un objectif réaliste et conforme à la loi.

Le contraste est-il le seul critère d’accessibilité ?

Non, loin de là. WCAG 2.1 compte 78 critères au total, couvrant la navigation clavier, les lecteurs d’écran, les alternatives textuelles, les formulaires, les médias, les alertes visuelles, et bien d’autres aspects. Le contraste est un pilier, pas le seul. Pour un audit complet, utilisez des outils comme Lighthouse (intégré à Chrome), axe DevTools ou Wave.

Les couleurs sont-elles envoyées à un serveur ?

Non. L’outil calcule tout localement dans votre navigateur. Aucune donnée n’est transmise ni stockée.

Nos autres outils gratuits

• Convertisseur hex RGB HSL
• Générateur box-shadow CSS
• Convertisseur px rem em
• Générateur Open Graph tags