Contrast Checker : Outil de ratio WCAG

Qu'est-ce que Contrast Checker ?

Contrast Checker calcule le ratio de contraste basé sur la luminance entre une couleur de premier plan et une couleur d'arrière-plan afin de déterminer si la combinaison respecte les normes d'accessibilité WCAG 2.1. Il teste les quatre seuils de conformité : AA et AAA pour le texte normal, et AA et AAA pour le grand texte. L'outil affiche un aperçu textuel en direct pour voir exactement ce que les lecteurs percevront. Les auditeurs d'accessibilité, les designers UI et les développeurs frontend l'utilisent avant de publier toute nouvelle combinaison de couleurs pour éviter les échecs de contraste en production. Tout fonctionne dans le navigateur — aucun appel serveur, aucune connexion requise.

Fonctionnalités principales

• Calcul du ratio de contraste WCAG 2.1 — Utilise la formule standard de luminance relative (avec le seuil de linéarisation 0,03928 et la formule de ratio (L1 + 0,05) / (L2 + 0,05)) pour produire des résultats cohérents avec les outils WCAG officiels.
• Vérification de conformité AA et AAA — Quatre badges de conformité se mettent à jour en temps réel : Normal AA (≥ 4,5:1), Normal AAA (≥ 7:1), Grand AA (≥ 3:1) et Grand AAA (≥ 4,5:1). Un badge vert avec une coche signifie réussi ; un badge rouge avec un X signifie échoué.
• Seuils pour texte normal et grand — L'outil applique des seuils séparés pour le texte normal et le grand texte (défini comme 18pt ou 14pt en gras), conformément au Critère de Succès 1.4.3 de WCAG 2.1.
• Aperçu en temps réel avec texte d'exemple — La carte d'aperçu affiche un titre, un paragraphe, du texte en petite taille et un bouton dans les couleurs choisies, pour évaluer la lisibilité d'un coup d'œil.
• Copier le ratio de contraste dans le presse-papiers — Cliquez sur l'icône Copier à côté de l'affichage du ratio pour écrire la chaîne du ratio (ex. 4,53:1) dans le presse-papiers et consigner la vérification dans votre historique.
• Fonctionne hors ligne après chargement — Tous les calculs de ratio sont implémentés en JavaScript sans appels API externes.

Comment utiliser Contrast Checker

Étape 1 : Définir la couleur de premier plan

