English
Español
Português
Français
Deutsch
Italiano
Türkçe
Bahasa IndonesiaVérificateur de contraste
Vérifiez si votre combinaison texte et arrière-plan est accessible. Choisissez les couleurs à la main avec les fenêtres couleur, utilisez les préréglages Blanc et Noir, ou importez une image et cliquez sur un pixel. Notes WCAG AA et AAA instantanées.
Déposez votre image ici
ou cliquez pour parcourir, glisser-déposer ou coller fonctionne aussi
URL d'image directes uniquement, doivent se terminer par .jpg, .png, .gif, .webp ou .svg
Cliquez sur l'image ou la palette pour définir comme Texte
Rapport de contraste
5.20 : 1
Bon contraste
Notes WCAG
Le renard brun rapide saute par-dessus le chien paresseux, texte normal 16px.
Grand texte 24px en gras
Chargement de l'image...
Qu'est-ce que la vérification du contraste ?
Un texte lisible pour tous
Le ratio de contraste mesure la distinction entre le texte et son fond, de 1:1 (même couleur) à 21:1 (noir sur blanc). Notre vérificateur utilise la formule de luminance relative WCAG, la même norme que les auditeurs et les design systems.
Visez au moins 4.5:1 pour le texte normal (AA), 3:1 pour le grand texte et 7:1 pour AAA. Testez vos couleurs de marque, styles de boutons ou tout texte sur image avant de livrer.
Utilisation
01
Choisissez les couleurs
Saisissez le HEX, utilisez la fenêtre couleur native ou les préréglages Blanc et Noir et Aléatoire. Échangez à tout moment.
02
Ou piochez depuis une image
Cliquez sur l'icône image, importez un JPG/PNG/WebP, puis cliquez sur l'image ou sa palette extraite. Basculez la cible Texte et Arrière-plan.
03
Livrez une UI accessible
Lisez le ratio, les notes AA/AAA et l'aperçu en direct.
04
Partagez et exportez
Copiez l'URL (?text=…&bg=…) pour partager la paire exacte, Copiez le CSS pour la transmission, ou Téléchargez le rapport TXT.
Exemples concrets
Texte courant 16px : #767676 sur #FFFFFF (4.54:1 réussi) contre #999999 (2.85:1 échoué)
La vérification la plus courante. Le gris secondaire semble propre mais les gris clairs échouent. Testez les deux paires ci-dessus : foncez le texte atténué vers #767676 ou #595959 pour passer AA. Le plus petit texte de lecture suivie exige le 4.5:1 complet.
Étiquettes de boutons : blanc sur bleu
La vérification UI la plus testée. Les bleus vifs (environ 3.9:1) passent seulement en grand texte. Foncez les fonds de boutons vers environ 5 à 6:1 pour les étiquettes de taille normale. Testez séparément les états normal, survol et désactivé.
Liens dans le corps de texte
Les utilisateurs collent le bleu de lien et le fond du corps pour voir si les liens repérés par la seule couleur atteignent 4.5:1. Sinon, foncez le lien ou ajoutez un soulignement (la couleur seule ne doit pas être le seul indice).
Champs, bordures et petits caractères 13px
Bordures de champs, cases à cocher et mentions 13px sont là où le contraste meurt. Bordures et UI exigent 3:1. Les légendes 13px exigent 4.5:1 comme le corps. Collez ici votre gris de bordure et le fond du champ.
Titres 24 à 32px et graphiques
Le grand texte (24px et plus, ou 19px gras et plus) exige seulement 3:1, comme les icônes, traits de graphiques et anneaux de focus. Testez titres, icônes et lignes de dataviz comme des paires distinctes du corps.
Texte sur photos et dégradés
Cas image principal : importez le visuel principal, cliquez sur les pixels les plus clairs et les plus foncés derrière le titre. Si l'un échoue, ajoutez un voile ou une ombre portée et retestez la couleur mélangée. Ne testez jamais une seule étape d'un dégradé.