Outil gratuit · Webdesign

Vos couleurs sont-elles assez lisibles ?

Entrez la couleur de votre texte et celle de votre fond : vous obtenez le ratio de contraste exact et si vos couleurs passent les seuils d'accessibilité AA et AAA.

Vos deux couleurs

Simulation d'accessibilité visuelle

Simulation approximative, à visée pédagogique : elle ne remplace pas un test avec de vraies personnes concernées.

Titre de section

Voici un paragraphe de texte courant, la taille utilisée pour la plupart des contenus d'un site : c'est celui qui doit rester lisible pour tout le monde, y compris les personnes malvoyantes.

Un lien texteBadge

Ratio WCAG

14.76:1

Score APCA (Lc)

102

Complémentaire, non normatif

AA · texte normal (4,5:1) Conforme
AAA · texte normal (7:1) Conforme
AA · grand texte (3:1) Conforme
AAA · grand texte (4,5:1) Conforme
Composants d'interface / icônes utiles (3:1) Conforme

Variantes suggérées

Basées sur votre couleur de texte , ajustées en luminosité pour rester dans le même esprit de couleur.

  • Aa
    15.24:1

    Conforme AA et AAA

  • Aa
    14.27:1

    Conforme AA et AAA

Trois conseils

1. Le contraste ne se limite pas au texte : boutons, icônes et bordures utiles ont aussi besoin d'être visibles (3:1 minimum).

2. Un ratio conforme sur fond blanc ne l'est pas forcément sur un fond de couleur : revérifiez à chaque changement de fond.

3. Le mode sombre a ses propres couleurs : testez-le séparément, il ne suffit pas d'inverser le mode clair.

Vous préférez qu'un pro s'en occupe ?

Le contraste n'est qu'un détail parmi d'autres. Création de site clé en main dès 2 400 € : tout est vérifié, y compris l'accessibilité.

← Voir les autres outils gratuits

Pourquoi ça compte

Un détail qui change beaucoup de choses

Une partie de vos visiteurs vous échappe sinon

Une personne malvoyante, ou simplement en plein soleil sur son téléphone, peut ne pas lire un texte trop peu contrasté avec son fond.

Ça se voit aussi sur du bon matériel

Un contraste trop faible fatigue tout le monde à la lecture, même sur un bel écran, même pour une bonne vue.

C'est un critère d'accessibilité reconnu

Les ratios AA et AAA viennent des règles internationales WCAG, une référence utilisée pour juger de l'accessibilité d'un site.

FAQ

Vos questions sur le contraste des couleurs

Quelle est la différence entre AA et AAA ?

AA est le niveau couramment demandé pour un site (ratio 4,5:1 pour le texte normal, 3:1 pour le grand texte). AAA est plus exigeant (7:1 et 4,5:1) : il n'est pas toujours atteignable selon votre charte graphique, mais c'est un idéal à viser quand c'est possible.

Qu'est-ce qu'un « grand texte » au sens de ces règles ?

En général, un texte à partir de 18 points (24px), ou 14 points en gras (environ 19px). Un gros titre profite donc d'un seuil moins strict qu'un texte de paragraphe.

Le ratio est-il vraiment exact, ou juste une estimation ?

Le calcul suit la formule officielle de luminance relative des règles WCAG, appliquée directement à vos deux couleurs : ce n'est pas une estimation visuelle, c'est le même calcul que les outils d'audit d'accessibilité utilisent.

Si mes couleurs ne passent pas, dois-je tout changer ?

Pas forcément tout : souvent, foncer ou éclaircir légèrement une seule des deux couleurs suffit à passer le seuil, en gardant le même esprit de charte graphique. C'est ce que propose la correction la plus proche affichée par l'outil.

Qu'est-ce que le score APCA affiché à côté du ratio WCAG ?

APCA est une autre méthode de calcul du contraste, plus récente, qui tient mieux compte de la perception réelle de l'œil. Elle n'est pas (encore) une exigence légale : l'outil l'affiche à titre complémentaire, en plus du ratio WCAG qui reste la référence normative.

À quoi sert le mode « palette complète » ?

Si vous avez déjà plusieurs couleurs de charte graphique, ce mode affiche en une seule fois le ratio de chaque couleur sur chaque autre : pratique pour repérer d'un coup d'œil les combinaisons à éviter.

La simulation de daltonisme est-elle fiable à 100 % ?

Non, c'est une approximation pédagogique qui donne une idée du rendu, pas un diagnostic médical ni une garantie : le mieux reste de tester avec de vraies personnes concernées quand c'est possible.

Mes couleurs restent-elles privées ?

Oui : tout le calcul se fait dans votre navigateur. Rien n'est envoyé sur un serveur, sauf si vous copiez volontairement un lien de partage, qui ne contient que les deux couleurs choisies.

On revoit vos couleurs ensemble ?

30 minutes pour regarder votre visibilité. Vous repartez avec vos priorités. Gratuit, sans engagement.

Réserver mon diagnostic gratuit

30 minutes · sans engagement

Réserver mon diagnostic gratuit

Réserver un diagnostic gratuit

30 minutes, sans engagement.

L’agenda est fourni par Calendly. En l’ouvrant, vous chargez son service, qui dépose ses propres cookies. Tant que vous ne l’ouvrez pas, rien n’est chargé.

Ouvrir plutôt sur calendly.com