Vérificateur de contraste des couleurs

À propos du vérificateur de contraste des couleurs

Ce vérificateur de contraste des couleurs gratuit mesure le rapport de contraste entre une couleur de texte et une couleur de fond, et vous indique s'il satisfait aux niveaux WCAG AA et AAA pour le texte normal et le grand texte.

Il fonctionne dans votre navigateur — rien n'est téléversé.

Ce que signifie le rapport

Le rapport de contraste compare la luminance relative de deux couleurs — la quantité de lumière que chacune émet ou réfléchit — sur une échelle allant de 1:1 à 21:1.

• 1:1 — couleurs identiques, le texte est invisible
• 21:1 — noir pur sur blanc pur, le maximum possible
• 4.5:1 — le minimum pour le texte courant selon WCAG AA

Le détail important, c'est que le calcul repose sur la luminance, pas sur l'impression de différence entre les couleurs. Deux couleurs peuvent sembler très différentes et échouer quand même. Le rouge sur vert en est l'exemple classique : visuellement frappant, de luminance presque identique, et quasiment illisible pour beaucoup de gens.

C'est aussi pourquoi vous ne pouvez pas juger du contraste à l'œil. Les concepteurs travaillent sur de bons écrans, dans une lumière maîtrisée, avec des yeux jeunes, et le gris clair qui paraît élégant en studio disparaît sur un téléphone en plein soleil.

Les seuils

Les WCAG définissent deux niveaux, et l'exigence dépend de la taille du texte.

Niveau AA — la cible habituelle, celle à laquelle se réfèrent la plupart des lois sur l'accessibilité :

• 4.5:1 pour le texte normal
• 3:1 pour le grand texte
• 3:1 pour les composants d'interface et les graphiques porteurs de sens

Niveau AAA — une norme plus stricte, adaptée aux contenus destinés à des lecteurs malvoyants :

• 7:1 pour le texte normal
• 4.5:1 pour le grand texte

Grand texte signifie 18pt (24px) ou plus, ou 14pt (18.66px) en gras ou plus. Des lettres plus grandes ont des traits plus épais, elles supportent donc un contraste plus faible.

AA est la cible réaliste pour la plupart des sites. AAA est difficile à atteindre sur l'ensemble d'une conception et n'est pas attendu pour un contenu généraliste.

Pourquoi cela concerne bien plus de monde que vous ne le croyez

Il est tentant de ranger le contraste au rayon des « cas limites ». Les chiffres disent le contraire.

Environ 1 homme sur 12 et 1 femme sur 200 présentent une forme de déficience de la vision des couleurs — à peu près 300 millions de personnes dans le monde. Le rouge-vert est de loin la plus courante.

Presque tout le monde après 40 ans voit sa sensibilité au contraste décliner, et le cristallin jaunit avec l'âge, ce qui modifie la perception des bleus.

Tout le monde, à un moment ou à un autre. Les défauts de contraste gênent aussi les personnes à la vue parfaite qui lisent dehors, sur un écran assombri, sur un moniteur bas de gamme, ou à travers un écran de téléphone maculé dans le bus. Les améliorations d'accessibilité sont ici tout simplement des améliorations de lisibilité pour tous.

Il y a aussi une dimension juridique. Le niveau WCAG 2.1 AA est référencé en pratique par l'Americans with Disabilities Act, par la Section 508 dans les marchés publics fédéraux américains, par l'European Accessibility Act, et par des règles équivalentes au Royaume-Uni, au Canada et en Australie. Le contraste figure parmi les manquements les plus souvent cités dans les plaintes relatives à l'accessibilité, en grande partie parce qu'il est très facile à mesurer.

Là où les conceptions échouent le plus souvent

• Le texte indicatif gris clair dans les champs de formulaire — extrêmement courant, presque toujours en échec
• Du texte blanc sur une photo — le rapport change d'un endroit à l'autre de l'image ; ajoutez un calque ou un voile
• Les couleurs de marque utilisées comme couleur de texte — un bleu ou un orange d'entreprise de tonalité moyenne sur blanc tombe souvent autour de 3:1
• Les états désactivés — exemptés de l'exigence, mais qu'il vaut mieux garder lisibles
• Les liens distingués uniquement par la couleur — si un lien a la même clarté que le texte qui l'entoure, soulignez-le
• Du texte blanc sur du jaune, ou du gris sur du gris — les coupables éternels
• Le mode sombre — du blanc pur sur du noir pur fait techniquement 21:1 mais provoque une halation ; des couleurs légèrement adoucies se lisent mieux
• Les messages d'erreur en rouge sur fond blanc — souvent en dessous de 4.5:1 pour précisément le message qui compte le plus

Corriger une paire qui échoue

Quand une combinaison échoue, modifiez la clarté plutôt que la teinte. On peut généralement garder une couleur de marque reconnaissable tout en l'assombrissant ou en l'éclaircissant assez pour passer.

Approches pratiques :

Gardez la couleur de marque pour les grands éléments — titres, boutons, icônes — où le seuil est de 3:1, et utilisez une variante plus foncée pour le texte courant.

