nTools

Le contraste des couleurs expliqué : ratios WCAG, texte lisible et formats de couleur

Mis à jour :

Un texte se lit bien quand il se détache de son fond, et les Règles pour l’accessibilité des contenus Web (WCAG) en font un nombre : le rapport de contraste. WCAG 2.2, la version en vigueur, est une Recommandation du W3C depuis le 12 décembre 2024. Ce guide explique comment ce rapport se calcule, les seuils pour le texte et pour les commandes, et le lien avec les façons courantes d’écrire une couleur.

Comment se calcule le contraste

Chaque couleur est convertie en luminance relative, de 0 pour le noir à 1 pour le blanc. Les valeurs de rouge, de vert et de bleu sont d’abord ramenées à une intensité lumineuse, car les valeurs sRGB ne sont pas proportionnelles à la lumière : une valeur inférieure ou égale à 0,04045 (sur une échelle de 0 à 1) est divisée par 12,92, et les valeurs plus hautes suivent une courbe en puissance 2,4. Puis elles sont pondérées selon la luminosité que l’œil leur prête : 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu. Avant mai 2021, le seuil s’écrivait 0,03928 ; le W3C précise que le changement n’a pas d’effet pratique.

Le rapport vaut (L1 + 0,05) ÷ (L2 + 0,05), L1 étant la couleur la plus claire. Il va de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur du blanc. Il ne s’arrondit jamais : l’explication officielle des WCAG indique que 4,499:1 n’atteint pas 4,5:1, ce qui explique que des outils arrondissant à une décimale puissent afficher une réussite qui n’en est pas une.

Vérificateur de contraste des couleurs

Les seuils

Les WCAG ont trois niveaux, A, AA et AAA ; AA est le niveau visé par la plupart des politiques et des audits d’accessibilité. Trois critères de succès fixent des minimums de contraste :

CritèreS’applique àMinimumNiveau
1.4.3 Contraste (minimum)Texte normal4,5:1AA
1.4.3 Contraste (minimum)Grand texte3:1AA
1.4.6 Contraste (amélioré)Texte normal7:1AAA
1.4.6 Contraste (amélioré)Grand texte4,5:1AAA
1.4.11 Contraste du contenu non textuelCommandes, indicateurs de focus, icônes et éléments de graphiques3:1AA

Le grand texte, c’est au moins 18 points, ou 14 points en gras, soit environ 24 et 18,5 pixels CSS selon le W3C. Le texte d’un logo, le texte purement décoratif et celui des commandes désactivées n’ont pas d’exigence de contraste. Le contraste non textuel couvre ce qu’il faut voir pour utiliser une page : le contour d’un champ, une case à cocher, l’indicateur de focus, une icône sans libellé, les traits d’un graphique.

Quelles couleurs passent sur du blanc

Rapports sur fond blanc, tronqués à deux décimales comme les affiche le vérificateur :

Texte / fondContrasteCe qui est conforme
#000000 / #ffffff21:1Le maximum : tout est conforme
#0000ff / #ffffff8,59:1Conforme AAA pour tout le texte
#595959 / #ffffff7:1Tout juste AAA pour le texte normal
#767676 / #ffffff4,54:1Conforme AA pour le texte normal
#777777 / #ffffff4,47:1Non conforme AA pour le texte normal ; grand texte et graphismes seulement
#ff0000 / #ffffff3,99:1Grand texte et graphismes seulement
#949494 / #ffffff3,03:1Grand texte et graphismes seulement
#959595 / #ffffff2,99:1Rien n’est conforme, ni bordures ni icônes
#ffff00 / #ffffff1,07:1Presque invisible

#777777 et #767676 paraissent identiques, et pourtant l’une échoue et l’autre passe : la limite est aussi fine. Le rouge pur, fréquent pour les erreurs, n’atteint que 3,99:1 sur du blanc, assez pour une icône ou du grand texte mais pas pour un message d’erreur en texte normal ; un rouge un peu plus sombre comme #ee0000 atteint 4,53:1.

