Vérificateur de contraste — Outil gratuit de vérification du ratio de contraste WCAG

La couleur est l'un des outils les plus puissants en design, mais elle peut aussi être l'un des plus exclusifs. Une palette de couleurs magnifique ne signifie rien si vos utilisateurs ne peuvent pas lire le texte. Un mauvais contraste est la principale cause d'échec d'accessibilité sur le web, affectant plus de 300 millions de personnes souffrant d'une déficience de la vision des couleurs et d'innombrables autres utilisateurs qui utilisent des appareils mobiles en plein soleil ou des écrans vieillissants avec une luminosité atténuée. Notre outil gratuit Contrast Checker calcule instantanément le ratio de contraste entre deux couleurs et vous indique exactement où elles se situent par rapport aux normes WCAG AA et AAA — afin que vous puissiez concevoir de manière inclusive sans deviner.

Qu'est-ce que le contraste des couleurs et pourquoi est-ce important ?

Le contraste des couleurs est la différence de luminosité perçue entre deux couleurs. Lorsque le texte est placé sur un fond, le contraste entre eux détermine si le texte est lisible. Si les couleurs sont trop similaires en luminosité, elles se fondent et deviennent invisibles pour les personnes à faible vision, les personnes atteintes de daltonisme, ou même les utilisateurs qui plissent les yeux devant un écran en plein soleil.

Les lignes directrices sur l'accessibilité du contenu web (WCAG) définissent mathématiquement le contraste à l'aide de la luminosité relative — une mesure de la luminosité qu'un œil humain perçoit. La formule tient compte du fait que nos yeux sont plus sensibles à la lumière verte qu'au rouge ou au bleu. Une verte vive peut sembler plus claire qu'une rouge vive même si elles ont la même luminosité numérique en RGB. La formule WCAG corrige cela, produisant un ratio de contraste qui reflète précisément la perception humaine.

Le ratio varie de 1:1 (couleurs identiques, aucun contraste) à 21:1 (noir pur sur blanc pur, contraste maximum). La plupart des conceptions accessibles se situent quelque part au milieu. Un ratio de 4,5:1 est le minimum pour le texte normal sous les normes WCAG AA. 7:1 est la norme plus exigeante AAA. Ces chiffres ne sont pas arbitraires — ils sont basés sur des recherches approfondies sur ce que les personnes souffrant de divers troubles visuels peuvent effectivement distinguer.

Au-delà de l'accessibilité, le contraste affecte tout le monde. Les conceptions à haut contraste sont plus faciles à lire sur des petits écrans, dans des environnements lumineux, et pour les utilisateurs de plus de 40 ans dont les yeux perdent naturellement la sensibilité au contraste. Le texte à faible contraste peut sembler élégant sur un moniteur calibré par un designer, mais il devient illisible sur un ordinateur portable économique, un écran de téléphone fissuré ou un projecteur dans une pièce éclairée.

Comment utiliser le Contrast Checker

Tester une combinaison de couleurs prend quelques secondes. Choisissez deux couleurs et obtenez un verdict instantané.

1. Choisissez votre couleur d'avant-plan. Il s'agit généralement de votre couleur de texte. Cliquez sur la miniature de couleur pour ouvrir le sélecteur natif, ou tapez directement un code HEX dans le champ de saisie.
2. Choisissez votre couleur d'arrière-plan. Il s'agit de la surface derrière votre texte. Utilisez le même sélecteur ou entrez manuellement un code HEX.
3. Lisez le ratio de contraste. L'outil affiche le ratio exact de manière prominente — par exemple, 7,23:1 — afin que vous sachiez précisément où vous vous situez.
4. Vérifiez la conformité WCAG. Le tableau des résultats indique l'état de passage ou d'échec pour :
   • Le texte normal aux normes WCAG AA (4,5:1) et AAA (7:1)
   • Le texte grand aux normes WCAG AA (3:1) et AAA (4,5:1)
   • Les composants UI aux normes WCAG AA (3:1)
