Vérificateur de Contraste des Couleurs (WCAG)

Vérifiez que vos couleurs respectent les normes d'accessibilité WCAG — gratuit, instantané.

Qu'est-ce que c'est ?

Le Vérificateur de Contraste des Couleurs est un outil d'accessibilité gratuit qui calcule le ratio de contraste entre une couleur de premier plan et une couleur d'arrière-plan selon la spécification WCAG 2.1. Saisissez ou choisissez deux couleurs et l'outil affiche instantanément le ratio de contraste, s'il passe les niveaux WCAG AA et AAA pour le texte normal et grand, et un aperçu en direct.

Comment l'utiliser

  1. Choisissez la couleur du texte avec le sélecteur de couleur ou en tapant un code hex.
  2. Choisissez la couleur d'arrière-plan de la même façon.
  3. Le ratio de contraste et les badges WCAG se mettent à jour instantanément.
  4. Vérifiez l'aperçu en direct pour voir la lisibilité réelle du texte.
  5. Cliquez sur "Exporter le rapport PNG" pour télécharger un résumé.

Pourquoi l'utiliser

L'accessibilité web n'est pas seulement une bonne pratique — dans de nombreux pays, c'est une obligation légale. Les directives WCAG 2.1 spécifient que le texte normal doit atteindre au moins un ratio de 4,5:1 (AA) et idéalement 7:1 (AAA). Détecter les problèmes de contraste tôt dans votre processus de conception évite des corrections coûteuses.

Questions fréquentes

Quelle est l'exigence de contraste WCAG ?

WCAG 2.1 Niveau AA requiert un ratio de 4,5:1 pour le texte normal et 3:1 pour le texte grand. Niveau AAA requiert 7:1 pour le texte normal et 4,5:1 pour le grand texte.

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

Le grand texte est défini comme au moins 18 points (24px) en poids normal, ou au moins 14 points (18,66px) en gras.

Puis-je entrer des couleurs en RGB ou HSL ?

Les champs acceptent des codes hex, et vous pouvez utiliser le sélecteur de couleur intégré qui prend en charge tout modèle de couleur.

Passer le niveau AA garantit-il l'accessibilité du site ?

Le contraste est un facteur important, mais l'accessibilité complète inclut aussi la taille de la police, la navigation au clavier et la compatibilité avec les lecteurs d'écran.

Que contient le PNG exporté ?

Le PNG montre les deux couleurs, le ratio de contraste et le statut pass/fail pour les quatre critères WCAG.