Outil gratuit
Vérifier le contraste de deux couleurs
Le ratio réel, les verdicts AA et AAA, et une couleur corrigée quand votre texte ne passe pas le seuil.
Choisissez une couleur de texte et une couleur de fond : le ratio, les verdicts et un aperçu réel du texte s'affichent à chaque changement.
Hexadécimal ou rgb(). Le nuancier et le champ portent la même valeur.
La couleur réellement peinte derrière le texte, jamais une image.
- 4,54:1
- Contraste mesuré
- #767676
- Texte
- #ffffff
- Fond
21:1 au maximum, avec du noir sur du blanc
- Texte courant, niveau AA : réussi (seuil de 4,5:1)
- Texte courant, niveau AAA : échoué (seuil de 7:1)
- Grand texte, niveau AA : réussi (seuil de 3:1)
- Grand texte, niveau AAA : réussi (seuil de 4,5:1)
- Bordure, icône ou contour de bouton, niveau AA : réussi (seuil de 3:1)
Un titre de 24 pixels
Un paragraphe courant, à la taille où se lisent vraiment les conditions, les prix et les mentions obligatoires. C'est lui qui décide si la page est lisible, pas le titre.
Vos couleurs sont belles mais votre texte se lit mal au soleil ? Nous dessinons des sites lisibles avant d'être décoratifs.
Obtenir un devis en 2 minutes100 % dans votre navigateur : vos fichiers et vos textes ne sont jamais envoyés sur un serveur.
À quoi sert cet outil ?
Le seuil de 4,5 pour 1 n'est pas une lubie de graphiste : c'est le niveau AA exigé par le RGAA en France, adossé à la directive européenne sur l'accessibilité, dont les obligations s'étendent désormais à des services privés (commerce en ligne, réservation, banque). Un site qui ne le tient pas est en défaut, quelle que soit son allure.
Le gris clair sur blanc, à la mode depuis dix ans, échoue presque toujours : un gris moyen tel que #999999 sur blanc plafonne à 2,8 pour 1, très en dessous du seuil. Ce que vous voyez sur un écran neuf, en intérieur, votre client le lit sur un téléphone en plein soleil, et il ne le lit pas.
Toutes les tailles ne sont pas logées à la même enseigne : le grand texte, à partir de 18 points ou de 14 points en gras, se contente de 3 pour 1, comme les éléments d'interface (bordure de champ, pictogramme porteur de sens). En revanche la couleur ne doit jamais porter seule une information : un champ passé au rouge sans message ni symbole disparaît entièrement pour un visiteur daltonien, et ils sont près d'un homme sur douze.
Comment s'en servir
Poser les deux couleurs
La couleur du texte et celle du fond se choisissent au nuancier ou se collent en code hexadécimal, tel qu'il figure dans votre charte graphique ou dans le code de votre site.
Lire le ratio et les trois verdicts
Le ratio va de 1 pour 1 (deux couleurs identiques) à 21 pour 1 (noir sur blanc). Les verdicts sont donnés séparément pour le texte courant, le grand texte et les éléments d'interface, car les seuils diffèrent.
Appliquer la correction proposée
Quand le seuil n'est pas atteint, l'outil propose la teinte la plus proche qui passe : la couleur est assombrie ou éclaircie en gardant sa nuance, pour que votre identité visuelle reste reconnaissable.
FAQ
Questions fréquentes
Non. Le calcul est fait par votre navigateur, sur votre appareil : montants, dates et coordonnées ne sont ni envoyés, ni stockés, ni consultés par qui que ce soit. Vous pouvez saisir les chiffres réels d'un client sans aucun risque.
Ce sont deux exigences des règles internationales WCAG, reprises par le RGAA français. AA demande 4,5 pour 1 sur du texte courant et 3 pour 1 sur du grand texte : c'est le niveau réglementaire. AAA monte à 7 pour 1, un confort visé sur les textes longs, rarement obligatoire.
Parce qu'il se lit bien pour vous, sur votre écran, dans votre lumière. Le ratio mesure ce qui reste lisible avec une vue fatiguée, un écran bon marché ou un reflet de plein jour. Passer de #999999 à #595959 sur blanc suffit à franchir le seuil sans changer l'esprit du gris.
Non, c'est le premier point d'une liste : navigation au clavier, textes de remplacement des images, libellés de champs, hiérarchie des titres, taille des cibles tactiles. Le contraste a l'avantage de se mesurer en une seconde, ce qui en fait le bon point de départ d'un audit.
Oui, et c'est l'oubli le plus fréquent : un thème sombre n'est pas la version inversée du thème clair, ses contrastes se calculent séparément. Un gris qui passait sur blanc peut échouer sur un fond anthracite, notamment pour les bordures et les textes secondaires.
Oui, entièrement gratuit, sans compte à créer, sans filigrane et sans limite d'utilisation. Beffroi Studio met ces outils à disposition pour vous faire découvrir son savoir-faire web.
À découvrir
Trois outils qui vont avec
Prêt à être trouvé sur Google ?
Chaque semaine sans site, des clients cherchent votre métier sur Google et trouvent le concurrent d'à côté. En 2 minutes, obtenez votre prix ferme ; ou appelez, on s'occupe du reste.
Auditer mon site actuel, gratuitement