Vérifiez le contraste des couleurs et la lisibilité selon WCAG

Dernière révision du contenu :2026-09-30

Vérifiez si vos couleurs de texte et d’arrière-plan sont lisibles selon les normes WCAG 2.1. Rapport de contraste, évaluation AA/AAA et ajustement automatique des couleurs. Par exemple, un texte #1B2632 sur un fond #FFFFFF donne un rapport de 15,33:1, bien au-dessus du seuil AAA de 7:1.

Rapport de contraste

21.00 : 1

Texte normal

AA (min. 4,5:1)AAA (min. 7:1)

Texte d’exemple de contraste WCAG 2.1

Texte grand / gras

AA (min. 3:1)AAA (min. 4,5:1)

Texte d’exemple de contraste WCAG 2.1

Icône

AA (min. 3:1)

Pourquoi le contraste des couleurs est important ?

Un contraste insuffisant entre le texte et l’arrière-plan rend le contenu difficile à lire – en particulier pour les personnes malvoyantes, les utilisateurs âgés ou ceux qui consultent votre site sur un écran en plein soleil. Les directives WCAG 2.1 définissent des seuils minimaux de contraste pour garantir l’accessibilité.

Cet outil calcule le rapport de contraste entre deux couleurs, évalue la conformité WCAG (AA et AAA) pour le texte normal, le texte grand et les icônes, et propose une fonction d’ajustement automatique pour trouver des couleurs conformes.

Comment utiliser le vérificateur

La vérification est instantanée :

1. Saisir les couleurs
Saisissez la couleur du texte et la couleur d’arrière-plan en HEX, RGB ou HSL.
2. Vérifier le contraste
Consultez le rapport de contraste et la conformité WCAG AA/AAA.
3. Ajuster si nécessaire
Utilisez la fonction d’ajustement pour trouver une couleur conforme automatiquement.

Quels formats de couleurs sont pris en charge ?

HEX

Format hexadécimal - notation utilisée en CSS et dans les logiciels de design. Le code compte 3 ou 6 caractères (chiffres 0-9 et lettres A-F), ou 4 et 8 lorsque les derniers indiquent la transparence. Le # peut être omis : un code copié sans lui, comme 1B2632, fonctionne aussi.

#fff - blanc (forme abrégée)
#ffffff - blanc (forme complète)
#1a73e8 - bleu
#00000080 - noir à 50 % d’opacité

RGB / RGBA

Format basé sur trois canaux : rouge (Red), vert (Green), bleu (Blue). Chaque canal accepte une valeur de 0 à 255. La variante RGBA ajoute un quatrième paramètre - la transparence (alpha) de 0 à 1.

rgb(255, 255, 255) - blanc
rgba(0, 0, 0, 0.8) - noir à 80% d’opacité

HSL / HSLA

Format basé sur la teinte (Hue, 0-360°), la saturation (Saturation, 0-100%) et la luminosité (Lightness, 0-100%). La variante HSLA ajoute la transparence. Ce format est utile pour modifier la luminosité ou la saturation d’une couleur.

hsl(0, 0%, 100%) - blanc
hsla(217, 91%, 60%, 0.9) - bleu à 90% d’opacité

Niveaux de conformité WCAG

Les WCAG 2.1 définissent deux niveaux de conformité pour le contraste des couleurs :

AA (recommandé) – le niveau minimal pour la plupart des sites web. Garantit une lisibilité suffisante.
AAA (optimal) – le niveau le plus élevé. Recommandé pour les sites destinés aux personnes malvoyantes.
Texte grand – texte d’au moins 18 pt, soit environ 24 px (ou 14 pt en gras, environ 18,5 px). Les seuils sont plus bas car les grandes lettres sont naturellement plus lisibles.

Que signifient les résultats du test de lisibilité ?

L’outil affiche le rapport de contraste sur une échelle de 1:1 (aucun contraste) à 21:1 (contraste maximum – noir sur blanc). Le résultat est comparé aux seuils définis dans le standard WCAG :

Texte normal – nécessite au moins 4,5:1 pour le niveau AA (standard minimum) ou 7:1 pour le niveau AAA (standard amélioré). S’applique au texte inférieur à 18pt (24px) ou inférieur à 14pt (18,5px) en gras.
Texte grand / gras – nécessite au moins 3:1 pour le niveau AA ou 4,5:1 pour le niveau AAA. S’applique au texte à partir de 18pt (24px) ou à partir de 14pt (18,5px) en gras – par exemple les grands titres.
Icônes et éléments d’interface – nécessitent au moins 3:1 pour le niveau AA. S’applique aux icônes, boutons, champs de formulaire et autres éléments d’interface qui transmettent de l’information.

