Vérificateur de contraste (conformité WCAG)
Indiquez deux couleurs pour calculer le rapport de contraste WCAG (Web Content Accessibility Guidelines) et vérifier la conformité aux niveaux AA et AAA.
Aperçu des exigences de contraste WCAG
| Niveau | Élément concerné | Contraste requis |
|---|---|---|
| AA (minimum) | Texte normal | 4,5:1 ou plus |
| AA (minimum) | Texte agrandi (18pt ou plus, ou 14pt ou plus en gras) | 3:1 ou plus |
| AA (minimum) | Composants d'interface et objets graphiques | 3:1 ou plus |
| AAA (renforcé) | Texte normal | 7:1 ou plus |
| AAA (renforcé) | Texte agrandi | 4,5:1 ou plus |
Qu'est-ce que le rapport de contraste ?
Le rapport de contraste exprime la différence de luminosité entre la couleur du texte et celle de l'arrière-plan sous la forme d'un nombre allant de 1:1 (aucune différence) à 21:1 (la différence maximale possible, noir sur blanc). Plus ce nombre est élevé, plus le texte est facile à lire. Les WCAG (Web Content Accessibility Guidelines) définissent, à partir de cette valeur, deux niveaux de conformité, AA et AAA. Cet outil calcule automatiquement le rapport à partir de deux codes couleur et permet de voir en un coup d'œil si chacune des cinq exigences distinctes est satisfaite.
Ce calcul repose sur une valeur appelée "luminance relative" (relative luminance). Contrairement à une simple mesure de luminosité, telle que la valeur L du modèle HSL, la luminance relative s'obtient en retirant d'abord la correction gamma des valeurs sRGB, puis en pondérant et en additionnant les canaux rouge, vert et bleu selon la sensibilité de l'œil humain à chacun d'eux, ce qui donne un résultat plus proche de l'impression visuelle de clarté réellement perçue. Des couleurs proches produisent presque par définition un rapport de contraste faible : un résultat "Non conforme" ne signifie donc pas que les couleurs elles-mêmes sont mauvaises, mais simplement qu'il faut élargir l'écart de luminosité entre elles.
Comment utiliser le vérificateur de contraste
- Indiquez la couleur du texte Choisissez la couleur avec le sélecteur ou saisissez directement un code hexadécimal. La valeur par défaut est un gris foncé (#333333).
- Indiquez la couleur d'arrière-plan Procédez de la même façon, via le sélecteur de couleur ou un code hexadécimal. La valeur par défaut est le blanc (#ffffff).
- Consultez le résultat À mesure que vous saisissez des valeurs, le rapport de contraste ainsi que les badges conforme/non conforme pour chaque exigence AA et AAA se mettent à jour en temps réel.
- Inversez les couleurs si besoin Utilisez le bouton "Inverser les couleurs" pour échanger le texte et l'arrière-plan, afin de comparer aussi la combinaison sous sa forme inversée.
Astuces pour en tirer le meilleur parti
- Vous pouvez définir la couleur du texte et celle de l'arrière-plan à l'aide du sélecteur de couleur ou en saisissant directement un code hexadécimal (les formats `#RRGGBB` et `#RGB` sont pris en charge).
- Le bouton "Inverser les couleurs" permet d'échanger rapidement le texte et l'arrière-plan pour les comparer, ce qui est pratique pour tester plusieurs variantes de couleurs d'un logo ou d'une icône.
- Le niveau AAA est plus strict que le niveau AA. Atteindre le niveau AA est généralement considéré comme le minimum recommandé pour un site web, mais il est préférable de viser le niveau AAA pour les contenus où la lisibilité est particulièrement importante.
- L'exigence de 3:1 pour les composants d'interface et objets graphiques (bordures de bouton, icônes, etc.) correspond au critère de succès 1.4.11, ajouté dans WCAG 2.1.
Dans quels cas utiliser cet outil
Vérifier la couleur des boutons et des liens
Saisissez la couleur du texte et de l'arrière-plan des principaux boutons d'action ou des liens texte d'un site pour confirmer qu'ils respectent le niveau AA (4,5:1 ou plus).
Vérifier un logo ou une bannière par rapport à leur fond
Permet de vérifier à l'avance si la couleur d'un logo ou le texte principal d'une bannière promotionnelle reste bien lisible sur le fond sur lequel il sera placé.
Auditer la palette de couleurs d'un système de conception
Passez en revue, une par une, les combinaisons existantes de couleurs de marque et de texte pour vérifier si l'ensemble de l'interface respecte les exigences d'accessibilité, et conservez une trace des résultats.
Valider le jeu de couleurs du mode sombre
Utile pour vérifier, combinaison par combinaison, si les couleurs inversées pour le mode sombre respectent toujours les mêmes exigences de contraste que le jeu de couleurs du mode clair.
Glossaire
- Luminance relative
- Une mesure de luminosité calculée en retirant la correction gamma des valeurs sRGB, puis en pondérant et en additionnant les canaux rouge, vert et bleu selon la sensibilité de l'œil humain à chacun. Elle constitue la base du calcul du rapport de contraste.
- Rapport de contraste
- Un nombre compris entre 1:1 et 21:1, obtenu à partir de la luminance relative d'une couleur claire et d'une couleur sombre. Plus la valeur est élevée, plus l'écart de luminosité entre les deux couleurs est important, et plus le texte est lisible.
- WCAG
- Abréviation de Web Content Accessibility Guidelines, la norme internationale d'accessibilité du web maintenue par le W3C. Les critères de réussite du rapport de contraste y sont également définis.
- Niveau AA
- Le deuxième niveau de conformité le plus élevé des WCAG. Le texte normal doit atteindre un rapport de contraste de 4,5:1 ou plus. Il est largement considéré comme le seuil minimal auquel se réfèrent de nombreuses lois et directives.
- Niveau AAA
- Le niveau de conformité le plus élevé des WCAG. Le texte normal doit atteindre un rapport de contraste de 7:1 ou plus. Il n'est pas obligatoire, mais il est recommandé lorsque la lisibilité est particulièrement critique.
- Texte agrandi
- Une catégorie définie par les WCAG comme du texte normal d'au moins 18pt (environ 24px), ou du texte en gras d'au moins 14pt (environ 18,66px). Une exigence plus souple s'applique par rapport au texte normal.
- Composant d'interface
- Éléments visuels indiquant qu'un élément est interactif, comme les bordures de boutons, les contours des champs de saisie ou les icônes. Les WCAG 2.1 ont introduit une nouvelle exigence de 3:1 ou plus spécifiquement pour ces éléments.
Questions fréquentes
Anecdote — Aux origines des normes d'accessibilité
Les WCAG (Web Content Accessibility Guidelines) constituent une directive internationale élaborée principalement par le W3C (World Wide Web Consortium). Leur première version, WCAG 1.0, a été publiée en 1999. Dès cette époque, réduire les obstacles rencontrés par les utilisateurs malvoyants recourant à des technologies d'assistance telles que les lecteurs d'écran était déjà considéré comme un enjeu majeur.
Les exigences en matière de contraste ont gagné en importance pour plusieurs raisons liées à la diversité de la vision humaine : le déficit de vision des couleurs touche une part non négligeable de la population (on estime qu'environ un homme sur vingt est concerné), le vieillissement entraîne un jaunissement du cristallin qui réduit la sensibilité au contraste, et les écrans de smartphone deviennent difficiles à lire en plein soleil à l'extérieur. La mise en place de critères chiffrés a permis aux concepteurs de vérifier l'accessibilité de manière objective, plutôt que de s'appuyer uniquement sur un jugement subjectif de lisibilité.
Aujourd'hui, l'accessibilité du web constitue une obligation légale dans de nombreux pays. Au Japon, par exemple, la modification d'avril 2024 de la loi sur l'élimination de la discrimination envers les personnes handicapées a rendu obligatoire la mise en place d'aménagements raisonnables par les entreprises. La vérification du rapport de contraste est ainsi devenue l'un des contrôles qualité de base incontournables lors de la création d'un site web professionnel.