1. Saisir les couleurs
Saisissez la couleur du texte et la couleur d'arrière-plan en HEX, RGB ou HSL.
Vérifiez le contraste des couleurs et la lisibilité selon WCAG
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.
Loading tool editor...
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 :
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 - le plus courant en web design. Commence par # et contient 3 ou 6 caractères (chiffres 0-9 et lettres A-F).
#fff- blanc (forme abrégée)#ffffff- blanc (forme complète)#1a73e8- bleu
AATexte normal : min. 4,5:1 - Texte grand : min. 3:1 - Icônes : min. 3:1
AAATexte normal : min. 7:1 - Texte grand : min. 4,5:1
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 18px (ou 14px en gras). 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 – titres, boutons, mises en évidence.
- 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 le minimum exigé par les réglementations d'accessibilité numérique dans de nombreux pays, y compris la directive européenne sur l'accessibilité des sites web. 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, la fonction Ajustement 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 ?
| Feature | 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 | ||
| Obligatoire par le RGAA 4.1 (secteur public + grandes entreprises) | ||
| Obligatoire par l'Acte européen d'accessibilité (secteur privé dès VI 2025) | ||
| Obligatoire par la directive UE 2016/2102 (secteur public) | ||
| Recommandé pour le contenu essentiel |
Niveau AA (minimum)
- 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
- Obligatoire par le RGAA 4.1 (secteur public + grandes entreprises)
- Obligatoire par l'Acte européen d'accessibilité (secteur privé dès VI 2025)
- Obligatoire par la directive UE 2016/2102 (secteur public)
- Recommandé pour le contenu essentiel
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
- Obligatoire par le RGAA 4.1 (secteur public + grandes entreprises)
- Obligatoire par l'Acte européen d'accessibilité (secteur privé dès VI 2025)
- Obligatoire par la directive UE 2016/2102 (secteur public)
- Recommandé pour le contenu essentiel
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 doit commencer par # et contenir 3 ou 6 caractères (par ex. #fff ou #ffffff). Pour le format RGB, vérifiez que les valeurs sont séparées par des virgules et comprises entre 0 et 255.
La fonction Ajustement 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
Les diapositives projetées ont souvent un contraste plus faible que sur 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 qui touche environ 8 % des hommes et 0,5 % des femmes. Les personnes daltoniennes peuvent avoir du mal à distinguer certaines paires de couleurs, même si le contraste de luminosité est suffisant.
Types les plus courants de daltonisme :
- Deutéranopie – difficulté à distinguer le vert du rouge (forme la plus courante)
- 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.
Obligations légales d'accessibilité en France, Belgique et Suisse
La France dispose d'un cadre réglementaire parmi les plus stricts d'Europe en matière d'accessibilité numérique :
- France - RGAA 4.1 (Référentiel Général d'Amélioration de l'Accessibilité) : basé sur les WCAG 2.1 AA, il s'applique aux administrations publiques et aux entreprises dont le chiffre d'affaires dépasse 250 millions d'euros. Les amendes atteignent 50 000 € par infraction.
- Loi Européenne sur l'Accessibilité (EAA) - depuis juin 2025, les obligations s'étendent au secteur privé : e-commerce, banques, transports et plateformes médias.
- Belgique - le Bestuursdecreet (Flandre) et les équivalents wallons/bruxellois imposent WCAG 2.1 AA aux sites publics.
- Suisse - la LHand (Loi sur l'égalité pour les handicapés) couvre l'administration fédérale. La norme eCH-0059 recommande WCAG 2.1 AA.
Le ratio de contraste de 4,5:1 pour le texte courant et 3:1 pour le grand texte est requis par l'ensemble de ces réglementations.
Législation française sur le contraste des couleurs et l'accessibilité numérique
En France, le contraste des couleurs est une obligation légale, avec des sanctions financières pouvant atteindre 50 000 € par service non conforme.
RGAA 4.1 (Référentiel Général d'Amélioration de l'Accessibilité)
Le RGAA est le référentiel français d'accessibilité numérique, basé sur les WCAG 2.1 niveau AA. Il s'applique aux services publics et aux entreprises réalisant un chiffre d'affaires supérieur à 250 millions d'euros. Les critères 3.2 et 3.3 du RGAA portent spécifiquement sur le contraste des couleurs : 4,5:1 pour le texte normal et 3:1 pour le texte agrandi.
Loi pour une République numérique (2016)
Cette loi étend les obligations d'accessibilité aux organismes publics et aux délégataires de service public. Elle impose la publication d'une déclaration d'accessibilité et d'un schéma pluriannuel. Le défaut de conformité peut entraîner une sanction de 50 000 € par service.
Acte européen d'accessibilité (2019/882)
À partir du 28 juin 2025, le secteur privé est également concerné : commerce en ligne, banque, transport, livres numériques et bornes libre-service. Les entreprises françaises vendant en ligne devront respecter WCAG 2.1 AA.
Belgique et Suisse francophone
En Belgique, le Bestuursdecreet (décret de gouvernance) impose WCAG 2.1 AA aux services publics flamands et wallons. En Suisse, la norme eCH-0059 et la Loi fédérale sur l'égalité pour les handicapés (LHand) encadrent l'accessibilité numérique du secteur public.
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 correspondent aux exigences de WCAG 2.1, qui constituent la base des réglementations d'accessibilité numérique dans l'UE et de nombreux autres pays.Ajustement automatique de la couleur au seuil
La fonction Ajustement trouve une variante de couleur de texte conforme au seuil de contraste sélectionné : elle préserve la teinte, ne modifie que la luminosité.Cinq formats de couleur
Formats pris en charge : HEX, RGB, RGBA, HSL et HSLA. 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 (titres, boutons) et les icônes : inutile de tester chaque type séparément.
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), RGB (rgb(0,0,0)), RGBA, HSL (hsl(0,0%,0%)) et 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), ouvrez les outils de développement (clic droit → Inspecter). 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.
Le contraste des couleurs est-il légalement obligatoire en France ?
Oui. Le RGAA 4.1 impose aux services publics et aux grandes entreprises (CA > 250 M€) de respecter WCAG 2.1 niveau AA, incluant un contraste minimum de 4,5:1 pour le texte normal. Le non-respect peut entraîner une amende de 50 000 € par service. À partir de juin 2025, l'Acte européen d'accessibilité étend ces obligations au secteur privé.
Qu'est-ce que le RGAA et comment concerne-t-il le contraste ?
Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) est le référentiel français basé sur WCAG 2.1. Ses critères 3.2 et 3.3 portent spécifiquement sur le contraste : 4,5:1 pour le texte normal et 3:1 pour le texte agrandi et les composants d'interface. Chaque page publique doit afficher une déclaration d'accessibilité mentionnant le niveau de conformité.
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).
Le RGAA impose-t-il un contraste de couleur minimum ?
Oui. Le RGAA 4.1 exige un ratio de contraste de 4,5:1 pour le texte courant et 3:1 pour le grand texte, conformément aux WCAG 2.1 AA. Le non-respect peut entraîner une amende pouvant atteindre 50 000 € par infraction.
Mon site belge ou suisse est-il aussi concerné ?
Oui. En Belgique, le Bestuursdecreet (Flandre) et les décrets wallons/bruxellois imposent WCAG 2.1 AA aux sites publics. En Suisse, la LHand couvre l'administration fédérale et la norme eCH-0059 recommande WCAG 2.1 AA. L'EAA étend les obligations au privé depuis juin 2025.
Comment tester le contraste d'un texte sur une image ?
Identifiez la zone la plus claire de l'image où le texte apparaît et testez cette couleur contre votre couleur de texte. 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 foncé qui passe WCAG AA sur blanc pur (#ffffff) est #767676 avec un ratio de 4,54:1. Les gris plus clairs comme #999999 (2,85:1) échouent. Pour AAA (7:1), il faut au moins #595959.
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 – nous répondons sous 24 heures.