Comment vérifier le contraste de couleurs pour l'accessibilité

Environ 1 homme sur 12 et 1 femme sur 200 ont une forme de deficience de la vision des couleurs. Des millions d'autres ont une vision faible, des yeux vieillissants, ou regardent des ecrans en plein soleil. Si votre texte n'a pas assez de contraste par rapport a son arriere-plan, ces personnes ne peuvent pas le lire. Le contraste des couleurs n'est pas juste un plus, c'est une exigence d'accessibilite fondamentale. Un verificateur de contraste base sur navigateur gere tout le travail localement sans televerser de couleurs ou de donnees sur un serveur.

Ce que WCAG exige

Les Web Content Accessibility Guidelines (WCAG) definissent des ratios de contraste minimums entre le texte et son arriere-plan :

«Grand texte» signifie 18px gras ou 24px regulier et plus. Le ratio de contraste varie de 1:1 (pas de contraste, blanc sur blanc) a 21:1 (contraste maximum, noir sur blanc).

Comment verifier le contraste

1. Selectionnez vos couleurs : entrez les couleurs de premier plan (texte) et d'arriere-plan en utilisant des codes HEX, des valeurs RGB ou des selecteurs de couleurs.
2. Verifiez les resultats : l'outil affiche instantanement le ratio de contraste et indique si votre combinaison passe WCAG AA et AAA pour le texte normal et grand.
3. Ajustez si necessaire : si le contraste echoue, assombrissez le texte ou eclaircissez l'arriere-plan (ou vice versa) jusqu'a ce que vous passiez le niveau requis.

Une breve histoire des normes de contraste de couleurs

Avant WCAG, l'accessibilite web etait un patchwork de regles specifiques aux fournisseurs. Le W3C a publie WCAG 1.0 en 1999, avec des conseils sur le contraste mais pas de ratio specifique. WCAG 2.0 (2008) a introduit la formule 4,5:1 / 7:1 basee sur la science des couleurs du Dr Lillian Yetenekian et du laboratoire de recherche IBM, avec la contribution de chercheurs en basse vision. La formule est concue pour qu'une personne avec une vision 20/40 (basse vision legere) puisse lire un texte conforme AA, et qu'une personne avec une vision 20/80 (basse vision significative) puisse lire un texte conforme AAA.

WCAG 2.1 (2018) a ajoute des exigences de contraste pour les composants UI (3:1 pour non-texte), les objets graphiques et les indicateurs de focus. WCAG 2.2 (2023) a ajoute plus d'exigences autour des tailles de cible et de la visibilite du focus.

Le brouillon de travail actuel de WCAG 3.0 propose une nouvelle formule de contraste (APCA, Accessible Perceptual Contrast Algorithm) qui correspond mieux a la perception humaine, en particulier pour le texte plus sombre. APCA n'est pas encore une recommandation du W3C mais est deja pris en charge par certains outils comme apercu.

L'adoption legale de WCAG a ete reguliere :

• US : la section 508 de la loi de readaptation (federal) et la jurisprudence ADA exigent WCAG 2.0 / 2.1 AA
• UE : la directive sur l'accessibilite du web (2016/2102) et l'acte europeen sur l'accessibilite (2025) exigent EN 301 549, qui est WCAG 2.1 AA
• Royaume-Uni : Public Sector Bodies Accessibility Regulations exige WCAG 2.1 AA
• Canada : ACA (Accessible Canada Act) pour le secteur federal, AODA (Ontario) pour les entreprises
• Australie : la jurisprudence DDA traite WCAG 2.1 AA comme standard
• Japon : JIS X 8341-3:2016 (base sur WCAG 2.0)

Pour la plupart des sites web grand public, WCAG 2.1 AA est le minimum legal de facto.

Comment le ratio de contraste est calcule

Le ratio de contraste est calcule en utilisant la luminance relative de chaque couleur :

1. Convertir chaque couleur de sRGB en RGB lineaire (correction gamma)
2. Calculer la luminance relative : L = 0,2126 R + 0,7152 G + 0,0722 B
3. Contraste = (L_plus_clair + 0,05) / (L_plus_sombre + 0,05)

Le resultat est un nombre de 1 (pas de contraste) a 21 (contraste maximum). Les decalages de 0,05 empechent la division par zero et modelisent legerement la contribution de la lumiere ambiante au contraste percu.

La formule a ete deliberement concue pour etre deterministe et calculable, de sorte que les memes couleurs produisent toujours le meme ratio. Elle ne tient pas compte de :

