Contraste des couleurs : ratios WCAG, tests et corrections

Un texte gris clair sur fond blanc fait propre dans une maquette. Sur un téléphone en plein soleil, ou pour une personne malvoyante, il est pénible à lire. C'est aussi le défaut d'accessibilité le plus répandu : le WebAIM Million 2026 (s'ouvre dans un nouvel onglet) a relevé du texte peu contrasté sur 83,9 % des pages d'accueil du premier million de sites, avec en moyenne 34 occurrences distinctes par page.

La bonne nouvelle : le contraste se mesure, les seuils sont clairs et les corrections coûtent généralement peu. Ce guide vous donne les chiffres, les outils gratuits et une méthode pour corriger vos couleurs de marque sans tout reprendre.

Qu'est-ce qu'un rapport de contraste ?

Un rapport de contraste est un nombre qui compare la luminosité relative, ou luminance, de deux couleurs, en général un texte et son arrière-plan. Les WCAG le calculent avec une formule fixe, et le résultat va de 1:1 (aucune différence, blanc sur blanc) à 21:1 (noir sur blanc). Plus le nombre est élevé, plus les deux couleurs se distinguent facilement.

La formule est (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus foncée. Vous n'aurez jamais à la calculer à la main, mais un détail compte : seule la luminance entre en jeu, pas la teinte. C'est pourquoi un texte rouge sur fond vert peut paraître éclatant et obtenir pourtant un mauvais score.

L'autre détail souvent oublié, c'est l'arrondi. Le document explicatif du critère 1.4.3 (s'ouvre dans un nouvel onglet) du W3C précise que les valeurs calculées « ne doivent pas être arrondies (par exemple, 4,499:1 n'atteint pas le seuil de 4,5:1) ». Ainsi, le gris #767676 sur blanc (4,54:1) passe, tandis que #777777 sur blanc (4,48:1) échoue, alors que personne ne peut les distinguer à l'œil.

Quel rapport de contraste les WCAG exigent-elles ?

Au niveau AA, auquel renvoient la plupart des lois et des contrats, le texte courant doit atteindre au moins 4,5:1 par rapport à son arrière-plan et le texte en grands caractères 3:1 (critère de succès 1.4.3). Les composants d'interface et les graphiques porteurs de sens doivent atteindre 3:1 par rapport aux couleurs adjacentes (1.4.11). Le niveau AAA, plus strict, demande 7:1 pour le texte courant et 4,5:1 pour les grands caractères (1.4.6).

Pourquoi 4,5:1 ? Le W3C explique que ce seuil « compense la perte de sensibilité au contraste que connaissent généralement les utilisateurs dont la perte de vision équivaut à une acuité d'environ 20/40 » (soit environ 5/10). Autrement dit, il est calibré pour les personnes dont la vue est modérément réduite, ce qui inclut beaucoup de clients âgés qui ne se diraient jamais handicapés.

Certains textes sont exemptés : les logos et noms de marque, le texte purement décoratif, le texte invisible pour tout le monde, le texte figurant dans une image qui comporte d'autres contenus visuels importants, et le texte des commandes inactives (désactivées). Votre logo peut rester tel quel. Un paragraphe composé dans la couleur pâle de votre logo, non.

Qu'est-ce qu'un texte en grands caractères ?

Pour les WCAG, un texte en grands caractères fait au moins 18 points, ou au moins 14 points s'il est en gras. Le W3C les convertit en environ 24 pixels CSS et 18,5 pixels en gras. En dessous, il faut atteindre les 4,5:1 complets. Le texte courant, les légendes, les étiquettes de formulaire, les prix et les liens du pied de page ne sont presque jamais en grands caractères : ils doivent donc respecter le rapport le plus élevé.

Concrètement, le gris #949494 sur blanc obtient 3,03:1. C'est suffisant pour un titre de 28 pixels, et un échec pour un paragraphe de 16 pixels de la même couleur. Beaucoup de sites passent sur leurs titres et échouent sur tout ce qui se trouve en dessous.

Les polices fines et décoratives demandent une attention particulière. Le W3C note qu'à cause de l'anticrénelage, « les polices particulièrement fines ou inhabituelles peuvent être rendues par les agents utilisateurs avec une couleur bien plus pâle » que celle que vous avez choisie. Si votre police de marque est en graisse légère, gardez une marge au-dessus de 4,5:1 au lieu de viser 4,51.

Le contraste s'applique-t-il aux boutons, aux icônes, au focus et aux graphiques ?

Oui. Selon le critère de succès 1.4.11 (niveau AA), tout ce qu'il faut voir pour identifier une commande, son état ou un graphique doit atteindre 3:1 par rapport aux couleurs adjacentes. Cela couvre les bordures des champs de formulaire, les icônes sans libellé texte, les contours du focus, les états des cases à cocher et des interrupteurs, et les lignes et segments des graphiques. Le texte à l'intérieur d'un bouton doit toujours atteindre 4,5:1.

• Champs de formulaire : une bordure gris clair #CCCCCC sur blanc obtient 1,61:1. Si ce trait pâle est la seule chose qui indique où saisir, c'est un échec.
• Boutons : les WCAG n'exigent pas de bordure visible autour de chaque bouton. Le document explicatif du critère 1.4.11 (s'ouvre dans un nouvel onglet) du W3C indique qu'un contour n'est nécessaire que s'il n'existe aucun autre moyen visuel d'identifier la commande. Si un bouton n'est reconnaissable qu'à sa forme colorée, cette forme doit atteindre 3:1 par rapport à la page.
• Icônes : une loupe de recherche, un cœur de liste d'envies ou une icône de panier sans texte à côté doivent atteindre 3:1.
• Indicateurs de focus : le contour qui montre le focus clavier doit contraster avec l'arrière-plan qui l'entoure. Notre guide des WCAG 2.2 présente les nouveaux critères sur le focus.
• Graphiques : les lignes d'un graphique linéaire et les parts d'un camembert doivent atteindre 3:1, sauf si les mêmes valeurs figurent aussi en texte.
• Les commandes désactivées sont exemptées, même si l'on doit pouvoir savoir si un bouton est actif ou non.

Les liens dans le texte courant sont un cas à part. S'ils ne se distinguent que par la couleur, sans soulignement, la technique G183 (s'ouvre dans un nouvel onglet) du W3C demande 3:1 entre la couleur du lien et le texte qui l'entoure, tout en exigeant 4,5:1 pour les deux par rapport à l'arrière-plan. Trouver trois couleurs qui satisfont tout cela est difficile. Un soulignement est bien plus simple.