Le niveau AA est celui auquel se réfèrent de nombreuses politiques d’accessibilité d’institutions publiques, c’est donc un bon point de départ. Le niveau AAA offre une meilleure lisibilité, mais n’est pas toujours réalisable pour tous les éléments.

Ajustement automatique des couleurs aux exigences WCAG

Si le contraste est trop faible, le bouton Ajuster trouve automatiquement une variante de couleur de texte conforme au seuil de contraste sélectionné.

Comment fonctionne l’ajustement :

Sélectionnez l’objectif d’ajustement dans la liste, par ex. AA pour texte normal ou AAA pour texte grand.
Cliquez sur le bouton Ajuster.
L’outil recherche parmi les variantes de luminosité de la couleur du texte et suggère la plus proche conforme aux exigences.
La couleur suggérée peut être copiée dans le presse-papiers ou définie immédiatement comme nouvelle couleur de texte.

L’algorithme préserve la teinte et la saturation de la couleur d’origine, ne modifiant que la luminosité. La couleur suggérée reste cohérente avec l’identité visuelle tout en respectant le standard d’accessibilité.

Que signifient les niveaux AA et AAA dans le standard WCAG ?

	Niveau AA (minimum)	Niveau AAA (amélioré)
Texte normal – min. 4,5:1	✓	✓
Texte normal – min. 7:1	—	✓
Texte grand / gras – min. 3:1	✓	✓
Texte grand / gras – min. 4,5:1	—	✓
Icônes et éléments d’interface – min. 3:1	✓	✓
Recommandé pour le contenu essentiel	✓	✓

Quelles écritures de la couleur cet outil gère-t-il ?

Collez la couleur telle que vous l’avez : un code avec ou sans croisillon, une ligne entière de feuille de style, une constante de code Android, un nom CSS ou simplement trois nombres. L’outil lit chacune de ces écritures lui-même. La colonne du milieu montre la couleur lue, la suivante son contraste sur fond blanc — les deux ont été calculées par l’outil.

Ce que vous saisissez	Couleur lue par l’outil	Contraste sur blanc	Comment nous le lisons
1B2632	rgb(27, 38, 50)	15,33:1	Le croisillon n’est pas nécessaire, un code sans lui se lit de la même façon
color: #1B2632;	rgb(27, 38, 50)	15,33:1	Collez la ligne entière depuis une feuille de style ou les outils du navigateur, nous en extrayons la couleur
#00000080	rgba(0, 0, 0, 0.502)	4,00:1	Dans un code à huit caractères, l’opacité occupe les deux derniers, et nous en tenons compte pour le contraste
0x80000000	rgba(0, 0, 0, 0.502)	4,00:1	Dans une constante de code Android ou Kotlin, l’opacité occupe les deux premiers caractères, et c’est là que nous la cherchons
rgb(59 130 246 / 50%)	rgba(59, 130, 246, 0.5)	1,84:1	L’écriture CSS récente, avec espaces et opacité après la barre oblique, est reprise telle quelle
rgba(0, 0, 0, 0,5)	rgba(0, 0, 0, 0.5)	3,98:1	Une opacité écrite avec une virgule décimale fonctionne comme avec un point
rgba(0, 0, 0, .5)	rgba(0, 0, 0, 0.5)	3.98:1	Le zéro devant le point peut être omis : .5 vaut pour nous la même chose que 0.5
59, 130, 246	rgb(59, 130, 246)	3,68:1	Trois nombres sans rgb() suffisent, nous complétons nous-mêmes le reste de l’écriture
RGB(59,130,246)	rgb(59, 130, 246)	3.68:1	Les majuscules dans le nom de la fonction et l’absence d’espaces après les virgules ne gênent pas
rgb(300, 0, 0)	rgb(255, 0, 0)	4,00:1	Un canal au-delà de 255 est ramené à 255, comme le fait le navigateur
hsl(217 91% 60%)	rgb(60, 131, 246)	3,63:1	Une écriture HSL, avec virgules ou avec espaces, nous la convertissons nous-mêmes en RGB
navy	rgb(0, 0, 128)	16,01:1	Nous connaissons les 148 noms de couleurs CSS, le mot seul suffit donc
transparent	rgba(0, 0, 0, 0)	1,00:1	Un texte entièrement transparent donne un contraste de 1:1 sur tout fond, et c’est ainsi que nous l’indiquons

