Vérificateur de contraste WCAG et RGAA
Vérifiez le contraste entre la couleur d'un texte et celle de son fond : ratio, niveaux AA et AAA des WCAG, critères 3.2 et 3.3 du RGAA, et couleurs proches conformes.
Traitement 100 % local — rien ne quitte votre navigateur.En savoir plus
Couleur non reconnue. Exemples : #1E40AF, rgb(30, 64, 175), hsl(224, 71%, 40%), navy
Couleur non reconnue. Exemples : #1E40AF, rgb(30, 64, 175), hsl(224, 71%, 40%), navy
Ratio de contraste
Aperçu
Texte normal (16 px) : portez ce vieux whisky au juge blond qui fume.
Grand texte (24 px)
Grand texte gras (19 px)
Bordure d'un champ ou d'un bouton| Critère | Minimum | Résultat |
|---|---|---|
| Texte normal, niveau AA (WCAG 1.4.3, RGAA 3.2) | 4,5:1 | |
| Texte normal, niveau AAA (WCAG 1.4.6) | 7:1 | |
| Grand texte, niveau AA (WCAG 1.4.3, RGAA 3.2) | 3:1 | |
| Grand texte, niveau AAA (WCAG 1.4.6) | 4,5:1 | |
| Composants d'interface et éléments graphiques (WCAG 1.4.11, RGAA 3.3) | 3:1 |
Grand texte : au moins 24 px (18 pt), ou en gras 18,5 px selon le RGAA et 18,66 px (14 pt) selon les WCAG.
- Texte :
- Fond :
Aucune couleur proche n'y parvient : changez franchement l'une des deux couleurs.
Aller plus loin
Faire vérifier l'accessibilité de votre site
Contrastes, navigation au clavier, textes alternatifs : parlez-en à StudioMaestro, le studio web de l'éditeur de Youtilz. Le premier échange de 30 minutes est offert.
Réserver un appel avec StudioMaestro (s'ouvre dans un nouvel onglet)Votre texte est-il assez contrasté ?
Un texte gris clair sur fond blanc paraît élégant sur un écran bien réglé, mais devient illisible au soleil, sur un écran bas de gamme ou pour une personne malvoyante. Le vérificateur de contraste calcule le ratio entre la couleur du texte et celle du fond, et indique les niveaux d'accessibilité atteints.
Si le contraste est insuffisant, l'outil propose les couleurs les plus proches qui passent : même teinte, juste plus foncée ou plus claire.
Comment utiliser
- Choisissez la couleur du texte et celle du fond, avec le sélecteur ou en saisissant un code (
#1E40AF,rgb(30, 64, 175),hsl(224, 71%, 40%)ou un nom de couleur CSS) - Lisez le ratio et le résultat pour chaque critère
- Vérifiez l'aperçu, en texte normal, en grand texte et sur une bordure
- Si besoin, cliquez sur « Appliquer » pour reprendre une couleur proposée
Les seuils à connaître
Texte normal : 4,5:1
Niveau AA des WCAG (critère 1.4.3), repris par le critère 3.2 du RGAA. C'est le niveau exigé par la réglementation.
Grand texte : 3:1
Pour un texte d'au moins 24 px, ou en gras d'au moins 18,5 px selon le RGAA (14 pt, soit 18,66 px, selon les WCAG) : les grands caractères restent lisibles avec moins de contraste.
Composants d'interface : 3:1
Bordures de champs, icônes, états de focus et graphiques porteurs d'information (WCAG 1.4.11, RGAA 3.3).
Niveau renforcé AAA : 7:1
4,5:1 pour le grand texte (WCAG 1.4.6). Il n'est généralement pas exigé, mais il profite aux personnes dont la vue baisse.
Les textes décoratifs, les logos et les éléments désactivés ne sont pas soumis à ces seuils.
Comment le ratio est calculé
Chaque couleur reçoit une luminance relative, de 0 pour le noir à 1 pour le blanc. Le vert y pèse le plus (71,5 %), le bleu le moins (7,2 %), comme pour l'œil humain. Le ratio vaut ensuite (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance la plus claire : il va de 1:1 (deux couleurs identiques) à 21:1 (noir sur blanc).
Le ratio affiché est tronqué, jamais arrondi au-dessus : un contraste de 4,499:1 s'affiche 4,49:1 et échoue au niveau AA, car les WCAG interdisent d'arrondir pour atteindre un seuil.
Qui est concerné ?
En France, le RGAA s'impose aux sites publics et aux grandes entreprises. Depuis le 28 juin 2025, l'European Accessibility Act étend les obligations d'accessibilité à de nombreux services vendus en ligne aux particuliers, comme le commerce en ligne ou la banque. Les microentreprises qui fournissent des services en sont exemptées.
Même sans obligation, un bon contraste profite à tous : lecture en extérieur, écrans fatigués, lecteurs pressés.
Limites
- Les couleurs semi-transparentes ne sont pas prises en compte : indiquez la couleur finale, telle qu'elle s'affiche sur son fond.
- Un texte posé sur une image ou un dégradé doit être vérifié sur la zone la moins contrastée.
- Le contraste n'est qu'un critère parmi d'autres : taille des caractères, espacement et structure comptent aussi.