• Daltonisme : une paire rouge/vert peut avoir un ratio de 7:1 mais etre invisible pour une personne atteinte de daltonisme rouge/vert
• Poids de police au-dela du gras : les polices ultra-fines ou en filet ont besoin de plus de contraste
• Artefacts d'anti-crenelage : les traits tres fins peuvent paraitre plus clairs que la valeur de couleur ne le suggere
• Motifs d'arriere-plan : les degrades, images ou bruit derriere le texte degradent le contraste effectif

C'est pourquoi les verifications WCAG sont necessaires mais pas suffisantes. La revue visuelle avec des utilisateurs divers (y compris ceux atteints de daltonisme) attrape le reste.

Erreurs de contraste courantes

Texte gris clair sur blanc : #999999 sur #ffffff a un ratio de seulement 2,8:1. Cela echoue WCAG AA. Cela peut sembler «propre» a un designer avec une vision parfaite, mais c'est illisible pour beaucoup de gens.

Texte colore sur arrieres-plans colores : un bouton bleu avec texte blanc passe souvent, mais un bouton vert avec texte blanc peut ne pas passer. Verifiez toujours, vous ne pouvez pas juger du ratio de contraste a l'oeil.

Texte d'espace reserve : les espaces reserves de champs de formulaire sont notoirement a faible contraste. Bien que WCAG n'exige pas strictement que les espaces reserves repondent aux ratios de contraste, les utilisateurs doivent encore les lire.

Mode sombre : les designers utilisent souvent du texte gris moyen sur des arriere-plans gris fonces pour un look «subtil». Cela echoue frequemment aux verifications de contraste.

Texte sur images : le texte place sur une image heros passe souvent quand l'image est sombre et echoue quand l'image est claire. Utilisez un calque de degrade sombre/clair ou une toile de fond unie derriere le texte sur les images.

Decalages de couleurs de marque : l'identite d'entreprise dicte souvent une couleur de marque principale. Si cette couleur echoue comme texte de corps, utilisez-la pour les titres (grand texte, seuil 3:1) et utilisez une teinte plus sombre pour le corps.

Couleurs de liens : les liens doivent etre distinguables du texte environnant. WCAG exige un ratio de 3:1 entre le lien et le texte du corps, plus un autre indice visuel (soulignement, gras ou icone).

Indicateurs de focus : le contour autour d'un bouton ou lien focalise doit atteindre un contraste de 3:1 par rapport a son arriere-plan. Les anneaux de focus par defaut du navigateur sont generalement surs ; les styles de focus personnalises echouent souvent.

Pieges courants

• Tester seulement les titres : le contraste doit etre verifie pour chaque combinaison de taille et de poids de texte sur la page. Le texte du corps, les legendes, les etiquettes, les boutons, les icones et les champs de formulaire ont tous besoin d'etre verifies.
• Oublier les etats de survol et actif : un lien qui passe le contraste par defaut peut echouer en survol (couleur plus claire) ou actif (arriere-plan different). Verifiez tous les etats.
• Etats desactives ignores : WCAG exclut explicitement les etats desactives des exigences de contraste, mais le design accessible vise encore une certaine distinction visible.
• Calques translucides : le texte sur un calque sombre transparent a 50% se comporte comme sa couleur effective, pas la couleur d'entree. Composez la couleur effective avant la verification.
• Texte fin anti-crenelle : Inter Thin 12px a 8,5:1 est encore difficile a lire. Verifiez avec la police rendue reelle, pas seulement la valeur de couleur.
• Derive de conversion HSL : ajuster les couleurs dans l'espace HSL peut produire des valeurs qui semblent similaires mais echouent au contraste. Verifiez toujours apres ajustements de couleur.
• Couleurs de marque verrouillees par les parties prenantes : quand une couleur de marque ne peut pas etre changee, utilisez-la strategiquement (grand texte uniquement) et choisissez une couleur differente pour le corps. Documentez la raison pour les parties prenantes.
• Oublier le contraste d'impression : un site web peut passer le contraste a l'ecran mais echouer lorsqu'il est imprime en niveaux de gris. Testez la sortie imprimee pour les documents destines a l'impression.
• Texte sur video : les arrieres-plans video changent constamment. Soit epinglez une image fixe, ajoutez un calque de degrade ou utilisez une toile de fond unie.
• L'internationalisation change la densite des caracteres : les caracteres chinois, japonais, coreens sont plus denses que les caracteres latins. Un ratio de 4,5:1 qui se lit bien en anglais peut tendre les lecteurs de langues CJK a la meme taille. Augmentez a 7:1 pour le texte international.