5. Prévisualisez les couleurs dans le contexte. L'outil affiche un exemple de texte normal et de titre grand rendu avec votre combinaison choisie, afin que vous puissiez juger la lisibilité dans le monde réel visuellement.
6. Échangez les couleurs avec le bouton de basculement pour tester la combinaison inverse — du texte clair sur un fond sombre au lieu de texte sombre sur un fond clair.
7. Copiez le ratio dans votre presse-papiers avec un seul clic pour les documents ou les notes du système de conception.

L'ensemble du processus est instantané. Ajustez l'une des couleurs et observez le ratio, le tableau de conformité et la prévisualisation se mettre à jour en temps réel.

Comprendre les ratios de contraste

Plage de ratio	Niveau d'accessibilité	Ce que cela signifie
1:1 à 2,99:1	Échoue tous les standards	Le texte est à peine distinguable du fond ; inutilisable pour tout contenu lisible
3:1 à 4,49:1	Passe AA uniquement pour le texte grand et les composants UI	Adéquat pour les grands titres (18 points +), boutons, icônes et bordures ; échoue pour le texte de corps
4,5:1 à 6,99:1	Passe AA pour tout le texte	Respecte le standard minimum pour le texte de corps normal ; lisible pour la plupart des utilisateurs
7:1 à 21:1	Passe AAA pour le texte normal	Accessibilité améliorée ; lisible pour les utilisateurs souffrant d'une perte de vision significative ; idéal pour le contenu long

Qu'est-ce qui compte comme "texte grand" ?

Le WCAG définit le texte grand comme étant de 18 points (24 pixels) ou plus, ou de 14 points en gras (environ 18,67 pixels en gras) ou plus. Les titres, les boutons d'appel à l'action et le texte héroique qualifient souvent le texte grand, ce qui signifie qu'ils peuvent passer avec un ratio de contraste plus faible que le texte de corps. Cependant, viser au moins 4,5:1 partout est toujours une bonne pratique car cela garantit la cohérence et prépare votre conception à la mise à l'échelle et au zoom.

Pourquoi la formule utilise la luminosité relative

La formule de contraste WCAG n'est pas une simple comparaison des valeurs RGB. Elle convertit d'abord chaque couleur en luminosité relative — une mesure de la luminosité perçue qui pèse davantage sur le vert que sur le rouge ou le bleu car les yeux humains sont le plus sensibles à la lumière verte. C'est pourquoi deux couleurs avec des valeurs de luminosité identiques en RGB peuvent produire des ratios de contraste très différents. Un rouge pur (#FF0000) et un vert pur (#00FF00) ont tous deux une intensité maximale dans un canal, mais le vert semble beaucoup plus clair aux yeux humains, donc sa luminosité relative est plus élevée.

Fonctionnalités clés

Fonctionnalité	Ce qu'elle fait	Pourquoi c'est important
Calcul du contraste en temps réel	Calcule instantanément le ratio WCAG à mesure que vous ajustez les couleurs	Itérez à travers les options de palette et voyez la conformité se mettre à jour immédiatement
Test WCAG AA & AAA	Affiche le passage/échec pour le texte normal, le texte grand et les composants UI à tous les niveaux	Savez exactement quels standards vous respectez sans avoir à mémoriser les seuils
Prévisualisation du texte en temps réel	Rend le texte de corps et les titres grands avec vos couleurs	Jugez la lisibilité visuellement, pas seulement mathématiquement
Échange de couleurs	Inverse l'avant-plan et l'arrière-plan avec un seul clic	Testez les variantes clair sur sombre et sombre sur clair instantanément
Entrée HEX	Accepte directement les codes HEX pour un correspondance de couleur précise	Correspondez aux couleurs exactes de votre système de conception
Copier le ratio	Copie le ratio de contraste dans le presse-papiers	Documentez la conformité à l'accessibilité dans les spécifications de conception et les audits
Priorité à la confidentialité	Tous les calculs s'effectuent dans votre navigateur	Aucune donnée de conception n'est envoyée à un serveur

