⇄ Inverser les couleurs

Comment utiliser

1. Choisissez une couleur de premier plan (texte) et une couleur d'arrière-plan.
2. Le ratio de contraste se met à jour instantanément.
3. Vérifiez les notes WCAG (AA/AAA) pour du texte normal et large.
4. Cliquez sur Inverser pour permuter les couleurs.

Questions fréquentes

Qu'est-ce que WCAG ?

WCAG (Web Content Accessibility Guidelines) sont les normes internationales pour rendre le contenu web accessible. Le niveau AA est le standard le plus couramment exigé. Le niveau AAA est le plus élevé.

Qu'est-ce qui compte comme « texte large » ?

Le texte large est défini comme au moins 18 pt (24 px) ou 14 pt (18,66 px) en gras. Il a une exigence de contraste plus faible parce qu'il est plus facile à lire.

Quel ratio de contraste viser ?

Pour le corps de texte, visez au moins 4,5 : 1 (AA). Pour la meilleure accessibilité, visez 7 : 1 (AAA). Les titres et textes larges ont besoin d'au moins 3 : 1.

Ce que mesure réellement WCAG

« Contraste » en accessibilité web ne signifie pas « à quel point les couleurs paraissent différentes », c'est un ratio de luminance relative précis entre deux couleurs. La luminance est une approximation perceptuelle de la clarté apparente d'une couleur pour un observateur voyant typique. Le ratio va de 1 : 1 (deux couleurs de luminance identique, invisibles l'une sur l'autre) à 21 : 1 (noir pur #000000 sur blanc pur #ffffff). Trois critères de succès normatifs de WCAG utilisent ce ratio :

• 1.4.3 Contraste (minimum), niveau AA : au moins 4,5 : 1 pour le texte normal, 3 : 1 pour le texte large.
• 1.4.6 Contraste (amélioré), niveau AAA : au moins 7 : 1 pour le texte normal, 4,5 : 1 pour le texte large.
• 1.4.11 Contraste du contenu non textuel, niveau AA (ajouté dans WCAG 2.1), au moins 3 : 1 pour les composants d'interface et les objets graphiques porteurs de sens par rapport aux couleurs adjacentes.

Le seuil de 4,5 : 1 n'est pas arbitraire. La dérivation propre à WCAG part d'une référence ANSI de 3 : 1 pour une vision normale, multipliée par 1,5 pour les utilisateurs ayant une acuité de 20/40 (le seuil souvent utilisé pour définir la « basse vision » au sens légal). 4,5 = 3 × 1,5. Le seuil AAA de 7 : 1 étend la même logique à une acuité d'environ 20/80. Les logos, noms de marque et textes accessoires ou décoratifs sont exemptés, mais tout le reste relève de la règle.

La formule

La formule de contraste de la technique G18 de WCAG comporte trois étapes. Les entrées sont des valeurs de canal sRGB 8 bits (0-255), chacune d'abord convertie dans une plage de 0 à 1 :

1. Linéariser le sRGB (annuler la courbe gamma). Pour chaque canal V : si V ≤ 0,04045, V_linéaire = V ÷ 12,92 ; sinon, V_linéaire = ((V + 0,055) ÷ 1,055)^2,4. (Les anciens documents WCAG utilisaient 0,03928 ; le W3C l'a corrigé en 0,04045 par erratum pour correspondre à la spécification sRGB formelle, la différence numérique est négligeable.)
2. Calculer la luminance relative : L = 0,2126·R + 0,7152·G + 0,0722·B (linéarisée). Les coefficients proviennent de la fonction d'efficacité lumineuse photopique de l'observateur standard CIE 1931 : l'œil humain est le plus sensible au vert (~71 %), puis au rouge (~21 %), puis au bleu (~7 %). C'est pourquoi un texte bleu pur sur fond blanc peut échouer au contraste alors même que les couleurs paraissent très différentes.
3. Prendre le ratio : (L1 + 0,05) ÷ (L2 + 0,05), où L1 est la couleur la plus claire et L2 la plus sombre. Le décalage de 0,05 modélise la lumière parasite ambiante sur un écran typique, et empêche le ratio de s'emballer lorsqu'une couleur est presque noire.

Exemple traité pour du noir sur blanc : le blanc a L = 1,0, le noir a L = 0, donc le ratio est (1 + 0,05) ÷ (0 + 0,05) = 21. C'est le contraste maximal possible en sRGB.

Qu'est-ce qui compte comme « texte large » ?

WCAG définit le texte à grande échelle comme au moins 18 points (graisse normale) ou 14 points gras. Converti en pixels CSS selon la valeur indiquée par le W3C, 1 pt = 1,333 px :

• 18 pt = 24 px en graisse normale
• 14 pt gras = 18,66 px en gras

La plupart des navigateurs affichent le corps de texte par défaut à 16 px / 12 pt, ce qui n'est pas large. Une erreur courante consiste à considérer tout titre comme large ; un <h3> stylé à 18 px en graisse normale relève quand même de la règle des 4,5 : 1 pour le texte normal.

Le cas limite célèbre : #767676 sur blanc

Les concepteurs en quête de minimalisme choisissent souvent des gris moyens pour le corps de texte. Deux valeurs identiques à l'œil se trouvent de part et d'autre de la ligne WCAG :

Premier plan	Arrière-plan	Ratio	AA Normal
#000000	#ffffff	21.00	Réussi (max)
#595959	#ffffff	~7.0	Réussi + AAA
#767676	#ffffff	4.54	Réussi (de justesse)
#777777	#ffffff	4.48	Échoué
#959595	#ffffff	3.00	Échoué (large uniquement)
#ffff00	#ffffff	1.07	Échoué

Un décalage hexadécimal d'un seul caractère, la différence entre #767676 et #777777 : fait passer ce gris d'apparence identique de la réussite à l'échec, car WCAG interdit explicitement d'arrondir les ratios à la hausse. WebAIM cite spécifiquement #777777 comme une « nuance de gris couramment utilisée » qui ne satisfait pas au niveau AA. Ce seul piège est responsable d'une part mesurable des échecs d'audit automatisé lors des analyses de sites réels.

Là où la formule montre ses limites

La formule de luminance relative est rapide et déterministe, mais elle présente des défauts perceptuels bien documentés :

• Symétrie. WCAG 2 renvoie le même ratio que l'on place du texte clair sur fond sombre ou du texte sombre sur fond clair. Des études empiriques de lecture montrent que le clair-sur-sombre nécessite plus de contraste que le sombre-sur-clair pour paraître aussi lisible, en partie à cause de la dilatation de la pupille et de l'effet de « halation » sur les glyphes clairs sur fond sombre. Les interfaces en mode sombre conformes à WCAG 2 AA peuvent malgré tout paraître délavées.
• Cécité spatiale. La formule ignore la graisse de la police, l'épaisseur des traits et la taille de police au-delà du seuil de texte large. Une police 18 px ultrafine et une police 18 px de graisse 900 sont traitées de façon identique.
• Sur-validation en mode sombre. D'après la documentation APCA, la formule surestime systématiquement le contraste des couleurs sombres. Deux gris sombres qui réussissent WCAG 2 sur le plan mathématique peuvent être visuellement indiscernables sur un vrai moniteur.

APCA (Accessible Perceptual Contrast Algorithm) est le candidat de remplacement en cours de prototypage pour WCAG 3. Il renvoie une unique valeur Lc signée allant d'environ −108 à +106, tient compte de la polarité et intègre une table de correspondance graisse / taille de police. APCA est actuellement une référence bêta non commerciale, et non une cible de conformité légale (les sites en production devraient toujours viser WCAG 2.1 / 2.2 AA), mais c'est un contrôle de lisibilité plus précis, en particulier pour le mode sombre. Chrome DevTools intègre un aperçu APCA dans son sélecteur de couleur.

Pourquoi cela compte sur le plan juridique

WCAG 2.2 est devenue une recommandation du W3C le 5 octobre 2023, mais les critères de contraste sont repris sans changement de la version 2.1. Le contraste des couleurs est l'un des problèmes les plus cités dans les procès relatifs à l'accessibilité numérique, et plusieurs juridictions le rendent de fait obligatoire :

• États-Unis, Section 508 (révisée en 2017) est harmonisée avec WCAG 2.0 AA, de sorte que le 4,5 : 1 est contraignant pour les marchés publics fédéraux. Les décisions de justice au titre de l'ADA Title III ont cité à plusieurs reprises WCAG AA comme la norme de fait pour les sites commerciaux ouverts au public. Le DOJ a adopté une règle au titre du Title II en avril 2024, exigeant que les contenus web des administrations des États et des collectivités locales respectent WCAG 2.1 AA, avec des échéances échelonnées d'ici la fin de la décennie.
• Union européenne, EN 301 549 intègre WCAG 2.1 AA. L'échéance de conformité de l'European Accessibility Act (directive 2019/882) était fixée au 28 juin 2025, couvrant les sites web, les applications mobiles, le commerce électronique, la banque, les livres numériques et plus encore. Les microentreprises sont exemptées pour les services. Les sanctions varient selon les États membres.
• Au Royaume-Uni, l'Equality Act 2010 impose un devoir d'« aménagements raisonnables » qui s'applique aux secteurs privé et public. Les organismes du secteur public sont liés par le règlement de 2018 sur l'accessibilité qui intègre EN 301 549 / WCAG 2.1 AA.
• Canada, AODA (Ontario) et la loi fédérale Accessible Canada Act exigent WCAG 2.0 AA, les échéances échelonnées de l'AODA étant passées depuis longtemps.

Contraste des couleurs et daltonisme

Une confusion fréquente : le ratio WCAG repose sur la luminance et reste utile pour la plupart des utilisateurs daltoniens ; un ratio de 4,5 : 1 dérivé de la luminance correspond à un signal perceptuel fort même lorsque les indices de teinte sont perdus. C'est pourquoi les critères de contraste côtoient un critère distinct, 1.4.1 Utilisation de la couleur, qui interdit de se reposer sur la seule couleur pour transmettre une information. Le contraste ne vous dit pas si un graphique rouge contre vert est lisible pour un deutéranope, seulement si chaque couleur contraste individuellement avec le fond du graphique. Les graphiques et les interfaces à états nécessitent des motifs, des étiquettes ou des formes superposés à la couleur.

Liste de contrôle pratique

• Corps de texte sur blanc : restez à #595959 ou plus sombre pour AAA ; #767676 est le gris le plus clair qui satisfait encore AA Normal.
• Bleus de marque : beaucoup se situent dans la plage 3-4,5. #1976d2 est un bleu Material typique à environ 4,59 : 1, il passe AA Normal de justesse sur blanc. #42a5f5 à environ 2,6 : 1 échoue.
• Bordures de formulaire : une bordure 1px solid #ccc sur blanc est d'environ 2,13 : 1, elle échoue au critère 1.4.11. Utilisez #767676 ou plus sombre.
• Les indicateurs de focus doivent atteindre 3 : 1 par rapport à l'arrière-plan. Le contour par défaut du navigateur est souvent écrasé par un CSS de réinitialisation sans remplacement satisfaisant au seuil.
• Le texte indicatif est techniquement accessoire, mais les utilisateurs le lisent ; traitez-le comme si le 4,5 : 1 s'appliquait.
• Ne vous fiez pas à l'œil en mode sombre. Les ratios WCAG 2 sur-valident systématiquement les arrière-plans sombres. Recoupez avec APCA dans Chrome DevTools.

Autres questions

Pourquoi le jaune pur sur blanc échoue-t-il alors qu'il paraît lumineux ?

Le jaune (#ffff00) sur blanc donne 1,07 : 1, quasiment aucun contraste. La formule de luminance pondère le vert à 71 % et le rouge à 21 %, si bien que le jaune (R+G) a une luminance très proche de celle du blanc. Le jaune sur noir, à l'inverse, donne 19,56 : 1, l'une des combinaisons les plus lisibles qui soient, ce qui explique son utilisation pour les panneaux routiers et les avertissements sur les casques de chantier.

Faut-il toujours viser le niveau AAA ?

Non. WCAG indique elle-même : « Il n'est pas recommandé d'exiger la conformité de niveau AAA comme politique générale pour des sites entiers, car il n'est pas possible de satisfaire à tous les critères de succès de niveau AAA pour certains contenus. » Le niveau AA est la cible légale presque partout ; le AAA est réservé à la lecture d'informations à fort enjeu (contenus longs, documents gouvernementaux destinés au grand public, publications privilégiant l'accessibilité).

Les outils automatisés peuvent-ils détecter chaque échec de contraste ?

Non. axe-core, Lighthouse et les audits similaires signalent de manière fiable les échecs de texte sur couleur unie, mais ils ne peuvent pas tester le texte superposé à des images d'arrière-plan, des dégradés CSS, des arrière-plans de pseudo-éléments ou des couleurs de bordure CSS ; ces cas sont signalés comme « incomplets » et nécessitent une vérification manuelle. Un sélecteur en direct comme celui-ci est particulièrement utile pour échantillonner la couleur d'arrière-plan dominante d'une image et vérifier uniquement la paire texte/arrière-plan avant la mise en production.

Cet outil prend-il en charge la transparence / le canal alpha ?

Cette page vérifie des paires de couleurs hexadécimales opaques. Si votre texte ou votre arrière-plan utilise un canal alpha, le contraste réel dépend de ce qui se trouve derrière ; vous devrez d'abord calculer le premier plan composité, puis vérifier la couleur opaque obtenue.

Des données sont-elles envoyées à un serveur ?

Non. La formule de luminance et le ratio sont calculés dans votre navigateur ; les couleurs ne quittent jamais votre appareil. La page fonctionne hors ligne une fois chargée.

Outils associés