Comment vérifier le contraste des couleurs ?

Utilisez un outil de contraste gratuit pour des paires de couleurs précises, les outils de développement du navigateur pour les pages en ligne, et une analyse automatique pour repérer les zones à problème sur tout le site. Vérifiez ensuite à l'œil ce que les outils ratent : texte sur photos et dégradés, états au survol et au focus, textes indicatifs et messages d'erreur. Comptez quelques minutes par gabarit de page.

• WebAIM Contrast Checker (s'ouvre dans un nouvel onglet) : saisissez deux codes hexadécimaux et obtenez le rapport, avec réussite ou échec pour le texte courant, les grands caractères et les objets graphiques. Son curseur de luminosité aide à trouver la nuance conforme la plus proche.
• Colour Contrast Analyser (s'ouvre dans un nouvel onglet) : une application de bureau gratuite de Vispero pour Windows et macOS. Sa pipette prélève n'importe quel pixel de l'écran, ce qui est utile pour le texte sur image, les PDF et les applis, et elle comprend un simulateur de daltonisme.
• Chrome DevTools : inspectez un texte et ouvrez le sélecteur de couleur. Sa section sur le rapport de contraste (s'ouvre dans un nouvel onglet) affiche des lignes pour AA et AAA et peut proposer une couleur conforme. Le panneau CSS Overview liste tous les problèmes de contraste de la page.
• Outils automatiques : les extensions de navigateur et Lighthouse signalent le texte peu contrasté sur toute une page, mais marquent souvent le texte sur image ou sur dégradé comme « à vérifier manuellement » plutôt que conforme ou non.

Là où les outils s'arrêtent, prélevez vous-même les couleurs à la pipette. Pour un texte posé sur une photo de bannière, vérifiez la partie la plus claire de l'image derrière les lettres les plus claires ; le W3C répertorie les images d'arrière-plan sans contraste suffisant comme un échec connu (F83). Survolez les boutons, atteignez-les avec Tab, déclenchez une erreur de formulaire, passez en mode sombre si vous en proposez un. Un thème sombre peut aussi échouer : un gris #757575 sur fond #121212 obtient 4,07:1. Notre guide pour tester l'accessibilité de votre site place le contraste parmi les autres vérifications manuelles rapides.

Comment corriger un contraste insuffisant sans changer de charte graphique ?

Le plus souvent, en ajoutant une nuance plus foncée de votre couleur de marque pour le texte et les petits éléments, et en gardant l'original pour les grands titres, les arrière-plans et les illustrations. Beaucoup de couleurs de marque n'échouent qu'aux petites tailles. Passer d'un texte blanc à un texte foncé sur une couleur de marque claire suffit souvent, et la plupart des visiteurs remarqueront seulement que la page se lit plus facilement.

1. Créez une version « texte » de chaque couleur de marque, à au moins 4,5:1 sur vos arrière-plans principaux, et utilisez-la pour le texte courant, les liens et les petites icônes.
2. Réservez la couleur vive d'origine aux grands titres (3:1 y suffit), aux arrière-plans, aux illustrations et à la décoration.
3. Sur les couleurs de marque claires, passez le texte des boutons du blanc au foncé.
4. Placez un fond plein ou semi-opaque derrière le texte posé sur des photos.
5. Vérifiez chaque état : survol, focus, lien visité, sélection, erreur et texte indicatif.
6. Enregistrez les paires conformes comme design tokens ou paramètres du thème, pour que les nouvelles pages en héritent au lieu de les réinventer.

Concevoir pour le daltonisme : pourquoi la couleur seule ne suffit pas

Contraste et couleur sont deux problèmes distincts. Environ 1 homme sur 12 et 1 femme sur 200 ont un trouble de la vision des couleurs, le plus souvent rouge-vert, selon Colour Blind Awareness (s'ouvre dans un nouvel onglet). Le critère WCAG 1.4.1 (s'ouvre dans un nouvel onglet) (niveau A) exige que la couleur ne soit pas le seul moyen visuel de transmettre une information : associez-la à du texte, des icônes, des motifs ou des soulignements.

• Erreurs de formulaire : une bordure rouge seule ne suffit pas. Ajoutez un message comme « Saisissez un code postal » à côté du champ, idéalement avec une icône.
• Stock et statut : une pastille verte ou rouge à côté d'un produit ne dit rien à beaucoup d'acheteurs. Écrivez « En stock » ou « Épuisé ».
• Graphiques : une légende qui repose sur la correspondance des couleurs est difficile à lire. Étiquetez directement les courbes, ou utilisez des motifs et des styles de ligne différents.
• Liens : dans le texte courant, soulignez-les, pour les raisons vues plus haut.

Pour constater le problème par vous-même, les DevTools de Chrome peuvent simuler des troubles de la vision, et le Colour Contrast Analyser propose aussi un simulateur. Le contraste aide ici aussi : le rapport mesure la luminosité, pas la teinte, donc deux couleurs au rapport élevé restent distinctes même quand leurs teintes se ressemblent. Pour en savoir plus sur la façon dont les personnes malvoyantes ou ayant d'autres déficiences règlent leurs appareils, consultez comment les personnes handicapées utilisent le web.

Les modes contraste élevé et les boutons de contraste suffisent-ils ?

Non. Les thèmes de contraste du système d'exploitation et les boutons de contraste sur la page aident les personnes qui savent qu'elles ont besoin de plus de contraste et qui l'activent. Mais les WCAG évaluent votre page dans son état par défaut : les couleurs que chaque visiteur voit en premier doivent donc être conformes. Un bouton de contraste est une option supplémentaire pour qui en veut davantage, pas une correction pour des couleurs qui échouent.

Certaines personnes handicapées utilisent les thèmes de contraste de Windows, qui remplacent vos couleurs par les leurs. Testez votre site avec l'un d'eux activé : les icônes construites avec des images d'arrière-plan peuvent disparaître, tout comme les styles de focus dessinés uniquement avec une ombre portée. La media query CSS prefers-contrast vous permet aussi de proposer une version plus contrastée aux personnes qui l'ont demandée dans les réglages de leur système.

Notre propre widget comprend un réglage de contraste et un profil pour le daltonisme, et certains visiteurs les trouvent utiles. Nous vous dirions pourtant la même chose : si votre texte courant est en #999999 sur blanc, modifiez le CSS. Le widget offre à un visiteur qui veut plus de contraste un moyen de l'obtenir. Il ne rend pas conformes des couleurs par défaut qui échouent, et la référence WCAG de notre documentation le dit aussi.