28 octobre 2026

Contraste couleur et accessibilité : les ratios WCAG 4.5:1 et 3:1 expliqués

En matière de contraste couleur et d'accessibilité, la règle de base des WCAG tient en une ligne : le texte doit présenter un ratio de contraste d'au moins 4.5:1 avec son arrière-plan, et le grand texte d'au moins 3:1. C'est le critère de succès 1.4.3 « Contraste (minimum) », de niveau AA. Son objectif : que le texte puisse être lu par des personnes ayant une vision modérément basse ou une perception des contrastes altérée, sans recourir à une technologie d'assistance qui renforce le contraste. Un second critère, le 1.4.11 « Contraste du non-textuel », impose de son côté un ratio de 3:1 aux informations visuelles qui permettent d'identifier les composants d'interface et leurs états, ainsi qu'aux parties de graphiques nécessaires à la compréhension. Voici ce que disent précisément ces deux critères, ce qui compte comme « grand texte », les exceptions prévues et la façon de mesurer correctement.

Les ratios de contraste couleur exigés pour l'accessibilité du texte

Le critère 1.4.3 s'applique à la présentation visuelle du texte et des images de texte. Le seuil général est de 4.5:1. Le grand texte, et les images de grand texte, bénéficient d'un seuil abaissé à 3:1, car un texte plus grand, aux traits plus épais, reste plus facile à lire avec un contraste plus faible.

Ces valeurs sont destinées à être traitées comme des seuils : le W3C précise que le ratio calculé ne devrait pas être arrondi. Un ratio de 4.499:1 n'atteint donc pas le seuil de 4.5:1.

Le choix de ces chiffres n'est pas arbitraire. Le W3C rappelle que 3:1 est le minimum recommandé par les normes ISO 9241-3 et ANSI/HFS 100-1988 pour un texte standard et une vision normale. Le ratio de 4.5:1 compense la perte de sensibilité au contraste associée à une acuité visuelle d'environ 20/40 : 3 × 1,5 = 4,5. Selon la même logique, une acuité de 20/80 demande environ 7:1, le ratio retenu pour le critère 1.4.6 de niveau AAA.

Texte courant et images de texte : au moins 4.5:1 (niveau AA).
Grand texte et images de grand texte : au moins 3:1 (niveau AA).
Niveau AAA (critère 1.4.6) : ratio de 7:1.
Informations visuelles identifiant les composants d'interface et leurs états, parties de graphiques nécessaires à la compréhension : au moins 3:1 (critère 1.4.11).

Qu'est-ce qu'un « grand texte » au sens des WCAG ?

Les WCAG définissent le texte de grande taille comme un texte d'au moins 18 points, ou d'au moins 14 points en gras, ou d'une taille équivalente pour les polices chinoises, japonaises et coréennes. Les points sont ceux de CSS : 1pt = 1,333px. En pixels CSS, 14pt et 18pt correspondent donc à environ 18,5px et 24px.

Pour de nombreuses polices courantes, 14 et 18 points équivalent à peu près à 1,2 et 1,5 em, soit 120 % et 150 % de la taille par défaut du texte courant, mais le W3C précise qu'il faut le vérifier pour la police réellement utilisée. Lors d'une évaluation, la taille en points doit être obtenue auprès du navigateur, ou calculée à partir des métriques de la police comme le fait le navigateur. C'est la taille au moment de la diffusion qui compte, pas un éventuel agrandissement fait par l'utilisateur.

Attention aux polices très fines ou inhabituelles : elles sont plus difficiles à lire, surtout à faible contraste. Le lissage des polices (anti-aliasing) peut aussi les afficher avec une couleur bien plus pâle que celle définie en CSS. Un texte peut alors passer le critère sur le papier tout en étant peu lisible en pratique ; la bonne pratique consiste à choisir une police aux traits plus épais ou une combinaison de couleurs qui dépasse le minimum requis.

Les exceptions : logos, texte décoratif et composants inactifs

Le critère 1.4.3 n'impose aucune exigence de contraste dans plusieurs cas précis. Ces exceptions sont étroites : le W3C insiste sur le fait que le texte dont le contraste est insuffisant à cause d'une charte graphique ou d'une identité de marque n'est pas exempté, au-delà des logos eux-mêmes.

Même un logo perd son exemption si le faible contraste relève d'un choix de l'auteur plutôt que de la charte. Exemple donné par le W3C : des logos d'entreprises affichés en faible contraste par défaut, jusqu'au survol, ne respectent pas le critère. Lorsqu'un logo sert de lien ou de contrôle, il est recommandé d'en choisir une variante suffisamment contrastée si la charte le permet, ou de proposer un composant équivalent qui respecte les exigences de contraste.

Logotypes : le texte faisant partie d'un logo ou d'un nom de marque.
Décoration pure : un texte est purement décoratif seulement si ses mots peuvent être réarrangés ou remplacés sans changer leur finalité, comme des mots aléatoires très clairs en fond de couverture d'un dictionnaire.
Composants d'interface inactifs : par exemple un bouton d'envoi visible mais qui ne peut être activé qu'une fois tous les champs obligatoires remplis.
Texte invisible pour tous, ou texte faisant partie d'une image contenant d'autres éléments visuels importants, comme une plaque de rue apparaissant par hasard sur une photo.

Contraste du texte et contraste des composants (critère 1.4.11)

Le critère 1.4.11, également de niveau AA, exige un ratio d'au moins 3:1 face aux couleurs adjacentes pour deux familles d'éléments : les informations visuelles nécessaires pour identifier les composants d'interface et leurs états (sauf composants inactifs ou apparence déterminée par le navigateur sans modification par l'auteur), et les parties de graphiques nécessaires pour comprendre le contenu (sauf lorsqu'une présentation particulière est essentielle à l'information).

