search

Found

info Aperçu

Testez le ratio de contraste entre fond et texte selon WCAG 2.1 et obtenez le verdict AA/AAA en direct.

📘 Mode d'emploi

  1. Saisir ou sélectionner la couleur de fond via le champ hexadécimal ou le sélecteur natif.
  2. Saisir ou sélectionner la couleur de premier plan de la même manière.
  3. Vérifier le ratio calculé et la validation des différents critères WCAG 2.1 affichés à l'écran.

Vérificateur de contraste

Contrast Checker

Verify WCAG 2.1 accessibility standards in real-time.

#
#

Texte d'exemple pour prévisualiser l'accessibilité.

The quick brown fox jumps over the lazy dog.

Ratio de contraste
1.00 : 1

AA (Texte normal)

--

AA (Grand texte)

--

AAA (Texte normal)

--

AAA (Grand texte)

--

grid_view Similaires

Article

Vérificateur de Ratio de Contraste ｜ Outil d'Accessibilité WCAG

Ce vérificateur calcule en temps réel le ratio de contraste entre une couleur de fond et une couleur de texte. Conçu pour les développeurs front-end et les UI/UX designers, il permet de valider instantanément la conformité aux standards d'accessibilité numérique (WCAG 2.1 et RGAA).

💡 Fonctionnalités principales

  • Calcul en temps réel : Entrez un code hexadécimal (ex: #FFFFFF) ou utilisez le sélecteur de couleurs interactif pour obtenir instantanément le ratio de contraste exact.
  • Validation WCAG 2.1 précise : L'outil évalue automatiquement la conformité selon quatre niveaux distincts pour garantir une lisibilité optimale :
  • WCAG AA Normal (Ratio minimum : 4.5:1)
  • WCAG AA Large (Ratio minimum : 3.0:1)
  • WCAG AAA Normal (Ratio minimum : 7.0:1)
  • WCAG AAA Large (Ratio minimum : 4.5:1)
  • Aperçu visuel dynamique : Une zone de prévisualisation (Preview) met à jour le rendu de la combinaison de couleurs pour évaluer concrètement l'ergonomie visuelle.
  • Traitement local sécurisé : L'outil fonctionne de manière autonome via JavaScript. Toutes les données colorimétriques sont traitées uniquement dans votre navigateur local et ne sont jamais transmises à un serveur externe.

🧐 Foire aux questions (FAQ)

Q. Quels sont les seuils de référence à cibler pour l'accessibilité web en France ?

A. En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) s'appuie directement sur les critères internationaux WCAG. Pour un niveau légalement acceptable (équivalent WCAG AA), un ratio de contraste d'au moins 4.5:1 est requis pour le texte standard (moins de 24px normal ou 19px en gras), et de 3.0:1 pour les grands textes. Le niveau d'excellence (AAA) exige un ratio de 7.0:1 pour le texte normal.

Q. Comment l'algorithme calcule-t-il le ratio affiché ?

A. L'outil convertit d'abord les valeurs hexadécimales en luminance relative (sRGB) en tenant compte de la correction gamma. Il applique ensuite la formule officielle du W3C : (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance de la couleur la plus claire et L2 celle de la couleur la plus sombre.

📚 À propos de la colorimétrie et du RGAA

Dans l'écosystème web francophone (France, Suisse, Belgique, Québec), répondre aux exigences d'accessibilité telles que le RGAA est devenu une obligation réglementaire incontournable pour les services publics et de nombreuses grandes entreprises. Ne pas respecter les seuils de contraste expose non seulement à des sanctions juridiques, mais détériore gravement l'expérience utilisateur des personnes atteintes de déficiences visuelles (daltonisme, vieillissement oculaire, presbytie).

D'un point de vue purement technique et ergonomique, garantir un ratio de contraste robuste (supérieur à 4.5:1) est également crucial pour les utilisateurs sur terminaux mobiles, souvent confrontés à des reflets ou à une forte luminosité ambiante (en plein soleil). Intégrer la vérification des ratios colorimétriques directement dans l'intégration CSS et la phase de design system est une bonne pratique d'ingénierie front-end fondamentale.