Pourquoi 4,5:1

Le W3C explique que 4,5:1 compense la perte de sensibilité au contraste qui accompagne en général une vision d’environ 20/40, fréquente avec l’âge, et 7:1 celle d’une vision d’environ 20/80. Un bon contraste aide aussi tous les autres : un téléphone en plein soleil, un écran bas de gamme, un projecteur dans une salle éclairée.

Les formats de couleur et ce qu’ils disent du contraste

#1a73e8, rgb(26 115 232), hsl(214 82% 51%) et oklch(57.4% 0.195 257.9) sont le même bleu écrit de quatre façons. HEX et RGB donnent directement les quantités de rouge, de vert et de bleu ; HEX peut ajouter une quatrième paire pour la transparence, comme #1a73e880 pour 50 %. HSL décrit teinte, saturation et luminosité, mais cette luminosité n’est pas celle que voit l’œil : le jaune et le bleu à 50 % de luminosité HSL ont 96,8 % et 45,2 % de luminosité OKLCH, d’où un texte bleu conforme sur blanc et un texte jaune qui ne l’est pas.

OKLCH, issu de CSS Color niveau 4, est conçu pour que des pas égaux de luminosité paraissent égaux, ce qui en fait le format le plus utile pour construire une palette au contraste prévisible. Les navigateurs le prennent en charge depuis Chrome et Edge 111, Firefox 113 et Safari 15.4, et il est Baseline largement disponible depuis novembre 2025. Le contraste se calcule toujours sur la couleur sRGB réellement affichée : vérifiez donc la paire finale avec un vérificateur.

Convertisseur de couleurs

Corriger une couleur qui échoue

Au-delà des WCAG 2

Les brouillons des WCAG 3 ont testé une autre méthode de contraste, souvent appelée APCA, qui tient compte de la taille et de la graisse des caractères et traite différemment le texte clair sur fond sombre. C’est un brouillon, pas une norme : les audits et les lois utilisent toujours le rapport des WCAG 2. Dans l’Union européenne, l’Acte européen sur l’accessibilité (directive 2019/882) s’applique depuis le 28 juin 2025 à de nombreux produits et services, dont le commerce en ligne.

Questions fréquentes

4,47:1, est-ce assez proche de 4,5:1 ?

Non. Le rapport ne s’arrondit pas : 4,47:1 n’atteint pas le minimum de 4,5:1 pour le texte normal. Il respecte en revanche 3:1 pour le grand texte et les graphismes.

Qu’est-ce qu’un grand texte ?

Au moins 18 points, environ 24 pixels CSS, ou 14 points en gras, environ 18,5 pixels CSS.

Les bordures et les icônes doivent-elles être contrastées ?

Oui, quand elles sont nécessaires pour comprendre ou utiliser la page : 3:1 face aux couleurs voisines. Le contour d’un champ, une case à cocher et l’indicateur de focus en sont des exemples.

Le mode sombre change-t-il les règles ?

Non. Les mêmes rapports valent pour tous les thèmes : vérifiez aussi la palette sombre.

Plus de contraste, c’est toujours mieux ?

Jusqu’à un certain point. Un contraste très élevé, comme du blanc pur sur du noir pur, peut paraître agressif à certains lecteurs ; à partir de 7:1, la lecture est confortable pour la plupart des textes.

Références

  1. W3C — Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 12 December 2024
  2. W3C WAI — Understanding Success Criterion 1.4.3: Contrast (Minimum)
  3. W3C WAI — Understanding Success Criterion 1.4.11: Non-text Contrast
  4. W3C — CSS Color Module Level 4
  5. Web platform features explorer — oklab() and oklch()
  6. Directive (EU) 2019/882 on the accessibility requirements for products and services (European Accessibility Act)

Guides associés