Contrairement aux outils de contraste basiques qui ne montrent qu'un nombre, ce vérificateur met le ratio en contexte. Vous voyez non seulement que votre combinaison obtient un ratio de 4,2:1, mais aussi qu'elle échoue pour le texte de corps AA tout en passant pour le texte grand — une information actionnable qui vous aide à décider si vous devez assombrir votre texte ou augmenter la taille de police.

Cas d'utilisation réels

Concepteurs web créant des interfaces accessibles Un designer crée une page d'accueil avec un fond bleu foncé et du texte gris clair. La combinaison semble élégante sur son moniteur, mais le vérificateur de contraste révèle un ratio de seulement 3,8:1 — échouant pour le texte de corps AA. Le designer assombrit légèrement le texte, atteignant 4,6:1, et maintenant la page est lisible pour les utilisateurs à faible vision sans sacrifier l'esthétique sombre.

Développeurs implémentant des systèmes de conception Un développeur gère une bibliothèque de composants avec des dizaines de tokens de couleur. Avant de publier un nouveau thème, il teste chaque paire de texte et d'arrière-plan avec le vérificateur de contraste. Détecter les échecs tôt empêche les bugs d'accessibilité de parvenir en production et évite le coût de la re-conception des composants après un audit.

Créateurs de contenu formatant des documents Un marketeur crée un guide PDF avec des boîtes de mise en évidence colorées et du texte mis en surbrillance. Il utilise le vérificateur de contraste pour vérifier que chaque couleur de texte sur chaque arrière-plan passe WCAG AA. Cela garantit que le PDF est accessible lorsqu'il est converti en HTML ou lu par des lecteurs d'écran, et protège l'organisation contre les plaintes liées à l'accessibilité.

Chefs de produit effectuant des audits d'accessibilité Un chef de produit prépare une revue de VPAT (Voluntary Product Accessibility Template). Il utilise le vérificateur de contraste pour tester chaque combinaison de couleur dans son application contre les normes WCAG, documentant les ratios pour chacune. Cela crée une trace d'audit qui démontre une diligence raisonnable et la conformité.

Enseignants créant des matériaux pédagogiques Un enseignant construit un cours en ligne avec des diapositives, des quiz et des matériaux de lecture. Il vérifie chaque combinaison de texte et d'arrière-plan pour s'assurer que les étudiants atteints de troubles visuels peuvent participer équitablement. Un contraste élevé bénéficie également aux étudiants regardant des cours sur des téléphones ou des tablettes dans des conditions d'éclairage variables.

Concepteurs d'applications mobiles Les écrans mobiles sont consultés partout — en extérieur sous le soleil, en intérieur sous des lumières fluorescentes, et au lit avec le mode nuit activé. Un vérificateur de contraste aide les concepteurs à tenir compte de ces conditions variables en s'assurant que les combinaisons ont assez de marge pour rester lisibles lorsque la luminosité est faible, les écrans sont sales ou des filtres anti-reflets sont appliqués.

Conseils et bonnes pratiques

• Visez AAA lorsqu'il est possible. Bien que AA soit le minimum légal dans la plupart des juridictions, AAA offre une meilleure expérience pour tout le monde. Si vos couleurs de marque peuvent atteindre 7:1 sans conflit, utilisez-les. Le petit compromis visuel est justifié par le gain d'accessibilité important.
• Ne vous appuyez pas uniquement sur la couleur. Même avec un contraste parfait, la couleur n'est pas accessible à tout le monde. Les utilisateurs daltoniens peuvent ne pas distinguer le rouge du vert. Associez toujours la couleur à des icônes, des étiquettes, des motifs ou du texte pour transmettre un sens.
• Testez toute votre palette. Un système de conception peut avoir dix couleurs de texte et dix couleurs d'arrière-plan. Cela représente cent combinaisons possibles. Tester systématiquement chaque paire — ou au moins les plus courantes — empêche les échecs d'accessibilité de s'infiltrer.
• Vérifiez les états de mise en surbrillance et les éléments interactifs. Les boutons, les liens, les champs de formulaire et les commutateurs nécessitent au moins un ratio de 3:1 par rapport à leur zone environnante. Un bouton qui passe pour le texte peut échouer comme composant UI si sa bordure est trop subtile.
• Tenez compte de la transparence et des superpositions. Si votre texte est sur une image ou une superposition semi-transparente, l'arrière-plan effectif est une combinaison de couleurs. Le vérificateur de contraste teste les couleurs solides, donc pour les superpositions vous devez calculer le résultat combiné d'abord ou tester prudemment.
• Testez à différents niveaux de zoom. Les utilisateurs à faible vision zooment jusqu'à 200 % ou plus. À un zoom élevé, le texte apparaît plus grand, ce qui aide, mais le contraste relatif reste le même. Assurez-vous que vos ratios sont suffisamment solides pour résister à la magnification.
• Documentez vos ratios. Lorsque vous finalisez une paire de couleurs, notez son ratio de contraste dans la documentation de votre système de conception. Cela aide les futurs designers et développeurs à maintenir l'accessibilité à mesure que le produit évolue.

