search

Found

info Aperçu

Évaluez le rapport de contraste entre deux couleurs selon WCAG 2.1 (AA/AAA). Affichage de réussite par taille de texte avec sélecteur de couleurs.

📘 Mode d'emploi

  1. Saisir ou sélectionner la couleur de premier plan (texte) via l'outil de sélection ou le champ hexadécimal
  2. Saisir ou sélectionner la couleur d'arrière-plan de manière identique
  3. Consulter le ratio de contraste calculé et vérifier les badges de conformité (PASS/FAIL) affichés

Vérificateur de contraste de couleurs (WCAG)

Texte normal (16px) — The quick brown fox jumps over the lazy dog.

Grand texte (24px gras)

Rapport de contraste

21.00 : 1

AA Niveau

Texte normal (≥ 4.5:1)
Grand texte (≥ 3:1)
Composants UI (≥ 3:1)

AAA Niveau

Texte normal (≥ 7:1)
Grand texte (≥ 4.5:1)

grid_view Similaires

Article

Vérificateur de Contraste de Couleurs | Outil de Conformité WCAG

Cet outil s'adresse aux développeurs front-end et aux concepteurs UI/UX souhaitant évaluer instantanément l'accessibilité visuelle de leurs interfaces. Il calcule le ratio de contraste précis entre deux couleurs et valide automatiquement la conformité aux directives d'accessibilité.

💡 Présentation de l'outil

Ce vérificateur facilite la création de designs inclusifs en mesurant la luminance relative des couleurs sélectionnées. Il indique clairement si votre palette est adaptée à tous les utilisateurs.

  • Évaluation WCAG 2.1 en temps réel L'outil teste instantanément votre combinaison de couleurs selon les niveaux de conformité AA et AAA, en distinguant le texte normal, le texte de grande taille et les composants d'interface utilisateur (UI).
  • Flexibilité de saisie Accepte les codes hexadécimaux courts (3 caractères) ou standards (6 caractères), tout en offrant un sélecteur de couleurs natif synchronisé en temps réel avec les champs de texte.
  • Inversion rapide (Swap) Un bouton dédié permet d'intervertir instantanément la couleur de premier plan et celle d'arrière-plan pour tester rapidement le rendu inverse.

🧐 Foire Aux Questions

Q. Quelles sont les valeurs cibles (seuils) pour réussir les tests WCAG 2.1 ?

A. Pour le niveau de conformité AA, le ratio de contraste minimal requis est de 4.5:1 pour un texte normal et de 3:1 pour un texte de grande taille ou un composant d'interface (UI). Pour atteindre le niveau supérieur AAA, les exigences sont plus strictes : 7:1 pour un texte normal et 4.5:1 pour un texte de grande taille.

Q. Comment l'outil calcule-t-il ce ratio de contraste ?

A. L'outil convertit d'abord les codes hexadécimaux sRGB en espace colorimétrique linéaire. Il applique ensuite une pondération spécifique à chaque canal (0.2126 pour le rouge, 0.7152 pour le vert, 0.0722 pour le bleu) pour obtenir la luminance relative. Le ratio final est déterminé en divisant la luminance de la couleur la plus claire (plus 0.05) par celle de la couleur la plus sombre (plus 0.05).

📚 Bon à savoir : L'importance des normes WCAG

Les directives WCAG (Web Content Accessibility Guidelines) constituent le standard international en matière d'accessibilité numérique. Respecter ces ratios de contraste garantit que les textes restent lisibles pour les personnes souffrant de déficiences visuelles (comme le daltonisme ou la presbytie).

Au-delà de l'accessibilité inclusive, un contraste optimisé améliore considérablement l'expérience utilisateur (UX) globale. Par exemple, un ratio élevé permet à n'importe quel utilisateur de lire confortablement un texte sur l'écran d'un appareil mobile, même en plein soleil ou dans des conditions de forte luminosité ambiante. Intégrer cette vérification dès la phase de maquettage évite des refontes coûteuses lors des audits d'accessibilité finaux.