Vérificateur de contraste
Local only — nothing is uploaded unless you save or share it.
Un vérificateur de contraste des couleurs pour les niveaux d'accessibilité WCAG.
- Saisissez votre couleur de texte et la couleur de fond
- Lisez le rapport et les niveaux WCAG qu'il atteint
- En cas d'échec, prenez la couleur proposée qui passe
Échantillon de grand texte
Échantillon de texte courant — la taille qu'utilise réellement l'essentiel de votre contenu.
Enregistrer cet outil
Gardez Vérificateur de contraste sous la main
Utilisez le menu Partager de votre navigateur, puis « Sur l'écran d'accueil ».
À propos de cet outil
Utilisez-le comme simple vérificateur de deux couleurs, ou comme vérificateur de contraste avec opacité : un premier plan semi-transparent est composé sur le fond avant que le rapport ne soit calculé, plutôt que de voir son alpha silencieusement ignoré. Le rapport de contraste des couleurs mesure à quel point un texte se distingue du fond derrière lui, sur une échelle de 1 à 21. Les Règles pour l'accessibilité des contenus Web placent la barre à 4,5 pour 1 pour le texte courant au niveau AA, la baissent à 3 pour 1 pour le grand texte et la relèvent à 7 pour 1 pour le niveau AAA, plus strict. Ces chiffres ne sont pas des préférences arbitraires : le faible contraste est l'un des défauts d'accessibilité les plus courants du Web, et il touche bien plus de monde qu'il n'y paraît, y compris toute personne ayant une vision réduite, toute personne de plus de quarante ans environ, et quiconque lit un écran en plein soleil. Ce vérificateur calcule le rapport correctement, en linéarisant d'abord les valeurs sRGB, l'étape que les calculateurs naïfs sautent et la raison pour laquelle leurs résultats contredisent les audits d'accessibilité réels. Il traite le texte translucide en le composant d'abord sur le fond, puisqu'une couleur avec alpha n'a à elle seule aucune valeur de contraste vraie. Quand une paire ne suffit pas, il propose la nuance la plus proche de votre couleur de texte qui passe.
Questions fréquentes
Qu'est-ce qu'un bon rapport de contraste ?
4,5:1 ou mieux pour le texte courant, ce qui correspond au niveau AA des WCAG. Le grand texte peut descendre à 3:1, et le niveau AAA, plus strict, demande 7:1. En dessous de 3:1, c'est un effort pour la plupart des gens et illisible pour certains.
Qu'est-ce qu'un bon rapport de contraste ?
4,5:1 ou mieux pour le texte courant, ce qui correspond au niveau AA des WCAG. Le grand texte peut descendre à 3:1, et le niveau AAA, plus strict, demande 7:1. En dessous de 3:1, c'est un effort pour la plupart des gens et illisible pour certains.
Qu'est-ce qui compte comme grand texte ?
18pt, soit 24px, ou 14pt en gras, soit environ 18,66px. Tout ce qui atteint cette taille n'a besoin que d'un rapport de 3 pour 1 au niveau AA au lieu de 4,5 pour 1. Appliquer le seuil du grand texte au texte courant est l'une des façons les plus fréquentes de rater un audit après que tout le monde le croyait réussi.
Faut-il viser AA ou AAA ?
AA est le standard pratique et ce à quoi renvoie la plupart des législations, dont l'Acte européen sur l'accessibilité. AAA est plus strict et difficile à tenir sur tout un système de design : on le traite donc généralement comme une ambition pour le texte courant plutôt que comme une obligation générale.
Pourquoi votre rapport diffère-t-il d'un calculateur utilisé ailleurs ?
Presque toujours parce que l'autre fait la moyenne des valeurs RGB brutes au lieu de les linéariser d'abord. Le sRGB est encodé en gamma : la formule WCAG applique donc une transformation précise par canal avant de les pondérer. Sauter cette étape produit des nombres plausibles qui échouent aux vrais audits.
Comment le texte transparent est-il traité ?
Il est d'abord composé sur la couleur de fond, puis mesuré. Une couleur dotée d'un canal alpha n'a pas de rapport de contraste significatif à elle seule, car ce que vous voyez réellement est un mélange. Les outils qui ignorent l'alpha annoncent une réussite pour un texte invisible en pratique.
Le contraste compte-t-il aussi pour les icônes et les bordures ?
Oui. WCAG 2.1 exige 3 pour 1 pour les composants d'interface et les graphiques porteurs de sens, ce qui couvre les bordures de champs de formulaire, les indicateurs de focus et les boutons-icônes. Ils sont vérifiés ici à côté des niveaux du texte.
Aidez-nous à améliorer cet outil
Un bug, une envie de changement, ou un outil qui vous manque ?
Vous avez un message non envoyé.
Merci — c'est bien arrivé. La réponse vous attendra dans votre boîte.Go to my messages