Au-dela de WCAG : APCA et le contraste perceptuel moderne

L'Accessible Perceptual Contrast Algorithm (APCA) est une nouvelle formule proposee par Andrew Somers pour WCAG 3.0. Contrairement a la formule WCAG 2, APCA :

• Tient compte du poids et de la taille de la police dans le score de contraste : les polices plus fines ou plus petites ont besoin de plus de contraste
• Utilise une mise a l'echelle perceptuelle non lineaire : correspond a la facon dont la vision humaine repond reellement a la luminance
• Mieux gere les arrieres-plans sombres : WCAG 2 sur-evalue le contraste sur les arrieres-plans sombres ; APCA corrige cela
• Produit un score conscient de la polarite : positif pour le texte sombre sur fond clair, negatif pour l'inverse

Les scores APCA varient approximativement de -108 a +108. Un score de 60 (positif ou negatif) est approximativement equivalent au 4,5:1 de WCAG 2. APCA n'est pas encore legalement requis nulle part, mais est adopte par des systemes de design comme Material Design et IBM Carbon comme standard tourne vers l'avenir.

Pour la plupart des objectifs pratiques aujourd'hui, WCAG 2.1 AA (4,5:1 / 3:1) reste le standard legal et industriel. Certaines equipes utilisent APCA en parallele comme verification de qualite.

Outils et integrations

Integrez au moins un outil automatise dans CI afin que les echecs de contraste ne puissent pas etre livres sans etre detectes.

Conseils

• Verifiez chaque combinaison texte/arriere-plan : ne supposez pas. Meme les designers experimentes sont surpris par les combinaisons qui echouent.
• Testez les deux themes : si votre site a des modes clair et sombre, verifiez le contraste dans les deux. Une couleur qui fonctionne sur blanc peut echouer sur gris fonce.
• Utilisez sagement vos couleurs de marque : si votre bleu de marque echoue comme couleur de texte, utilisez-le pour les elements plus grands (boutons, en-tetes) ou s'applique le seuil de grand texte (3:1), et utilisez une teinte plus sombre pour le texte du corps.
• Ne vous fiez pas a la couleur seule : en plus d'un contraste suffisant, ne transmettez jamais d'information par couleur seule. Utilisez des icones, des etiquettes de texte ou des motifs en plus de la couleur pour assurer que tout le monde puisse comprendre le contenu.
• Testez avec des simulateurs : un simulateur de daltonisme montre a quoi ressemble votre design pour les utilisateurs atteints de protanopie, deuteranopie ou tritanopie. Les paires communes (rouge/vert) echouent souvent.
• Testez au soleil : prenez votre telephone dehors par une journee ensoleillee. Du texte qui passe a peine WCAG peut devenir illisible en plein soleil. Le contraste AAA (7:1) est le minimum pratique pour la visibilite exterieure.
• Sauvegardez des palettes de couleurs accessibles : construisez une palette ou chaque couleur de texte passe contre chaque couleur d'arriere-plan. Contrainte en amont, pas de surprises de contraste plus tard.
• Eduquez les parties prenantes : les parties prenantes qui exigent une couleur de marque a faible contraste changent souvent d'avis quand on leur montre le design a travers un simulateur de basse vision.

Confidentialite et donnees de conception

Le verificateur de contraste de couleurs s'execute entierement dans votre navigateur. Les couleurs et valeurs que vous entrez, les calculs et les resultats de contraste restent tous sur votre appareil. Rien n'est televerse sur un serveur, enregistre ou partage avec qui que ce soit.

Cela importe moins pour les couleurs individuelles (elles ne sont pas secretes) et plus pour la verification par lots ou le travail de systeme de design ou vous pourriez coller une palette de marque complete, des couleurs de maquette de produit internes ou des specifications UI de produit non publiees. Les outils de contraste en nuage enregistrent chaque collage dans leurs journaux de requetes, les conservent parfois pour «amelioration du service», et pourraient fuir des couleurs de marque non publiees ou des designs UI. Un verificateur base sur navigateur a une exposition nulle : les couleurs ne quittent jamais votre machine.

La verification de contraste basee sur navigateur fonctionne aussi hors ligne une fois la page chargee, utile pour les revues de design dans les avions, dans des environnements securises sans acces internet, ou partout ou vous ne pouvez pas ou ne devriez pas partager des donnees de conception avec un service tiers.