Contraste des couleurs et accessibilité web : guide complet WCAG

Chaque fois que vous plissez les yeux devant un site web parce que le texte est trop clair, ou que vous peinez à lire un libellé de bouton parce qu'il se fond dans l'arrière-plan, vous êtes confronté à un problème de contraste. Pour la plupart des gens, c'est une légère gêne. Pour une part non négligeable de la population — personnes souffrant de déficiences de la vision des couleurs, de malvoyance, de presbytie, ou simplement exposées à un écran en plein soleil — cela rend le contenu véritablement inaccessible. Le contraste des couleurs est l'un des aspects de l'accessibilité web les plus impactants et les plus souvent enfreints, et c'est aussi l'un des plus faciles à corriger une fois les règles comprises. Ce guide explique la norme, la formule mathématique, les erreurs courantes et comment utiliser le Vérificateur de contraste des couleurs BrowseryTools pour vérifier instantanément n'importe quelle paire de couleurs dans votre navigateur.

Pourquoi le contraste est important

L'ampleur de la population concernée est bien plus grande que la plupart des designers ne l'imaginent. Selon l'Organisation mondiale de la santé, environ 2,2 milliards de personnes dans le monde souffrent d'une forme ou d'une autre de déficience visuelle. La dyschromatopsie — communément appelée daltonisme — touche environ 8 % des hommes et 0,5 % des femmes d'ascendance nord-européenne, ce qui représente quelque 300 millions de personnes dans le monde ayant des difficultés à distinguer certaines couleurs.

Au-delà des conditions permanentes, le contraste affecte tout le monde de manière situationnelle :

• Lire un téléphone en plein soleil efface entièrement un texte à faible contraste.
• Les anciens moniteurs ou ceux d'entrée de gamme ont une luminosité réduite et une précision des couleurs moins bonne.
• Les personnes souffrant de migraine ou de photosensibilité utilisent souvent des affichages à luminosité réduite.
• Les reflets de fenêtres ou de lumières au plafond réduisent effectivement le contraste perçu.
• Les utilisateurs pressés — c'est-à-dire à peu près tout le monde — traitent les contenus à fort contraste plus rapidement.

Un bon contraste n'est pas une adaptation de niche. Il améliore l'expérience de chaque utilisateur, sur chaque appareil, dans chaque condition d'éclairage.

Qu'est-ce que le rapport de contraste ?

Le rapport de contraste est un nombre normalisé qui exprime à quel point deux couleurs diffèrent en termes de luminosité relative (luminance). Il est toujours exprimé sous forme de rapport : la couleur la plus claire divisée par la plus sombre, en ajoutant 0,05 à chacune pour éviter la division par zéro et tenir compte de la lumière ambiante dans les affichages réels.

La plage va de 1:1 (deux couleurs identiques — zéro contraste, totalement illisible) à 21:1 (noir pur sur blanc pur — le contraste maximal possible). Plus le rapport est élevé, plus les deux couleurs sont distinctes.

Comment le rapport de contraste est calculé

La formule utilisée par les WCAG (et l'ensemble de l'écosystème des standards web) repose sur le concept de luminance relative — une mesure de la quantité de lumière qu'une couleur semble émettre, ajustée à la perception visuelle humaine. Le calcul s'effectue en deux étapes.

Étape 1 : calculer la luminance relative (L) pour chaque couleur.

Tout d'abord, convertissez chaque canal RVB de la plage 0–255 vers une échelle linéaire 0–1, puis appliquez une formule d'expansion gamma pour tenir compte de la façon dont les affichages encodent la luminosité :

// Pour chaque valeur de canal c dans [0, 1] :
if c <= 0.04045:
    c_linear = c / 12.92
else:
    c_linear = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

Les coefficients 0,2126, 0,7152 et 0,0722 reflètent la sensibilité aux couleurs de l'être humain : nos yeux sont les plus sensibles au vert, modérément sensibles au rouge, et les moins sensibles au bleu.

Étape 2 : calculer le rapport de contraste.

Rapport de contraste = (L_clair + 0.05) / (L_sombre + 0.05)

Où L_clair est la luminance relative de la couleur la plus claire et L_sombre est la luminance relative de la couleur la plus sombre.

Exemples de calculs

