Comment vérifier si mes couleurs de texte et de fond respectent les WCAG ?

Saisissez des codes hex dans Couleur du texte et Couleur de fond, ou utilisez les sélecteurs. Le Rapport de contraste s'affiche avec Réussi ou Échec pour AA et AAA, texte normal et grand texte, ainsi que pour les composants d'interface.

Quel rapport de contraste les WCAG AA exigent-ils ?

AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Les composants d'interface et les objets graphiques exigent 3:1.

Qu'est-ce qui est considéré comme un grand texte ?

L'outil considère le texte normal à 18pt (24px), ou le texte gras à 14pt (18,66px), comme grand. Les textes plus petits doivent respecter les seuils plus élevés du texte normal.

Mes couleurs échouent au niveau AA. Comment les corriger ?

Utilisez les suggestions en un clic Corriger la couleur du texte ou Corriger le fond. Elles ajustent la luminosité tout en conservant la même teinte jusqu'à ce que la paire atteigne 4,5:1.

Quels formats de couleur sont acceptés et puis-je prélever une couleur depuis l'écran ?

Il accepte les valeurs hexadécimales à 3 et 6 chiffres, comme #abc ou #1e293b. Un bouton Sélectionner la couleur de l'écran apparaît dans les navigateurs qui prennent en charge l'API EyeDropper, comme Chromium.

Est-ce vraiment gratuit ?

Oui. Tous les outils sont gratuits, sans compte et sans carte bancaire. Le traitement se fait sur votre appareil plutôt que sur nos serveurs, et c'est ce qui permet de garder le service gratuit.

Fonctionne-t-il sur mobile ?

Oui. Il fonctionne dans les navigateurs mobiles récents sur iOS et Android, sans rien à installer.

🌓

Vérificateur de contraste des couleurs WCAG — outil gratuit

Vérifiez si deux couleurs satisfont aux normes de contraste WCAG AA et AAA pour l'accessibilité. Aperçu en direct à plusieurs tailles de texte avec suggestions automatiques quand le contraste est insuffisant.

S'exécute dans votre navigateurSans inscription ni pop-upsAucune connexion requiseGratuit pour toujours

Fonctionne hors ligne une fois chargé

Couleur du texte

Couleur de fond

Grand titre

Texte de corps moyen (18px) pour la lecture et le contenu.

Texte de corps normal (16px) pour les paragraphes.

Petit texte (14px) pour les légendes et métadonnées.

14,63:1

Rapport de contraste

✓WCAG AA — Texte normal

Requis 4.5:1 · Votre valeur : 14,63:1

✓WCAG AA — Grand texte

Requis 3.0:1 · Votre valeur : 14,63:1

✓WCAG AAA — Texte normal

Requis 7.0:1 · Votre valeur : 14,63:1

✓WCAG AAA — Grand texte

Requis 4.5:1 · Votre valeur : 14,63:1

✓Composants UI / objets graphiques

Requis 3.0:1 · Votre valeur : 14,63:1

Préréglages rapides

Basé sur les directives de contraste WCAG 2.1. Grand texte = 18 pt (24px) normal ou 14 pt (18,66px) gras. Les codes HEX se mettent à jour dans les deux sens : saisissez un HEX ou choisissez une couleur, les deux champs restent synchronisés.

Utilisations courantes

Vérifier les Pages Web pour la Conformité WCAGVérifiez que les couleurs de texte de votre site respectent les normes de contraste WCAG AA ou AAA pour l'accessibilité.
Vérifier les Combinaisons de Couleurs de MarqueTestez les appairements de palettes de couleurs de marque pour vous assurer qu'ils fonctionnent pour la conception d'UI accessible.
Tester les Palettes de Couleurs en Mode SombreLe texte clair sur les fonds sombres peut toujours échouer en contraste — vérifiez vos appairements de palette de mode sombre ici.
Appairements de Couleurs pour les Matériaux ImprimésLes affiches, les panneaux et les matériaux imprimés ont également besoin d'un contraste lisible — en particulier pour les spectateurs plus âgés.
Concevoir des couleurs de bouton accessiblesAssurez-vous que vos CTA, boutons d'action et liens réussissent WCAG par rapport à leurs arrière-plans.

Comment ça marche

La vérification du contraste s'exécute entièrement dans votre navigateur avec l'algorithme de luminance relative WCAG 2.1 — sans bibliothèque, sans serveur, juste des mathématiques écrites à la main qui suivent la spécification exactement. Chaque résultat se met à jour en temps réel pendant que vous tapez ou choisissez une couleur.

1
Saisie hexadécimale et normalisation
Les valeurs hexadécimales à 3 chiffres (#abc) et à 6 chiffres (#aabbcc) sont acceptées et normalisées en triplets RVB complets. Une saisie invalide est rejetée immédiatement plutôt que de basculer silencieusement vers le noir, un contour rouge apparaît donc au lieu d'un résultat de réussite trompeur.
2
Calcul de luminance WCAG
Chaque couleur est convertie en luminance relative avec la formule WCAG 2.1 : les valeurs de canal sRGB sont linéarisées avec une correction gamma par morceaux (division par 12,92 en dessous de 0,03928, élévation à la puissance 2,4 au-dessus), puis pondérées comme 0,2126R + 0,7152G + 0,0722B.
3
Ratio de contraste et vérifications de conformité
Le ratio de contraste est calculé comme (plus clair + 0,05) / (plus foncé + 0,05) et vérifié par rapport aux cinq seuils WCAG : texte normal AA (4,5:1), texte large AA (3:1), texte normal AAA (7:1), texte large AAA (4,5:1), et composants d'interface (3:1). Les résultats se mettent à jour à chaque frappe.
4
Suggestions de correction préservant la teinte
Quand la paire échoue au WCAG AA, l'outil explore l'espace de luminosité HSL — en s'éloignant de la luminosité d'origine dans les deux directions — pour trouver la variante la plus proche de chaque couleur qui passe le seuil de 4,5:1 tout en gardant la même teinte et saturation. L'API EyeDropper (Chromium) est aussi disponible pour prélever n'importe quelle couleur directement sur votre écran.

Outils associés

👁️

Simulateur de daltonisme

Voyez comment votre design apparaît aux personnes présentant des déficiences de la vision des couleurs. Simule la protanopie, deutéranopie, tritanopie, achromatopsie et les anomalies plus légères.

EssayerFichiers locaux

📐

Quelle est ma résolution d'écran

Voyez la résolution de votre écran en pixels CSS et réels, la taille de la fenêtre, le ratio de pixels, la profondeur de couleur, le HDR, la prise en charge tactile et le taux de rafraîchissement, et copiez le tout.

Essayer

🖥️

Test de pixels morts

Vérifiez si votre écran a des pixels morts ou bloqués avec un plein écran noir, blanc, rouge, vert, bleu et gris, plus un réparateur de pixels bloqués en option.