Ne modifiez qu'un seul côté. Assombrir le texte est en général moins perturbant que changer le fond.

Sur les images, ajoutez un voile — une couche sombre semi-transparente entre la photo et le texte. Elle garantit le rapport quel que soit le contenu de l'image.

Ne vous reposez pas sur la seule couleur pour transmettre une information. Ajoutez une icône, un libellé ou un soulignement, pour que l'information subsiste pour quelqu'un qui ne distingue pas du tout les couleurs.

Comment l'utiliser

• Choisissez une couleur de texte et une couleur de fond
• Consultez le rapport de contraste et les pastilles de réussite ou d'échec AA / AAA
• Lisez l'aperçu en direct pour juger par vous-même, puis ajustez les couleurs

Bon à savoir

• Testez les couleurs réelles, opacité comprise. Un texte à 70 % d'opacité est en pratique une autre couleur face à son fond.
• Vérifiez les deux thèmes. Une palette qui passe en mode clair peut échouer en mode sombre.
• Les logos sont exemptés de l'exigence de contraste, tout comme le texte incident et décoratif.
• Les polices fines demandent en pratique plus de contraste que le rapport ne le laisse croire. La norme ne mesure pas la graisse du trait, mais vos lecteurs la perçoivent.
• Vérifiez sur un téléphone en plein jour si vous le pouvez. C'est un test plus honnête que n'importe quel moniteur.
• Passer est un plancher, pas un objectif. 4.5:1 est le minimum acceptable, pas le but à atteindre.

Questions fréquentes

Qu'est-ce qu'un bon rapport de contraste ?

Pour du texte courant, au moins 4.5:1 afin de satisfaire au niveau WCAG AA — le niveau auquel se réfèrent la plupart des lois sur l'accessibilité. Le grand texte, c'est-à-dire 18pt/24px ou 14pt/18.66px en gras et au-delà, exige 3:1. Le niveau AAA, plus strict, demande 7:1 pour le texte normal. Considérez ces valeurs comme des minimums et non comme des objectifs ; une lecture confortable se situe généralement bien au-dessus.

Quelle est la différence entre WCAG AA et AAA ?

AA est la norme pratique que la plupart des réglementations et des organisations adoptent, exigeant 4.5:1 pour le texte normal et 3:1 pour le grand texte. AAA est plus strict, à 7:1 et 4.5:1, et vise les contenus destinés spécifiquement à des lecteurs malvoyants. AAA est difficile à atteindre sur toute une conception et n'est pas attendu des sites généralistes.

Pourquoi ma combinaison de couleurs échoue-t-elle alors qu'elle me semble correcte ?

Parce que le contraste se calcule à partir de la luminance, et non de l'impression de différence entre deux couleurs. Le rouge et le vert paraissent très différents mais ont une luminance proche, ce qui explique l'échec de cette association. Le jugement personnel est également peu fiable : les concepteurs travaillent en général sur de bons écrans, sous un éclairage maîtrisé et avec une bonne vue, des conditions que la plupart des lecteurs ne partagent pas.

Le contraste compte-t-il pour les images et les icônes ?

Oui. Les WCAG exigent 3:1 pour les composants d'interface et pour les graphiques porteurs de sens, comme les icônes indiquant un statut ou la bordure d'un champ de formulaire. Les images purement décoratives et les logos sont exemptés. Le texte placé sur une photo est le problème courant, puisque le rapport change d'un point à l'autre de l'image — un calque semi-transparent le résout.

Comment corriger une paire de couleurs en échec sans perdre ma couleur de marque ?

Ajustez la clarté plutôt que la teinte. Une version plus foncée ou plus claire de la même couleur reste généralement reconnaissable et fidèle à la marque tout en franchissant le seuil. Vous pouvez aussi garder la couleur d'origine pour les titres, les boutons et les icônes, où seuls 3:1 sont requis, et utiliser une variante plus foncée pour le texte courant, où s'applique le 4.5:1.

Le noir pur sur blanc pur est-il le meilleur choix ?

C'est le maximum, à 21:1, mais pas nécessairement le plus confortable. Un contraste très élevé peut provoquer une halation — un effet de halo autour des lettres — en particulier en mode sombre et chez certains lecteurs dyslexiques ou astigmates. Un gris très foncé sur un blanc cassé, ou un blanc adouci sur un gris foncé, se lit souvent plus confortablement tout en passant largement.

Mes choix de couleurs sont-ils envoyés quelque part ?

Non. Le rapport est calculé dans votre navigateur au fur et à mesure que vous choisissez les couleurs, donc rien n'est transmis ni conservé, et l'outil fonctionne hors ligne.

Outils associés

• Sélecteur de couleur — trouver et convertir des couleurs entre HEX, RGB et HSL
• Sélecteur de couleur d'image — extraire une couleur d'une image
• Palette de couleurs depuis une image — construire une palette, puis la tester ici
• Générateur de dégradé CSS — vérifier le contraste du texte aux deux extrémités d'un dégradé