FR
Deutsch
English
Español
ItalianoVérificateur de contraste gratuit selon WCAG 2.2
Votre contraste est-il suffisant ? Vérifié en une seconde.
Un contraste trop faible est le défaut d'accessibilité le plus fréquent. Testez deux couleurs selon WCAG 2.2, ou scannez directement tout votre site à la recherche de problèmes de contraste.
Voici votre titre
Et voici comment se lit un texte courant dans cette combinaison. Tous vos visiteurs peuvent-ils le lire sans effort ?
Mesure automatique selon la formule WCAG, sans garantie. Elle ne remplace ni une revue manuelle par des professionnels ni un conseil juridique.
Scanner tout le site à la recherche de défauts de contraste
Les paires de couleurs sont un début. Le scan trouve chaque endroit au contraste insuffisant sur jusqu'à 10 pages, sur ordinateur et smartphone, avec les valeurs exactes.
Environ deux minutes
Ce qu'est le contraste des couleurs et pourquoi il compte
Le contraste détermine si vos contenus sont lisibles pour tous vos visiteurs. Et c'est l'un des rares aspects de l'accessibilité qui se mesure avec précision.
Le contraste des couleurs décrit la différence de luminosité entre deux couleurs, par exemple entre votre texte et le fond derrière lui. Les Web Content Accessibility Guidelines (WCAG) le mesurent comme un ratio de contraste sur une échelle de 1:1 (une couleur sur la même couleur) à 21:1 (noir sur blanc). Le calcul repose sur la luminance relative des deux couleurs, c'est-à-dire la luminosité perçue par l'œil humain.
Pourquoi c'est important : des millions de personnes vivent avec une déficience visuelle, et environ quatre pour cent de la population ont un trouble de la vision des couleurs. S'y ajoute la vie quotidienne, car dès la mi-quarantaine, la sensibilité au contraste de l'œil baisse de façon mesurable. Ce qui paraît élégant à un œil jeune sur un écran calibré est tout simplement illisible pour de nombreux visiteurs.
Dans le même temps, le contraste insuffisant est le défaut d'accessibilité le plus fréquent de tout le web : les grandes études comme le WebAIM Million le trouvent année après année sur environ quatre pages d'accueil sur cinq. La cause est rarement la mauvaise volonté, mais une tendance de design : le texte gris clair sur fond blanc paraît moderne et sobre, mais échoue régulièrement face à la référence WCAG.
Enfin, le contraste est une question juridique : la loi européenne sur l'accessibilité exige, via la norme européenne EN 301 549, la conformité aux WCAG niveau AA, règles de contraste comprises. Pour les entreprises concernées, un texte trop pâle n'est plus un détail esthétique, mais une infraction mesurable.
Ce que signifie le ratio de contraste
Les WCAG mesurent le contraste comme le rapport entre la luminance du texte et celle du fond, de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
4,5:1 pour le texte normal (AA)
Le niveau obligatoire pour le texte courant selon WCAG 1.4.3, et donc la référence de la loi européenne sur l'accessibilité. Le gris sur blanc échoue ici le plus souvent.
3:1 pour le grand texte et l'UI (AA)
À partir de 24 px (ou 18,5 px en gras), 3:1 suffit. Le même ratio s'applique selon WCAG 1.4.11 aux composants d'interface : bordures de boutons, icônes, champs de formulaire.
7:1 pour l'exigence maximale (AAA)
Le niveau pour les personnes fortement malvoyantes. Pas une obligation légale, mais un bon objectif pour les textes importants.
Ce qu'on oublie souvent
Le contraste s'applique aussi au texte sur images, aux placeholders de formulaires, aux liens dans le texte et au contour de focus. Exactement ce que trouve le scan du site.
Qui un faible contraste exclut
Les défauts de contraste ne touchent pas qu'un petit groupe marginal. Ils rendent votre site fatigant ou inutilisable pour une part étonnamment grande de vos visiteurs.
Personnes malvoyantes
Cataracte, maladies de la rétine ou forte amétropie réduisent nettement la sensibilité au contraste. Un texte pâle se fond alors dans le fond.
Troubles de la vision des couleurs
Environ un homme sur douze distingue à peine le rouge du vert. Si un lien ne se différencie du texte que par sa teinte, il est invisible pour ces visiteurs.
Visiteurs âgés
Le cristallin se trouble avec les années et laisse passer moins de lumière. Vers 60 ans, l'œil a besoin de plusieurs fois plus de contraste qu'à vingt ans.
Tous ceux qui surfent dehors
Le soleil sur l'écran du smartphone transforme les contrastes faibles en gris uniforme. Qui veut commander en déplacement et ne lit rien, commande ailleurs.
Utilisateurs d'écrans basiques
Vieux moniteurs, vidéoprojecteurs et dalles bon marché affichent des couleurs plus fades que le MacBook du designer. Un contraste à la limite y bascule définitivement dans l'illisible.
Tout le monde en cas de fatigue
Le soir, sous un éclairage faible ou après huit heures d'écran, la performance de contraste de chaque œil baisse. Un bon contraste est un confort pour tous, pas seulement une obligation pour quelques-uns.
Les cinq défauts de contraste les plus fréquents
Sur des milliers de scans, nous retrouvons toujours les mêmes schémas. Vérifiez votre site précisément sur ces cinq classiques.
- 1
Texte gris clair sur fond blanc
Le grand classique : un texte courant en #999999 ou plus clair paraît discret, mais n'atteint qu'environ 2,8:1 sur blanc au lieu des 4,5:1 exigés. Dates, légendes d'images et textes de pied de page sont les plus touchés.
- 2
Placeholders dans les formulaires
Le texte d'exemple gris dans un champ devient un vrai contenu dès qu'il est le seul libellé. Les placeholders par défaut de nombreux frameworks sont bien en dessous de 4,5:1 et laissent les visiteurs deviner ce qui va dans le champ.
- 3
Texte blanc sur photos et dégradés
Sur la zone sombre de l'image, le contraste passe ; sur la zone claire, plus du tout. Comme les images se déplacent selon la largeur d'écran, un texte sur image a besoin d'un assombrissement ou d'un aplat de couleur derrière lui.
- 4
Liens différenciés uniquement par la couleur
Un lien bleu pâle dans un texte gris a besoin de 3:1 de contraste avec le texte environnant, plus un second indice comme un soulignement. Sinon, beaucoup de visiteurs ne trouvent jamais vos cibles de clic les plus importantes.
- 5
Boutons, icônes et contours de focus pâles
Depuis WCAG 2.1, les composants graphiques exigent aussi 3:1 : bordures de boutons, contours de champs, icônes et le cadre qui montre aux utilisateurs du clavier où ils se trouvent. Exactement les endroits que les revues de design ratent le plus.
Améliorer le contraste sans sacrifier le design
Un contraste accessible ne signifie pas noir sur blanc. De petits ajustements ciblés suffisent le plus souvent.
Assombrir les couleurs avec précision
Il ne manque souvent qu'un cran : un gris trop clair devient #595959, le bleu de marque pâle reçoit une variante plus sombre pour le texte. La palette garde son caractère, et le vérificateur ci-dessus montre aussitôt quand c'est bon.
Utiliser la taille de police comme levier
Le grand texte dès 24 px (ou 18,5 px en gras) n'exige que 3:1 au lieu de 4,5:1. Une police un peu plus grande ou plus grasse peut rendre une couleur plus claire conforme, surtout pour les titres sur fonds colorés.
Ne jamais miser sur la seule couleur
Souligner les liens, signaler les erreurs aussi par une icône et un texte, ne pas marquer les champs obligatoires uniquement en rouge. Là où existe un second indice, la compréhension ne dépend plus de la vision des couleurs.
Vérifier tous les états
Survol, focus, liens visités et éléments désactivés ont leurs propres couleurs, souvent oubliées dans les chartes graphiques. Vérifiez chaque couleur d'état individuellement, le scan les mesure directement à l'état rendu.
Comment bien vérifier votre contraste
Quatre étapes, de la couleur isolée au site durablement propre.
- 1
Tester une paire de couleurs
Saisissez la couleur du texte et du fond ci-dessus. Le ratio et tous les niveaux WCAG sont calculés instantanément, avec aperçu en direct.
- 2
Scanner le site
Le scan vérifie jusqu'à 10 pages et trouve chaque endroit au contraste insuffisant, avec les valeurs mesurées.
- 3
Corriger avec le rapport
Le rapport montre chaque élément concerné avec la valeur actuelle et la valeur requise. Ajuster les couleurs, relancer le scan, cocher.
- 4
Sécuriser durablement
Avec le monitoring, votre site est revérifié régulièrement. Si un gris pâle se glisse dans une refonte, vous le savez aussitôt.
Le cadre juridique : du standard à l'obligation
Quatre référentiels s'imbriquent et transforment une recommandation de design en exigence légale.
WCAG 2.2
Le standard international du W3C. Le critère 1.4.3 exige 4,5:1 pour le texte normal (niveau AA), le 1.4.6 exige 7:1 (niveau AAA), le 1.4.11 exige 3:1 pour les composants d'interface et les graphiques.
EN 301 549
La norme européenne pour l'informatique accessible. Elle adopte les WCAG niveau AA comme référence contraignante et sert d'étalon technique à toute la législation européenne sur l'accessibilité.
Loi européenne sur l'accessibilité
La directive UE 2019/882, applicable depuis le 28 juin 2025 à de nombreux sites, boutiques et applications. Elle garantit des exigences comparables dans toute l'UE : qui vend en Europe ne peut contourner le niveau AA nulle part.
Transpositions nationales (RGAA, etc.)
Chaque État membre transpose la directive, en France avec le RGAA comme référentiel de contrôle et des sanctions à la clé. Le contraste est l'infraction la plus facile à prouver : une seule mesure suffit.
Où en est votre site ?
Le scan gratuit mesure chaque contraste de votre site et montre à quelle distance vous êtes du niveau AA.
Ce que la mesure automatique peut faire et ne pas faire
Le scan mesure avec précision chaque cas vérifiable par machine : texte sur fond uni, liens, boutons, champs de formulaire et icônes, avec les valeurs de couleur réellement rendues sur ordinateur et smartphone. Cela couvre la grande majorité des défauts de contraste.
Le texte sur photos, vidéos et dégradés ne peut pas être évalué sans ambiguïté par une machine, car le fond change à chaque endroit. Le rapport marque ces zones pour une revue manuelle, afin que rien ne passe silencieusement pour conforme quand un œil humain devrait encore regarder.
Une précision encore : les appréciations de cette page, notamment sur la loi européenne sur l'accessibilité, sont des premières évaluations techniques sans engagement et ne constituent pas un conseil juridique. Pour des réponses contraignantes sur vos obligations, adressez-vous à un avocat.
Questions fréquentes sur le contraste des couleurs
Quel ratio de contraste les WCAG exigent-elles ?
Au moins 4,5:1 pour le texte normal et au moins 3:1 pour le grand texte (dès 24 px, ou 18,5 px en gras) selon WCAG 1.4.3, niveau AA. Les composants graphiques exigent aussi 3:1 (WCAG 1.4.11). Le niveau AAA demande 7:1 pour le texte normal.
La vérification du contraste est-elle une obligation légale ?
La loi européenne sur l'accessibilité renvoie aux règles de contraste WCAG niveau AA via la norme EN 301 549. Un contraste insuffisant est donc une vraie infraction pour les entreprises concernées, et l'une des plus faciles à mesurer.
Comment le ratio de contraste est-il calculé ?
À partir de la luminance relative des deux couleurs selon la formule WCAG : (L1 + 0,05) / (L2 + 0,05), L1 étant la couleur la plus claire. Le vérificateur ci-dessus utilise exactement ce calcul, le même que les outils des autorités.
Qu'est-ce qui compte comme grand texte ?
Selon les WCAG, un texte à partir de 18 points (environ 24 px) compte comme grand, un texte gras dès 14 points (environ 18,5 px). Pour le grand texte, un ratio de 3:1 suffit au niveau AA. Les deux rangées de badges du vérificateur ci-dessus montrent les deux évaluations en parallèle.
Existe-t-il des exceptions à l'exigence de contraste ?
Oui : les logos et noms de marque, les textes et graphiques purement décoratifs ainsi que les éléments désactivés sont exemptés. Attention toutefois aux placeholders dans les formulaires : ils comptent comme un vrai contenu et exigent les 4,5:1 complets.
Mon design est joli, cela ne suffit-il pas ?
Ce qui paraît lisible à un designer à la vue typique peut être illisible pour une personne malvoyante ; environ quatre pour cent de la population ont un trouble de la vision des couleurs. C'est pourquoi le ratio mesurable compte, pas l'impression.
Un mode contraste ou un widget en superposition aide-t-il ?
Un mode contraste activable est un complément utile, mais il ne remplace pas l'obligation que la vue par défaut respecte le niveau AA. Les WCAG évaluent ce que tous les visiteurs voient sans clic supplémentaire. Des couleurs bien choisies à la source restent toujours la première étape.
Le scan du site trouve-t-il tous les problèmes de contraste ?
Il trouve tout ce qui est mesurable automatiquement : texte sur fond uni, liens, boutons, champs de formulaire. Le texte sur photos ou dégradés demande en plus un œil humain, et le rapport marque ces endroits pour une revue manuelle.
Vérifiez votre contraste avant que vos clients ne le fassent.
Testez une paire de couleurs ci-dessus, scannez votre site, recevez un rapport avec les valeurs exactes. Gratuit et sans installation.
Vers le vérificateur de contraste