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

Conseils d'utilisation

  • 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.

Questions fréquentes

Les WCAG (Web Content Accessibility Guidelines) sont des directives internationales visant à rendre le contenu web accessible à un plus grand nombre de personnes. 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 (différence maximale entre le noir et le blanc). Il sert de mesure objective de la lisibilité du texte dans différentes conditions, par exemple pour les personnes malvoyantes, les utilisateurs âgés, ou lors de la consultation d'un smartphone en plein soleil à l'extérieur.

Les WCAG définissent comme "texte agrandi" un texte normal d'au moins 18pt (environ 24px), ou un texte en gras d'au moins 14pt (environ 18,66px), et leur appliquent une exigence plus souple (3:1 ou plus au niveau AA) qu'au texte normal, car plus les caractères sont grands, plus leur forme est facile à distinguer, ce qui les rend lisibles même avec un contraste légèrement plus faible.

Le niveau AA de WCAG 2.1 constitue le seuil minimal auquel se réfèrent les lois et directives de nombreux pays, par exemple l'ADA aux États-Unis ou la directive européenne sur l'accessibilité des sites web. Le niveau AAA, plus exigeant, n'est pas obligatoire, mais il est parfois recommandé pour les contenus où la lisibilité revêt une importance particulière, comme les sites d'organismes publics.

Les WCAG 2.x calculent d'abord la "luminance relative" de chaque couleur en supprimant la correction gamma de ses valeurs sRGB. Le rapport de contraste est ensuite calculé avec la formule (L1+0,05)/(L2+0,05), où L1 est la luminance de la couleur la plus claire et L2 celle de la couleur la plus sombre. Cette méthode de calcul est publiée dans les spécifications techniques du W3C.
ツールくん

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.