Concrètement, lorsqu'ils servent à repérer le composant ou son état, la bordure d'un champ de saisie, la coche d'une case à cocher ou la flèche d'un menu déroulant doivent atteindre 3:1. C'est aussi le cas d'un indicateur de focus personnalisé par l'auteur ; le style de focus par défaut du navigateur, s'il n'est pas modifié, est exempté du ratio mais doit rester visible. Le W3C donne des exemples chiffrés : une case à cocher à bordure grise #9D9D9D sur blanc (2,7:1) échoue, alors qu'un champ avec une bordure #767676 sur fond blanc réussit. Un indicateur de focus gris #AAA personnalisé par l'auteur, à 2,3:1 sur blanc, échoue aussi.

Le critère n'exige pas de bordure visible autour de chaque bouton : si un contrôle contient un texte ou une icône suffisamment contrastée, la limite de sa zone cliquable n'a pas à être dessinée. En revanche, un indicateur de focus suffisamment contrasté reste nécessaire. Les effets de survol ajoutés par l'auteur n'ont pas besoin d'atteindre 3:1, à condition de ne pas faire perdre un contraste suffisant au composant, ni aux indicateurs d'autres états comme le focus ou la sélection.

Pour les graphiques, chaque ligne d'une courbe ou chaque part d'un camembert nécessaire à la compréhension doit contraster à 3:1. Cette exigence tombe si des étiquettes et valeurs textuelles donnent la même information, si l'information est disponible sous une autre forme (un tableau, par exemple), ou si la présentation est essentielle : drapeaux, photos, captures d'écran, cartes de chaleur. Le texte présent dans un graphique reste soumis au critère 1.4.3. Enfin, un texte très stylisé ou des caractères utilisés comme symboles, comme un « X » de fermeture ou un « > » servant de flèche, relèvent du contraste non textuel.

Comment mesurer le contraste couleur d'une page

Le ratio se calcule avec la formule (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. Le résultat varie de 1:1 à 21:1. Le contraste est calculé de façon que la teinte ne soit pas un facteur déterminant. Des outils font ce calcul automatiquement ; le W3C en cite plusieurs, comme Colour Contrast Analyser, à titre d'information et sans les cautionner.

Pour une mesure fiable, utilisez les couleurs fournies par le navigateur ou définies dans le balisage et les feuilles de style, plutôt que les pixels affichés à l'écran, que le lissage peut altérer. Pour le critère 1.4.3, si aucune couleur de fond n'est spécifiée, le blanc est supposé. Mais définir une couleur de texte sans couleur de fond, ou l'inverse, constitue en soi un échec (F24), car la couleur par défaut de l'utilisateur est inconnue. Une image de fond qui ne contraste pas suffisamment avec le texte posé dessus est un autre échec documenté (F83).

Vérifiez aussi le texte d'exemple (placeholder) des champs et le texte affiché au survol ou au focus : ils sont couverts par le critère 1.4.3.
Pour chaque composant (lien, bouton, champ), repérez les indicateurs visuels qui signalent sa présence et son état, testez-les au chargement, puis dans chaque état.
Pour chaque graphique porteur d'information, vérifiez chaque objet graphique face à ses couleurs adjacentes ; s'il comporte plusieurs couleurs ou un dégradé, testez la zone la moins contrastée et, si elle est sous 3:1, imaginez-la invisible : l'objet reste-t-il compréhensible ?
En présence d'un dégradé, prenez la couleur centrale de la zone utile et demandez-vous si l'objet reste identifiable sans la couleur adjacente insuffisante.

Questions fréquentes

Quel est le ratio de contraste minimum pour l'accessibilité ?

Au niveau AA des WCAG, le texte doit avoir un ratio d'au moins 4.5:1 avec son arrière-plan, le grand texte d'au moins 3:1. Les informations visuelles qui identifient les composants d'interface et leurs états, ainsi que les parties de graphiques nécessaires à la compréhension, doivent atteindre 3:1 face aux couleurs adjacentes (critère 1.4.11).

À partir de quelle taille un texte est-il considéré comme grand ?

À partir de 18 points, ou 14 points en gras, soit environ 24px et 18,5px en CSS. Pour de nombreuses polices courantes, cela correspond à peu près à 150 % et 120 % de la taille par défaut du texte courant.

Un ratio de 4,49:1 est-il accepté ?

Non. Ces ratios sont à traiter comme des seuils et le ratio calculé ne devrait pas être arrondi : le W3C précise qu'un ratio de 4.499:1 n'atteint pas le seuil de 4.5:1.

Les logos doivent-ils respecter le contraste minimum ?

Le texte faisant partie d'un logo ou d'un nom de marque est exempté. Mais si le logo est affiché en faible contraste par choix de l'auteur, et non en raison de la charte graphique, cette présentation n'est pas exemptée.

Un bouton désactivé doit-il être contrasté ?

Non. Les composants inactifs, comme un contrôle désactivé en HTML, ne sont soumis ni au critère 1.4.3 ni au critère 1.4.11.

Comment calculer un ratio de contraste ?

Avec la formule (L1 + 0,05) / (L2 + 0,05), L1 étant la luminance relative de la couleur la plus claire et L2 celle de la plus foncée. En pratique, des outils de mesure du contraste font ce calcul automatiquement à partir des codes couleur.

Sources

Article appuyé sur les sources officielles citées en fin de page.