Accédez à Contrast Checker. L'outil s'ouvre avec le noir (#000000) comme premier plan et le blanc (#FFFFFF) comme arrière-plan — un ratio de 21:1 qui passe les quatre niveaux WCAG.

Définissez la couleur de premier plan (texte) de l'une des façons suivantes :

• En cliquant sur l'échantillon de couleur (carré coloré) pour ouvrir le sélecteur de couleur natif du navigateur
• En saisissant un code hexadécimal directement dans le champ texte à côté de l'échantillon (ex. #1E293B)

L'échantillon et le champ texte restent synchronisés. L'échantillon de prévisualisation sous les champs affiche la couleur avec un texte d'étiquette à contraste automatique.

Étape 2 : Définir la couleur d'arrière-plan

Utilisez les mêmes contrôles sur le côté droit de la carte de saisie des couleurs pour définir la couleur d'arrière-plan. L'outil utilise une mise en page à trois colonnes : premier plan à gauche, un bouton d'échange au centre et arrière-plan à droite.

Étape 3 : Lire le ratio de contraste et les badges de conformité

La carte Ratio de Contraste apparaît sous les champs et affiche :

• Le ratio calculé en grande typographie pixel-art (ex. 7,23:1)
• Une icône Copier pour copier la chaîne du ratio
• Quatre badges de conformité : Normal AA (≥ 4,5:1), Normal AAA (≥ 7:1), Grand AA (≥ 3:1), Grand AAA (≥ 4,5:1)

Un badge vert avec une icône de coche indique que la combinaison passe ce niveau. Un badge rouge avec un X indique un échec. Visez au moins Normal AA pour tout le texte courant.

Étape 4 : Vérifier l'aperçu en direct

Faites défiler jusqu'à la carte Aperçu. Elle affiche quatre éléments avec les couleurs choisies :

• Un grand titre (text-2xl)
• Du texte courant (text-base)
• Du petit texte (text-sm)
• Un bouton avec les couleurs inversées (le premier plan devient l'arrière-plan et vice versa)

Cet aperçu permet de juger si les couleurs semblent lisibles avant d'écrire du code.

Étape 5 : Échanger les couleurs ou essayer des suggestions de palette accessible

Cliquez sur le bouton d'échange (icône double flèche) entre les deux champs de couleur pour inverser instantanément premier plan et arrière-plan. C'est utile pour tester les variantes clair sur foncé et foncé sur clair.

Faites défiler jusqu'au panneau Paires de Couleurs Accessibles en bas de la page. Il affiche 20 combinaisons de couleurs avec leurs ratios de contraste calculés. Cliquez sur une paire pour charger ces deux couleurs dans l'outil. La plupart des paires passent AA (4,5:1), indiqué par une coche. Quelques paires passent uniquement Grand AA (3:1) et sont marquées d'un X — elles conviennent aux titres et grands éléments UI, mais pas au texte courant normal.

Exemples pratiques

Vérifier une étiquette de bouton sur son arrière-plan

Votre design utilise du texte blanc #FFFFFF sur un bouton bleu #3B82F6. Saisissez #FFFFFF comme premier plan et #3B82F6 comme arrière-plan. L'outil calcule approximativement 3,7:1. Le badge Normal AA échoue (nécessite 4,5:1), mais Grand AA passe. Il faut assombrir le bleu — essayez #1D4ED8 qui donne environ 6,7:1 et passe Normal AA.

Valider une couleur de texte en mode sombre

Votre design en mode sombre utilise du texte #94A3B8 (slate-400) sur fond #0F172A (slate-900). Saisissez ces valeurs. Le ratio obtenu est environ 6,96:1, passant Normal AA, Grand AA et Grand AAA. Il manque de peu Normal AAA (nécessite 7:1). Vous pouvez utiliser cette combinaison en toute confiance pour le texte courant au niveau AA.

Tester une couleur de marque comme couleur de texte

Votre orange de marque est #F97316. Vous souhaitez l'utiliser comme couleur de lien sur fond blanc #FFFFFF. Le ratio est d'environ 2,8:1 — échec Normal AA. L'aperçu confirme que le texte semble lisible pour certains utilisateurs, mais échouerait à un audit d'accessibilité. Passez à une teinte plus sombre comme #C2410C (≈ 5,2:1) pour passer AA.

Conseils et bonnes pratiques

Testez à la fois premier plan sur arrière-plan et arrière-plan sur premier plan. Le bouton d'échange permet d'inverser les rôles en un clic. Certains motifs UI (boutons, sélections surlignées) utilisent la couleur de premier plan comme petit arrière-plan.

Le panneau Paires de Couleurs Accessibles affiche les ratios avec une décimale. Ces ratios calculés en temps réel sont affichés sur chaque carte de teinte préréglée. Cliquez sur une teinte pour charger les deux couleurs — utilisez-la comme point de départ quand vous avez besoin d'une palette fonctionnelle rapidement.

Les seuils de grand texte s'appliquent à 18pt (24px) ou 14pt en gras (environ 18,67px en gras). L'outil affiche les résultats Grand AA et Grand AAA pour rappeler que les titres ont des seuils plus souples. Une combinaison qui échoue Normal AA peut rester valide pour un usage exclusif sur les grands titres.

Partagez les résultats avec une URL. Les couleurs actuelles de premier plan et d'arrière-plan sont encodées dans l'URL de la page. Copiez l'URL de la barre d'adresse après avoir saisi vos couleurs pour envoyer une vérification de contraste spécifique à un collègue ou l'inclure dans un document de revue de design.

Enregistrez les paires de couleurs courantes comme préréglages. Les comptes supporters peuvent enregistrer les valeurs hexadécimales de premier plan et d'arrière-plan comme préréglage nommé. C'est utile pour les équipes qui vérifient les mêmes combinaisons de couleurs de marque de manière répétée.

Problèmes courants et résolution

Le ratio affiche 1:1 quelle que soit la saisie. Cela signifie généralement que les deux champs de couleur ont la même valeur. Vérifiez que vous avez saisi des couleurs différentes pour le premier plan et l'arrière-plan. Si vous venez de coller le même hex dans les deux champs, l'un doit être modifié.

Le badge de conformité indique un échec mais je pensais que mes couleurs étaient correctes. La formule WCAG est plus stricte qu'elle ne peut le paraître visuellement. Une combinaison noir sur gris foncé comme du texte #333333 sur fond #555555 donne seulement environ 1,7:1, bien en dessous de AA. Fiez-vous au résultat de l'outil plutôt qu'au jugement visuel.

La restauration de l'historique ne recharge pas mes couleurs. La fonction de restauration de l'historique analyse les entrées au format FG: #XXXXXX / BG: #XXXXXX. Les entrées enregistrées hors de cet outil (ou avec des données corrompues) peuvent ne pas être analysées correctement. Ressaisissez les couleurs manuellement dans ces cas.

Le bouton Copier le ratio ne montre aucune réaction. L'API Clipboard nécessite HTTPS ou localhost. En HTTP simple, l'écriture dans le presse-papiers échoue. L'outil affiche un toast d'erreur dans ce cas. Faites un clic droit sur le texte du ratio et utilisez l'option de copie native du navigateur comme solution de remplacement.

La carte d'aperçu affiche des couleurs de texte inattendues. L'aperçu affiche le titre et le texte courant dans votre couleur de premier plan sur votre arrière-plan. Le bouton dans l'aperçu échange intentionnellement les deux couleurs pour démontrer la combinaison inverse.

Confidentialité et sécurité

Contrast Checker effectue tous les calculs localement dans votre navigateur. La formule de luminance relative et le calcul du ratio de contraste s'exécutent en JavaScript sur votre appareil. Aucune valeur de couleur n'est envoyée à un serveur. L'outil ne nécessite pas de compte, ne dépose pas de cookies de suivi et ne consigne pas les combinaisons de couleurs testées. Il fonctionne entièrement hors ligne une fois la page chargée, ce qui le rend sûr pour évaluer des couleurs dans des systèmes de design confidentiels ou des directives de marque non publiées.

Foire aux questions

Contrast Checker est-il gratuit ?

Oui. L'intégralité des fonctionnalités de vérification de contraste WCAG — incluant les quatre badges de conformité, l'aperçu en temps réel, le bouton d'échange et le panneau de palette accessible — est entièrement gratuite sans compte requis. Les fonctionnalités supporters comme les préréglages, le suivi de l'historique et les notes d'outil sont disponibles avec un abonnement supporter Ko-fi.

Contrast Checker fonctionne-t-il hors ligne ?

Oui. Une fois la page chargée, tous les calculs de contraste, l'affichage de l'aperçu et les mises à jour des badges de conformité fonctionnent sans accès réseau. Les formules de luminance relative et les comparaisons de seuils WCAG sont du JavaScript pur s'exécutant dans votre navigateur.

Mes données sont-elles en sécurité avec Contrast Checker ?

Oui. Aucune donnée de couleur n'est transmise à un serveur. L'outil n'effectue aucune requête réseau pendant une vérification de contraste. Vos couleurs de premier plan et d'arrière-plan n'existent que dans la mémoire du navigateur et, si vous utilisez la fonctionnalité de partage, sont encodées dans l'URL que vous choisissez de copier.

Quelle version de WCAG cet outil suit-il ?

L'outil implémente le Critère de Succès 1.4.3 de WCAG 2.1 (Contraste — Minimum) et 1.4.6 (Contraste — Amélioré). Le niveau AA exige un ratio d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Ces seuils correspondent aux valeurs affichées dans les badges de conformité (Normal AA ≥ 4,5:1, Normal AAA ≥ 7:1, Grand AA ≥ 3:1, Grand AAA ≥ 4,5:1).

Qu'est-ce qui compte comme « grand texte » selon WCAG ?

WCAG définit le grand texte comme du texte d'au moins 18 points (environ 24px) en graisse normale, ou d'au moins 14 points (environ 18,67px) en gras. L'outil étiquette les troisième et quatrième badges de conformité « Grand AA » et « Grand AAA ». L'aperçu affiche un titre en text-2xl qui tombe généralement dans la catégorie grand texte.

Comment le ratio de contraste est-il calculé ?

L'outil convertit chaque couleur hexadécimale en luminance relative à l'aide de la formule WCAG : chaque canal RVB est linéarisé (divisé par 255, puis en appliquant la correction gamma sRGB : s / 12,92 si s <= 0,03928, sinon ((s + 0,055) / 1,055) ^ 2,4). La luminance est ensuite 0,2126 R + 0,7152 G + 0,0722 * B. Le ratio de contraste est (L_plus_clair + 0,05) / (L_plus_sombre + 0,05).

Puis-je tester des couleurs autres que des codes hexadécimaux ?

Les champs de saisie de couleur acceptent les codes hexadécimaux en texte (avec ou sans #). Vous pouvez également utiliser l'échantillon du sélecteur de couleur natif. Si vous avez une valeur RVB ou TSL, utilisez le Color Picker pour la convertir d'abord en hexadécimal, puis collez-la ici.

Quel est le ratio de contraste maximal possible ?

Le ratio de contraste maximal est de 21:1, qui est le ratio entre le noir pur (#000000) et le blanc pur (#FFFFFF). L'outil s'ouvre avec ces deux couleurs par défaut pour démontrer le ratio maximal atteignable.

Puis-je l'utiliser pour des éléments UI autres que le texte ?

WCAG 2.1 couvre également le contraste non textuel dans le Critère de Succès 1.4.11, qui exige un ratio de 3:1 pour les composants UI et les objets graphiques. Le badge Grand AA de l'outil (≥ 3:1) correspond à ce seuil et peut être utilisé pour évaluer les couleurs d'icônes, les indicateurs de focus et les bordures de contrôles de formulaire, même si l'aperçu affiche du texte.

Comment partager une vérification de contraste avec mon équipe ?

Après avoir saisi vos couleurs de premier plan et d'arrière-plan, l'URL de la page encode les deux valeurs. Copiez l'URL de la barre d'adresse et partagez-la directement. Les destinataires qui ouvrent le lien voient les mêmes couleurs préchargées avec une notification « Chargé depuis le partage ». Vous pouvez également utiliser les boutons de partage en bas de la page pour publier sur Twitter, LinkedIn ou Reddit.

Outils connexes

• Color Picker — Prélevez des valeurs hexadécimales exactes depuis votre écran ou des designs existants avant de les tester ici.
• Color Converter — Convertissez votre couleur de RVB, TSL ou CMJN en hexadécimal avant de la saisir dans le vérificateur de contraste.
• Bientôt disponible: Palette Generator — Générez une palette complète puis vérifiez chaque combinaison dans Contrast Checker pour garantir la conformité en matière d'accessibilité.

Essayez Contrast Checker maintenant : Glyph Widgets Contrast Checker