L’outil pose le texte semi-transparent sur le fond avant le calcul, et le fond semi-transparent sur du blanc.

Résolution de problèmes du vérificateur de contraste

Message d’erreur de format de couleur

Vérifiez le format de la couleur. Un code HEX compte 3, 4, 6 ou 8 caractères, avec ou sans # (par ex. #fff ou 1B2632). Les valeurs RGB et HSL s’écrivent dans rgb() ou hsl(), séparées par des virgules ou des espaces. Les noms de couleurs CSS, comme navy, fonctionnent aussi.

Le bouton Ajuster ne trouve pas de couleur appropriée

Lorsque l’arrière-plan et le texte ont une luminosité similaire dans la même teinte, l’algorithme peut ne pas trouver de variante conforme aux exigences sans changer la teinte. Dans ce cas, envisagez de modifier la couleur d’arrière-plan ou de choisir une couleur de texte complètement différente.

La couleur dans le sélecteur ne correspond pas au code saisi

Le sélecteur de couleurs du navigateur ne prend en charge que le format HEX sans transparence. Si vous saisissez une couleur au format RGBA ou HSLA avec transparence, le sélecteur n’affichera que la partie colorée (sans alpha). Les calculs de contraste continuent de prendre en compte la transparence.

Où vérifier la lisibilité des couleurs ?

La lisibilité est importante partout où quelqu’un doit lire du texte ou reconnaître un élément d’interface :

Sites web
Texte des pages, boutons, liens, formulaires. Particulièrement important pour les sites d’entreprise dont les visiteurs ont des âges et des capacités visuelles variés.
Boutiques en ligne
Prix, boutons Acheter, informations produit. Une lisibilité faible peut signifier des commandes perdues.
Présentations
Un projecteur peut afficher les couleurs avec un contraste plus faible qu’un moniteur. Vérifiez les couleurs avant de présenter.
Affiches et flyers
Les supports imprimés vus dans des conditions d’éclairage variées nécessitent un contraste élevé.
Applications mobiles
Les téléphones sont utilisés en plein soleil, la nuit et par des personnes de tous âges.
Menus de restaurant
Souvent imprimés sur du papier de couleur ou avec des polices décoratives : il est facile d’obtenir un contraste trop faible.

Lisibilité des couleurs pour les personnes daltoniennes

Le daltonisme est un trouble de la perception des couleurs : le daltonisme rouge-vert touche jusqu’à 8 % des hommes et 0,5 % des femmes d’ascendance nord-européenne. Les personnes daltoniennes peuvent avoir du mal à distinguer certaines paires de couleurs, même si le contraste de luminosité est suffisant.

Types de daltonisme :

Deutéranopie – difficulté à distinguer le vert du rouge
Protanopie – difficulté à percevoir le rouge
Tritanopie – difficulté à percevoir le bleu et le jaune (rare)

Cet outil vérifie le contraste de luminosité, qui est important pour tous les utilisateurs. Cependant, lors de la conception, il convient d’éviter les combinaisons de couleurs problématiques (par ex. texte rouge sur fond vert) et de ne pas se fier uniquement à la couleur pour transmettre de l’information – utilisez aussi des formes, des icônes et du texte.

Qu’est-ce qui rend ce vérificateur spécial ?

Évaluation objective basée sur une formule mathématique
Le rapport de contraste est calculé avec la formule WCAG : le résultat ne dépend ni de la configuration du moniteur ni de la perception individuelle des couleurs.
Conformité au standard international WCAG
Les résultats suivent les seuils des WCAG 2.1, les règles du W3C auxquelles se réfèrent de nombreuses politiques d’accessibilité.
Ajustement automatique de la couleur au seuil
Le bouton Ajuster trouve une variante de couleur de texte conforme au seuil de contraste sélectionné : il préserve la teinte et ne modifie que la luminosité.
Cinq formats de couleur
Formats pris en charge : HEX, RGB, RGBA, HSL et HSLA, ainsi que les noms de couleurs CSS. Le code couleur peut être collé directement depuis Figma, Photoshop ou une feuille de styles CSS.
Trois types de contenu en un seul test
Une seule vérification affiche le résultat pour le texte normal, le texte grand (par exemple les grands titres) et les icônes : inutile de tester chaque type séparément.

