Vérificateur de contraste des couleurs (WCAG)

Pourquoi vérifier le contraste des couleurs

Un gris clair sur fond blanc paraît élégant sur l'écran du graphiste, mais devient pénible à lire sur un téléphone en plein soleil, sur un vieil écran ou pour une personne malvoyante. La sensibilité au contraste baisse aussi avec l'âge. Un bon contraste rend donc une page plus lisible pour tout le monde.

Ce vérificateur de contraste calcule le ratio entre la couleur du texte et celle du fond selon les règles d'accessibilité WCAG 2.x, indique critère par critère si le couple passe le niveau AA ou AAA, et propose la couleur corrigée la plus proche quand il échoue.

Mode d'emploi

1. Dans « Couleur du texte » et « Couleur du fond », utilisez le sélecteur ou tapez un code : HEX (#767676), RGB, HSL ou un nom CSS comme rebeccapurple. Le curseur « Opacité » gère la transparence.
2. Lisez le ratio et le tableau des verdicts : chaque case affiche un symbole et le mot « Réussi » ou « Échec », pas seulement une couleur.
3. Regardez l'« Aperçu en direct » : texte normal, grand texte, gras, bouton, lien, champ et icône.
4. En cas d'échec, « Couleurs corrigées » propose un texte ou un fond qui atteint AA ou AAA ; « Appliquer » le reprend. « Inverser » échange les deux couleurs.
5. Pour tout un nuancier, collez vos couples dans « Vérifier une liste de paires », un par ligne, puis cliquez sur « Vérifier la liste ».

« Copier le lien de ces couleurs » crée une adresse qui rouvre la même paire. Tout se calcule dans votre navigateur.

Le ratio de contraste expliqué simplement

Chaque couleur reçoit une luminance relative, de 0 pour le noir à 1 pour le blanc, calculée à partir du rouge, du vert et du bleu (le vert pèse le plus). Le ratio vaut (luminance la plus claire + 0,05) divisée par (luminance la plus foncée + 0,05). Il va de 1:1, deux couleurs identiques, à 21:1, noir sur blanc. Le seuil se juge sur le ratio exact, sans arrondi : 4,499 n'atteint pas 4,5.

Pour une couleur semi-transparente, l'outil calcule d'abord la couleur réellement affichée : du noir à 50 % sur blanc donne #808080, d'où 3,95:1. Un fond transparent est posé sur du blanc.

Seuils AA et AAA

• Texte normal : 4,5:1 pour AA, 7:1 pour AAA.
• Grand texte : 3:1 pour AA, 4,5:1 pour AAA. Un texte est « grand » à partir de 18 points, soit environ 24 px, ou de 14 points en gras, soit environ 18,66 px.
• Composants d'interface et graphiques : 3:1 pour la bordure d'un champ, une icône seule, un repère de focus ou une courbe. Ce critère n'a pas de niveau AAA.

Le niveau AA est celui que visent la plupart des sites. Dans l'Union européenne, des directives imposent l'accessibilité des sites publics et de nombreux services privés, et les normes nationales, comme le référentiel français, reprennent ces critères WCAG. Les obligations exactes dépendent de votre activité : renseignez-vous en cas de doute.

La case « Afficher le score APCA » ajoute un score issu d'une méthode encore expérimentale, envisagée pour de futures règles, sans valeur officielle aujourd'hui.

Conseils pour des couleurs lisibles

• Gardez votre teinte et jouez sur la luminosité, comme le fait « Couleurs corrigées ». Exemple : #999999 sur blanc n'offre que 2,85:1 ; l'outil propose #767676, le gris le plus clair qui atteint 4,5:1.
• Ne transmettez jamais une information par la couleur seule : ajoutez un mot, une icône ou un soulignement. La « Simulation des daltonismes » montre ce que voit une personne qui confond le rouge et le vert.
• Pour un texte posé sur une photo, vérifiez la zone la plus claire de l'image.
• Pour un thème sombre, contrôlez aussi les paires inversées.

Questions fréquentes

Quel ratio de contraste faut-il viser ?

Au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte et les éléments d'interface : c'est le niveau AA. Visez 7:1 pour le corps de texte si votre public compte beaucoup de seniors.

Pourquoi #777777 échoue alors qu'il ressemble à #767676 ?

Le seuil est strict : #777777 donne 4,48:1 et #767676 donne 4,54:1. L'œil ne voit pas la différence, mais la limite tombe pile entre les deux.

Le texte indicatif d'un champ doit-il être contrasté ?

Oui, c'est du texte : il doit atteindre 4,5:1. Seuls les éléments désactivés sont exemptés par les règles WCAG.

Mes couleurs sont-elles envoyées quelque part ?

Non. La paire en cours et votre liste sont seulement gardées sur cet appareil pour la prochaine visite.