• Noir (#000000) sur blanc (#FFFFFF) : L(blanc) = 1,0, L(noir) = 0,0. Rapport = (1,0 + 0,05) / (0,0 + 0,05) = 1,05 / 0,05 = 21:1. Contraste maximal possible.
• #767676 gris sur blanc (#FFFFFF) : L(#767676) ≈ 0,216. Rapport = (1,0 + 0,05) / (0,216 + 0,05) ≈ 1,05 / 0,266 ≈ 4,54:1. Tout juste conforme à WCAG AA pour le texte normal.
• #999999 gris sur blanc (#FFFFFF) : L(#999999) ≈ 0,319. Rapport = (1,0 + 0,05) / (0,319 + 0,05) ≈ 1,05 / 0,369 ≈ 2,85:1. Non conforme à WCAG AA pour du texte de toute taille.

WCAG : la norme qui définit les exigences d'accessibilité

Les Règles pour l'accessibilité des contenus Web (WCAG) sont publiées par le World Wide Web Consortium (W3C) et définissent la norme internationalement reconnue pour l'accessibilité web. La version actuellement en vigueur dans la réglementation est WCAG 2.1, publiée en 2018. WCAG 3.0 est en cours d'élaboration et finira par la remplacer avec un système de mesure plus nuancé, mais WCAG 2.1 reste la norme opérationnelle pour la conformité.

Les WCAG organisent les exigences en trois niveaux de conformité : A (minimum), AA (standard) et AAA (renforcé). Le niveau AA est ce que la plupart des cadres juridiques exigent. Le niveau AAA est aspirationnel et n'est pas imposé pour des sites entiers, uniquement pour des contextes spécifiques.

Il est important de noter ce à quoi les exigences de contraste ne s'appliquent pas : les images décoratives sans contenu informatif, les logos et marques visuelles, et le texte faisant partie d'un composant d'interface inactif (un bouton désactivé, par exemple) sont tous exemptés des exigences de contraste au titre de WCAG 2.1. L'intention est de protéger le contenu informatif, pas les éléments purement décoratifs.

Paires de couleurs : exemples conformes et non conformes

Le rapport de contraste d'une paire de couleurs dépend entièrement de la luminance relative des deux couleurs — pas de celle qui est « plus jolie » ni de celles qui vous semblent similaires. Voici des exemples représentatifs sur l'ensemble du spectre conforme/non conforme :

Erreurs de contraste courantes

Les mêmes erreurs reviennent régulièrement dans les audits d'accessibilité sur le web. Les connaître par leur nom facilite leur détection dans votre propre travail.

Texte gris clair sur blanc

C'est le problème de contraste le plus fréquent sur le web moderne. Les tendances au minimalisme ont produit une génération d'interfaces où le corps de texte, les légendes, les métadonnées et le texte de substitution sont rendus dans des nuances comme #aaaaaa, #bbbbbbou #cccccc sur fond blanc. Ces combinaisons produisent généralement des rapports de contraste compris entre 1,5:1 et 2,5:1 — bien en dessous du minimum de 4,5:1. Le designer peut le lire sur un moniteur étalonné dans une pièce sombre ; l'utilisateur final sur un smartphone en plein après-midi de soleil, non.

Texte blanc sur boutons colorés

Le texte blanc sur fond jaune (#ffdd00), vert citron (#84cc16) ou orange clair (#fb923c) ne passe pas WCAG AA quelle que soit la taille du texte. Ces combinaisons de couleurs sont visuellement frappantes, mais le contraste est insuffisant. Le texte sombre (noir ou gris très foncé) sur ces fonds lumineux est la solution accessible — il atteint généralement des rapports supérieurs à 10:1.

Texte de substitution dans les champs de formulaire

Le texte de substitution par défaut des navigateurs — le texte indicatif qui apparaît dans les champs vides avant que l'utilisateur ne tape — est généralement rendu à environ 40 % d'opacité de la couleur du texte, ou sous forme d'un gris moyen comme #aaaaaa. Cela ne passe presque jamais WCAG AA. Le texte de substitution est soumis à la même exigence de contraste 4,5:1 que le texte normal car il communique des informations sur ce qu'il faut saisir.

Liens bleus sur fonds colorés ou sombres

La couleur traditionnelle des hyperliens (#0000ee) offre un excellent contraste sur fond blanc (8,6:1) mais s'effondre sur les fonds colorés. Sur un fond violet moyen, ce même lien bleu n'atteint qu'environ 1,7:1. Les couleurs de lien doivent être vérifiées non seulement par rapport au fond de la page, mais aussi par rapport aux sections colorées ou aux cartes dans lesquelles elles apparaissent.

États désactivés et indicateurs de focus

Bien que WCAG 2.1 exempte les composants d'interface désactivés des exigences de contraste, les indicateurs de focus — le contour visible qui apparaît lorsqu'un utilisateur navigue au clavier vers un élément focalisable — doivent respecter un rapport de 3:1 par rapport aux couleurs adjacentes sous WCAG 2.2. De nombreux sites suppriment le contour de focus par défaut du navigateur avec outline: none sans en fournir un de remplacement, ce qui constitue une défaillance d'accessibilité pour les utilisateurs ne se servant que du clavier.

Techniques pour choisir des couleurs accessibles

Privilégier le foncé sur le clair

La valeur par défaut la plus simple pour le texte est le texte quasi-noir sur fond blanc ou gris très clair. Des rapports supérieurs à 10:1 sont faciles à atteindre et offrent une grande flexibilité sur la taille et la graisse de la police. Réservez les palettes claires sur fond sombre (mode sombre) pour les surfaces secondaires et vérifiez le contraste dans les deux thèmes.

Vérifier tous les états interactifs

L'état par défaut d'un bouton peut satisfaire AA tandis que son état survolé — qui éclaircit l'arrière-plan — tombe en dessous de 4,5:1. Vérifiez séparément les états par défaut, survolé, focus, actif et désactivé. L'état désactivé est exempté de l'exigence, mais tous les autres doivent être conformes.

La règle 60-30-10 appliquée de façon accessible

La règle des 60-30-10 (60 % couleur dominante, 30 % couleur secondaire, 10 % couleur d'accent) est utile pour la hiérarchie visuelle. L'appliquer de façon accessible signifie : vérifier que le texte apparaissant sur chacune de ces trois zones de couleur respecte le seuil de contraste pour cette zone individuellement. La couleur d'accent à 10 % est souvent la plus problématique — les couleurs d'accent vives associées à du texte blanc ou sombre peuvent ne pas être conformes à certaines combinaisons de teinte et de saturation.

Utiliser le vérificateur de contraste avant de valider

Le moment le moins coûteux pour corriger un problème de contraste est avant de coder quoi que ce soit. Lorsque vous sélectionnez des couleurs dans un outil de design, vérifiez immédiatement les paires texte/arrière-plan prévues. Ajuster la luminosité d'une couleur de 10 à 15 % permet souvent de rendre une combinaison non conforme conforme sans modifier significativement le caractère visuel du design.

Exigences légales

La conformité aux WCAG n'est pas purement volontaire dans de nombreuses juridictions. Les cadres juridiques qui font référence à WCAG AA comprennent :

• États-Unis — Americans with Disabilities Act (ADA) : L'ADA interdit la discrimination fondée sur le handicap dans les lieux ouverts au public. Les tribunaux fédéraux et le Département de la justice ont interprété cette loi comme couvrant les sites web commerciaux. Des milliers de poursuites judiciaires pour accessibilité sont déposées chaque année devant les tribunaux fédéraux américains, les violations de contraste des couleurs étant fréquemment citées dans les mises en demeure.
• Union européenne — EN 301 549 : La directive européenne sur l'accessibilité web impose la conformité WCAG 2.1 niveau AA pour les sites web et applications mobiles du secteur public. EN 301 549 est la norme technique utilisée pour les marchés publics. Les organisations du secteur privé dans les secteurs réglementés font également face à des exigences croissantes.
• Canada — LAPHO (Loi sur l'accessibilité pour les personnes handicapées de l'Ontario) : L'Ontario impose la conformité WCAG 2.0 niveau AA pour les organisations du secteur privé comptant 50 employés ou plus, et pour toutes les organisations du secteur public.
• Royaume-Uni — Equality Act 2010 : Les prestataires de services ont l'obligation de prendre des mesures raisonnables pour les personnes handicapées, ce que le gouvernement britannique interprète comme incluant l'accessibilité des sites web.

Au-delà du risque juridique, de nombreux clients entreprises et processus d'appels d'offres gouvernementaux exigent désormais la conformité WCAG AA dans les contrats de prestataires. L'accessibilité est de plus en plus une exigence commerciale, pas seulement éthique.

Qui bénéficie au-delà des personnes handicapées

Un contraste accessible est une bonne conception pour tous. La recherche en expérience utilisateur montre systématiquement que le texte à fort contraste est lu plus rapidement et avec moins d'erreurs dans tous les groupes d'utilisateurs. Les populations qui en bénéficient le plus manifestement comprennent :

• Les personnes atteintes de déficience de la vision des couleurs (rouge-vert, bleu-jaune ou monochromie)
• Les personnes âgées, dont la sensibilité au contraste diminue naturellement avec l'âge
• Les personnes malvoyantes qui n'utilisent pas de loupe d'écran
• Les utilisateurs en environnements à forte luminosité ambiante (en extérieur, près de fenêtres)
• Les utilisateurs sur des affichages de mauvaise qualité, anciens ou d'entrée de gamme
• Toute personne sous charge cognitive — fatiguée ou distraite, un fort contraste réduit les erreurs de lecture

Comment utiliser le Vérificateur de contraste des couleurs BrowseryTools

Le Vérificateur de contraste des couleurs BrowseryTools rend triviale la vérification de toute combinaison de couleurs par rapport aux normes WCAG :

• Entrez les codes hexadécimaux : Tapez ou collez n'importe quel code couleur hexadécimal valide (3 ou 6 chiffres, avec ou sans le préfixe #) dans les champs de premier plan et d'arrière-plan.
• Voir le rapport immédiatement : Le rapport de contraste est calculé et affiché en temps réel pendant la saisie — aucun bouton à cliquer.
• Badges AA et AAA : Des badges conformes/non conformes clairs sont affichés pour le niveau AA texte normal, le niveau AA grand texte, le niveau AAA texte normal et le niveau AAA grand texte — vous voyez exactement quels seuils votre paire satisfait.
• Aperçu en direct : L'outil affiche un exemple de texte sur votre arrière-plan choisi pour que vous puissiez voir la combinaison telle qu'elle apparaîtrait à un utilisateur.
• Utiliser le sélecteur de couleur : Si vous n'avez pas de valeur hexadécimale spécifique en tête, le sélecteur de couleur intégré vous permet de choisir les couleurs visuellement et de voir instantanément comment le rapport évolue au fil de l'espace colorimétrique.