Dernière révision du contenu : 30 septembre 2026 · rédigé et vérifié par l'équipe Arteon

Questions fréquentes sur le vérificateur de contraste

Qu’est-ce que le rapport de contraste WCAG ?

Le rapport de contraste est un nombre compris entre 1:1 (aucun contraste) et 21:1 (contraste maximum, noir sur blanc). Les WCAG 2.1 définissent des seuils minimaux : 4,5:1 pour le texte normal (AA), 3:1 pour le texte grand (AA) et 7:1 pour le texte normal (AAA).

Quelle est la différence entre AA et AAA ?

AA est le niveau de conformité minimal recommandé – il garantit une lisibilité suffisante pour la plupart des utilisateurs. AAA est le niveau le plus élevé – il offre un contraste encore meilleur, particulièrement important pour les utilisateurs malvoyants.

Qu’est-ce que la fonction d’ajustement automatique ?

La fonction d’ajustement recherche automatiquement une variante de couleur qui atteint le seuil de contraste sélectionné (AA ou AAA). Elle ajuste la luminosité de la couleur tout en conservant la teinte, proposant la variante la plus proche de la couleur d’origine.

Quels formats de couleur sont pris en charge ?

L’outil prend en charge HEX (#000000, avec ou sans #, et en 4 ou 8 caractères avec transparence), RGB et RGBA (rgb(0,0,0) ou rgb(0 0 0)), HSL et HSLA (hsl(0,0%,0%)), ainsi que les noms de couleurs CSS (red, blue, etc.).

Mes données sont-elles envoyées à un serveur ?

Non. Tout le traitement s’effectue localement dans votre navigateur. Aucune donnée n’est envoyée ni stockée.

Pourquoi ma couleur ne passe pas le test alors que je la vois bien ?

La perception personnelle des couleurs dépend des réglages du moniteur, de l’éclairage ambiant et des capacités visuelles individuelles. Le standard WCAG repose sur une formule mathématique objective qui prend en compte différents troubles de la vision. Une couleur lisible sur un écran peut être illisible sur un autre ou pour une autre personne.

Où trouver les codes couleur de mon site web ?

Dans le navigateur (Chrome, Firefox, Edge), faites un clic droit puis Inspecter pour ouvrir les outils de développement. Dans l’onglet Styles, vous verrez les couleurs utilisées sur la page. Sinon, des extensions comme ColorZilla permettent de récupérer la couleur de n’importe quel élément sans toucher au code.

Quelles paires de couleurs de mon site vérifier en priorité ?

Les plus importantes : le texte sur le fond principal, le texte sur les bannières et sections colorées, les boutons (couleur du texte et fond du bouton par rapport au fond de la page), les liens et les icônes. Portez une attention particulière aux éléments qui apparaissent sur des fonds différents selon les sections.

Cet outil fonctionne-t-il pour les designs en mode sombre ?

Oui. L’outil vérifie le rapport de contraste entre deux couleurs quelconques, quelle que soit celle qui est la plus claire. Pour un mode sombre, saisissez une couleur de texte claire et une couleur de fond foncée. Les mêmes seuils WCAG s’appliquent : 4,5:1 pour le texte normal (AA) et 7:1 (AAA).

Comment tester le contraste d’un texte sur une image ?

Pour un texte clair, testez la zone la plus claire de l’image sous le texte ; pour un texte foncé, la zone la plus foncée. Pour garantir la lisibilité, ajoutez un fond semi-transparent ou une ombre derrière le texte.

Quelle est la couleur grise minimale sur fond blanc ?

Le gris le plus clair qui passe WCAG AA sur blanc pur (#ffffff) est #767676, avec un ratio de 4,54:1. La nuance juste plus claire, #777777, donne 4,48:1 et échoue, et #999999 seulement 2,85:1. Pour AAA (7:1), il faut #595959 ou plus foncé.

Capture d'écran de l'outil gratuit d'Arteon: Vérifiez le contraste des couleurs et la lisibilité selon WCAG

Aidez-nous à améliorer nos outils

Vous avez une idée pour une nouvelle fonctionnalité, trouvé un bug ou souhaitez suggérer un autre outil qui faciliterait votre travail ? Écrivez-nous.