Vérificateur de Contraste : Test WCAG AA/AAA | Gratuit

A Notre vérificateur de contraste de couleurs gratuit est conçu pour des paires de couleurs unies. Lorsque vous placez du texte sur un dégradé, identifiez le point du dégradé où la couleur de votre texte présente le *plus faible* contraste. Vous devez tester la couleur de votre texte de premier plan par rapport aux sections les plus claires et les plus sombres de l'arrière-plan dégradé pour garantir la conformité WCAG AA ou AAA sur l'ensemble du design.

A Si les couleurs de votre marque ne respectent pas le contraste WCAG, vous devrez ajuster la couleur de votre premier plan (texte) ou de votre arrière-plan. Notre outil gratuit de vérification du contraste des couleurs vous aide à itérer rapidement. Modifiez légèrement la teinte, la saturation ou la luminosité de la couleur non conforme. Entrez à nouveau les nouveaux codes couleur dans l'outil et testez instantanément. Visez le rapport de contraste minimal requis tout en restant aussi proche que possible de votre palette de marque, en priorisant la lisibilité pour tous les utilisateurs.

A Pour trouver les codes couleur HEX de votre site web, vous pouvez utiliser les outils de développement du navigateur. Dans la plupart des navigateurs (comme Chrome ou Firefox), faites un clic droit sur un élément et sélectionnez 'Inspecter'. Le panneau 'Éléments' ou 'Styles' affichera les règles CSS, y compris les propriétés de couleur. Vous pouvez également utiliser une extension de navigateur, comme un outil de 'pipette à couleurs', pour prélever des couleurs directement de votre écran et obtenir leurs valeurs HEX, RVB ou HSL pour les saisir dans notre Vérificateur de Contraste des Couleurs gratuit.

A Non, cet outil ne gère que les paires de couleurs unies. Pour les images, passez par un autre logiciel. Prenez une capture d'écran de la zone concernée, puis utilisez une pipette pour échantillonner les pixels les plus clairs et les plus sombres sous le texte. Testez les deux avec votre couleur de texte. Si l'un échoue, ajoutez un calque semi-transparent derrière le texte — un noir à 40% d'opacité fait souvent l'affaire.

A Oui, vous pouvez saisir des couleurs en HEX, RGB ou HSL. Collez simplement votre valeur dans le champ — l'outil détecte automatiquement le format. Par exemple, tapez 'rgb(255, 0, 0)' ou 'hsl(0, 100%, 50%)' et ça fonctionne immédiatement. Utile quand vous extrayez des couleurs depuis du code CSS.

A Oui. Saisissez d'abord la paire par défaut, puis remplacez les couleurs de survol séparément. WCAG exige que les états de survol et de focus respectent aussi les contrastes minimaux – pas seulement le texte statique. Par exemple, si votre fond de bouton passe de #007bff à #0056b3 au survol, testez les deux contre le texte blanc. Un piège courant : les designers éclaircissent trop les fonds au survol, ce qui ruine le contraste.

A Les éléments non textuels nécessitent aussi du contraste, mais avec des règles un peu différentes. Le WCAG exige un rapport de 3:1 pour les composants d'interface et les objets graphiques comme les icônes, boutons et bordures. Testez ici la couleur de votre icône contre son fond. Si le ratio est inférieur à 3:1, l'élément échoue au niveau AA. Astuce : reprenez la couleur de votre texte pour les icônes.

A Ne faites pas confiance à vos yeux — ils sont très mauvais pour juger du contraste. Deux couleurs qui vous paraissent correctes pourraient n'atteindre qu'un ratio de 2,5:1, ce qui échoue même au WCAG AA. Cet outil calcule mathématiquement, en tenant compte de la perception humaine des couleurs et de la luminance. Par exemple, un gris clair #C0C0C0 sur blanc #FFFFFF semble lisible mais n'obtient que 1,6:1. Validez toujours avec notre indicateur de réussite.

A Oui, nettement. Le niveau AA exige 4,5:1 pour le texte normal sous 18px, mais seulement 3:1 pour le grand texte (18px gras ou 24px normal). Le AAA demande 7:1 pour le texte normal et 4,5:1 pour le grand texte. Si un titre en 32px obtient 4,0:1, il passe AA mais échoue AAA. Notre outil affiche les deux seuils en un clin d'œil. Astuce : visez AA pour le corps du texte et AAA pour les titres – leur taille facilite l'obtention du ratio supérieur.

A Le calibrage de votre écran et le type de dalle modifient le rendu, mais le ratio reste purement mathématique. Un score de 4,5:1 signifie que la différence de luminance est réelle, pas seulement perçue. Si ça paraît fade, c'est souvent la luminosité qui pose problème, pas le contraste. Vérifiez sur un deuxième appareil ou ajustez le profil couleur. Conseil concret : passez en profil sRGB dans les réglages de votre système, c'est la cible standard pour le web. Vous verrez alors plus fidèlement ce que vos utilisateurs voient vraiment.