Questions fréquemment posées

Le Vérificateur de contraste est-il gratuit à utiliser ?

Oui. Le Vérificateur de contraste est entièrement gratuit, sans limites d'utilisation, sans inscription et sans publicités. Vous pouvez tester autant de combinaisons de couleurs que nécessaire.

Qu'est-ce que le WCAG ?

Le WCAG signifie Web Content Accessibility Guidelines. Il s'agit d'un standard internationalement reconnu publié par le W3C qui définit comment rendre le contenu web accessible aux personnes handicapées. La version actuelle est WCAG 2.1, et WCAG 2.2 ajoute des critères supplémentaires. Les lignes directrices sont organisées en trois niveaux : A (minimum), AA (standard) et AAA (renforcé).

Quel ratio de contraste dois-je atteindre pour passer WCAG AA ?

Pour le texte normal (sous 18 points ou 14 points en gras), vous avez besoin d'au moins 4,5:1. Pour le texte grand (18 points ou plus, ou 14 points en gras ou plus) et les composants UI comme les boutons et les champs de formulaire, vous avez besoin d'au moins 3:1.

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

AA est le niveau de conformité standard requis par la plupart des lois et lignes directrices d'accessibilité mondiales, y compris la Section 508 aux États-Unis et l'Acte européen d'accessibilité. AAA est un niveau renforcé qui offre une meilleure accessibilité mais n'est pas requis partout et est parfois considéré comme trop exigeant pour le contenu web général. Pour AAA, le texte normal nécessite un ratio de 7:1 et le texte grand nécessite 4,5:1.

Puis-je tester des couleurs RGB ou HSL ?

L'outil accepte directement les entrées de code HEX. Si vous avez des valeurs RGB ou HSL, utilisez d'abord notre outil Color Picker pour les convertir en HEX. Entrez le code HEX dans le Vérificateur de contraste et testez instantanément.

Ce outil fonctionne-t-il sur les appareils mobiles ?

Oui. Le Vérificateur de contraste est entièrement responsive et fonctionne sur les smartphones et les tablettes. Les sélecteurs de couleur, le texte de prévisualisation et le tableau des résultats sont tous optimisés pour les écrans tactiles et les petits écrans.

Puis-je l'utiliser pour la conception imprimée ?

Bien que le WCAG soit spécifiquement conçu pour le contenu numérique, les principes de contraste s'appliquent également à l'impression. Un ratio de 4,5:1 ou plus garantit généralement un texte lisible dans les matériaux imprimés. Cependant, les designers d'impression devraient également considérer la couverture d'encre, la qualité du papier et la distance de vision, en plus des ratios de contraste numériques.

Qu'advient-il si mes couleurs de marque échouent le WCAG ?

Si vos couleurs de marque ne respectent pas le ratio requis, vous avez plusieurs options. Assombrissez ou éclaircissez légèrement le texte. Augmentez la taille de police afin que le texte soit considéré comme "grand texte", ce qui nécessite un ratio plus faible. Ajoutez une ombre ou un contour au texte pour augmenter le contraste perçu. Ou utilisez la couleur non conforme uniquement pour les éléments décoratifs et choisissez une alternative accessible pour le texte fonctionnel.