Vérificateur de contraste des couleurs
Testez n’importe quelle combinaison de couleurs au regard des normes WCAG 2.1. Découvrez comment vos couleurs apparaissent aux personnes présentant un déficit de la vision des couleurs — instantanément, gratuitement, dans votre navigateur.
Vision des couleurs normale
Rendu de cette combinaison avec un déficit de la vision des couleurs
protanopia
Ratio: 17.93:1 ✓ AA
deuteranopia
Ratio: 17.93:1 ✓ AA
tritanopia
Ratio: 17.93:1 ✓ AA
Comprendre le contraste des couleurs et l’accessibilité
Normes de contraste WCAG
Les Règles pour l’accessibilité des contenus Web (WCAG) définissent des rapports de contraste minimaux afin de garantir la lisibilité du texte pour les personnes malvoyantes ou daltoniennes :
- 4.5:1 WCAG AA — Texte normal (moins de 18 pt)
- 3.0:1 WCAG AA — Grand texte (18 pt et plus, ou 14 pt gras)
- 7.0:1 WCAG AAA — Texte normal (renforcé)
- 4.5:1 WCAG AAA — Grand texte (renforcé)
Pourquoi simuler le DVC est important
Environ 8 % des hommes et 0,5 % des femmes présentent une forme de déficit de la vision des couleurs. Même si votre combinaison respecte les rapports de contraste WCAG pour une vision normale, elle peut échouer pour les personnes atteintes de protanopie ou de deutéranopie, qui perçoivent très différemment les rouges et les verts. Testez toujours vos maquettes avec une simulation du DVC.
La luminance est le canal qui survit toujours
La couleur possède deux composantes sur lesquelles s’appuyer en conception : la teinte et la clarté. Une seule est fiable pour l’ensemble du public.
La discrimination de teinte varie énormément. Environ un homme sur douze présente une déficience rouge-vert, et pour lui un écart de teinte qui vous semble évident peut ne porter aucune information. La discrimination de clarté est bien plus uniforme. Une personne avec une déficience de la vision des couleurs, une personne à acuité réduite, une personne devant un écran de téléphone délavé en plein soleil et une personne à vision parfaitement typique perçoivent toutes un grand écart de clarté comme un grand écart.
C’est pourquoi le rapport de contraste est la mesure d’accessibilité qui porte l’édifice. Il mesure la relation de clarté entre deux couleurs en ignorant totalement la teinte — ce qui est exactement souhaitable, puisqu’il indique ce qui reste lorsque le canal de la teinte n’est pas fiable.
Le rapport s’étend de 1:1, où deux couleurs ont la même luminance relative et où la frontière entre elles est invisible pour tout le monde, jusqu’à 21:1 pour du noir pur sur du blanc pur. Le calcul est défini précisément dans WCAG : convertir chaque canal sRGB en lumière linéaire, pondérer les canaux selon leur contribution à la luminance perçue, puis comparer le résultat le plus clair au plus sombre.
Les seuils, et ce qui les fonde
4,5:1 — texte courant (WCAG AA). Le socle du corps de texte. Le chiffre dérive de la perte de sensibilité au contraste associée à une acuité d’environ 20/40, fréquente chez les adultes âgés, corrigeable mais souvent non corrigée.
3:1 — grand texte (WCAG AA). S’applique à partir de 18 pt normal ou 14 pt gras. Les glyphes plus grands ont des traits plus épais et restent lisibles à contraste moindre.
3:1 — contraste non textuel (WCAG AA). Couvre les composants d’interface et les graphiques porteurs de sens : bordures de champs, états d’interrupteurs, indicateurs de focus, icônes informatives et parties essentielles d’un graphique. C’est le critère le plus souvent manqué, et c’est généralement là qu’une interface élégante et peu contrastée échoue à un audit.
7:1 et 4,5:1 — texte courant et grand texte (WCAG AAA). Un palier plus strict, visant une acuité d’environ 20/80. À adopter pour la lecture longue même lorsqu’il n’est pas requis.
Le contraste est nécessaire, pas suffisant
L’erreur la plus fréquente dans le travail sur les palettes accessibles est de considérer un rapport de contraste conforme comme la fin du travail. Deux questions indépendantes appellent une réponse :
- Chaque couleur est-elle lisible sur son fond ? C’est le contraste, et ce vérificateur y répond.
- Les couleurs qui signifient des choses différentes sont-elles distinguables entre elles ? C’est la séparation de teinte, dont le rapport de contraste ne dit rien.
Un graphique à série rouge et série verte peut passer le contraste largement — toutes deux sont sombres sur fond blanc — tout en étant totalement illisible pour un deutéranope, parce que les deux séries sont indiscernables l’une de l’autre. Faites aussi passer ces palettes par le simulateur de vision des couleurs.
Et chaque fois que la couleur porte du sens, ajoutez un second indice. Le critère WCAG sur l’utilisation de la couleur l’exige, et la technique G111 décrit l’approche usuelle : associer la couleur à un motif, une forme, une position ou un libellé explicite. En pratique : étiqueter directement les séries d’un graphique plutôt que d’utiliser une légende colorée, placer une icône à côté d’un message d’erreur rouge, souligner les liens en ligne et différencier par la forme les états de succès et d’échec.
Travailler avec le vérificateur
Saisissez une couleur de premier plan et une couleur de fond : l’outil indique le rapport et les seuils atteints. Quelques habitudes le rendent plus utile :
- Testez le couple réel. Les calques semi-transparents, les dégradés et les images de fond font que le fond effectif n’est pas la couleur de votre feuille de style. Échantillonnez ce qui est réellement rendu.
- Testez les deux thèmes. La luminance ne s’inverse pas proprement ; une palette sombre demande son propre passage.
- Dans un dégradé, testez le pire cas, pas la moyenne.
- Incluez les états désactivé et indicatif. Ils sont tout de même lus.
- Vérifiez les indicateurs de focus sur toutes les surfaces où ils apparaissent. Un anneau de focus conforme à 3:1 sur blanc peut disparaître sur une carte.
Pour la vue d’ensemble, concevoir pour le daltonisme traite de la construction des palettes, et rendre les graphiques accessibles aborde spécifiquement la visualisation de données.
Des questions ?
Questions fréquemment posées
Tout ce que vous devez savoir sur les tests de daltonisme, leur fonctionnement et que faire avec vos résultats.
Que signifient réellement 4,5:1 et 3:1 ?
Ce sont des rapports de contraste de luminance entre un premier plan et un fond, sur une échelle allant de 1:1 (identiques) à 21:1 (noir sur blanc). WCAG 2.2 demande au moins 4,5:1 pour le texte courant et admet 3:1 pour le grand texte — à partir de 18 pt, ou 14 pt gras — car les glyphes plus grands ont des traits plus épais et supportent un contraste moindre. Les éléments non textuels porteurs de sens, comme les icônes, les bordures de champs et les indicateurs de focus, exigent aussi 3:1.
Pourquoi le contraste importe-t-il particulièrement pour le daltonisme ?
Parce que le contraste de luminance est le canal qui survit quand la discrimination de teinte, elle, ne survit pas. Si deux éléments ne diffèrent que par la teinte et à peine par la clarté, la personne qui comprime cet écart de teinte se retrouve sans rien. Un contraste de luminance suffisant maintient la distinction visible quelle que soit la manière dont la couleur est traitée. C'est la propriété d'accessibilité la plus robuste que vous puissiez donner à un couple de couleurs.
Mes couleurs passent 4,5:1 mais la conception échoue quand même. Comment ?
Passer le contraste face au fond est nécessaire mais pas suffisant. Une courbe rouge et une courbe verte peuvent chacune présenter un excellent contraste sur blanc et rester indiscernables l'une de l'autre. Le contraste se mesure du premier plan au fond ; la distinguabilité est une question de premier plan à premier plan. Vérifiez les deux, et donnez à chaque distinction codée par couleur un indice non chromatique.
Le rapport change-t-il en mode sombre ?
La formule non, vos résultats si. Le contraste se calcule à partir de la luminance relative : inverser une palette produit donc des rapports différents, non symétriques. Un couple qui passe sur blanc peut échouer sur un noir presque pur, en particulier les bleus et violets saturés, dont la luminance est déjà faible. Testez les deux thèmes.
Vaut-il la peine de viser le niveau AAA ?
C'est un palier plus strict — 7:1 pour le texte courant et 4,5:1 pour le grand texte — et il est réellement plus lisible, surtout en basse vision et sous mauvais éclairage. La plupart des organisations retiennent AA comme socle de conformité et traitent AAA comme un objectif pour le corps de texte et la lecture longue. AAA est rarement une exigence légale.
Quels éléments sont exemptés ?
WCAG exempte les contenus purement décoratifs, le texte faisant partie d'un contrôle inactif, le texte d'un logotype et le texte intégré à une image comportant un autre contenu visuel significatif. Les exemptions sont plus étroites qu'on ne le suppose : le texte indicatif des champs, les contrôles actifs qui semblent désactivés et le texte d'aide à faible contraste sont fréquemment et à tort considérés comme exemptés.
Vous avez encore des questions ? Contactez-nous →