Design

Contraste WCAG

Vérifiez le ratio de contraste entre deux couleurs selon WCAG 2.1. Résultats AA et AAA en temps réel.

Aperçu du texte normal (16px)

Ceci est un exemple de texte en taille normale. La lisibilité dépend directement du contraste entre la couleur du texte et celle du fond.

Grand texte (24px+)

17.06:1
Ratio de contraste
Niveau AA WCAG 2.1
Texte normal (≥ 4.5:1) Réussi
Grand texte (≥ 3:1) Réussi
Niveau AAA WCAG 2.1
Texte normal (≥ 7:1) Réussi
Grand texte (≥ 4.5:1) Réussi

Besoin de convertir vos couleurs ?

Passez de HEX à RGB, HSL et explorez les harmonies de couleurs.

Convertisseur couleurs

Questions fréquentes

Qu'est-ce que le ratio de contraste WCAG ?

Le ratio de contraste WCAG mesure la différence de luminosité entre deux couleurs. Il est calculé selon 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 sombre.

Le ratio va de 1:1 (aucun contraste, couleurs identiques) à 21:1 (noir sur blanc, contraste maximal).

Quelle est la différence entre AA et AAA ?

Le niveau AA est le niveau minimum recommandé pour la plupart des sites web : ratio ≥ 4.5:1 pour le texte normal et ≥ 3:1 pour le grand texte (≥ 18pt ou 14pt en gras).

Le niveau AAA est le plus strict : ratio ≥ 7:1 pour le texte normal et ≥ 4.5:1 pour le grand texte. Le niveau AAA est conseillé pour les sites à forte accessibilité (administrations, santé, éducation).

Qu'est-ce que la luminance relative ?

La luminance relative est une mesure de la clarté perçue d'une couleur, indépendante de la teinte. Elle est calculée à partir des composantes R, G, B après linéarisation sRGB : L = 0.2126×R + 0.7152×G + 0.0722×B.

Les coefficients reflètent la sensibilité de l'œil humain : nous percevons le vert comme bien plus lumineux que le bleu. La noir pur a une luminance de 0, le blanc pur de 1.

Mon site doit-il obligatoirement respecter WCAG ?

En France, les sites des services publics sont soumis au RGAA (Référentiel Général d'Amélioration de l'Accessibilité) qui est basé sur WCAG 2.1 niveau AA.

Pour les sites privés, ce n'est pas légalement obligatoire pour la plupart, mais fortement recommandé. Un bon contraste améliore la lisibilité pour tous les utilisateurs, en particulier les personnes malvoyantes, daltoniennes, ou utilisant un écran en plein soleil.

Qu'est-ce que le grand texte selon WCAG ?

Selon WCAG 2.1, le grand texte correspond à du texte d'au moins 18pt (24px) en style normal, ou 14pt (environ 18.67px) en gras. Le grand texte bénéficie de critères de ratio de contraste moins stricts car il est plus facile à lire même avec un contraste plus faible.

Les logotypes et textes décoratifs sont exemptés des exigences de contraste.

Vérificateur de contraste WCAG : tester l'accessibilité de vos couleurs

Pourquoi le contraste des couleurs est essentiel en accessibilité web

Le contraste des couleurs est l'un des piliers de l'accessibilité numérique. Selon l'Organisation mondiale de la Santé, plus de 2,2 milliards de personnes dans le monde souffrent d'une déficience visuelle. Un texte insuffisamment contrasté devient illisible pour les personnes malvoyantes, daltoniennes ou simplement pour toute personne consultant un écran en plein soleil.

Les Web Content Accessibility Guidelines (WCAG), publiées par le W3C, définissent des seuils de contraste minimaux pour garantir la lisibilité. Respecter ces seuils n'est pas seulement une question d'éthique : en France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) impose le respect de WCAG 2.1 niveau AA pour tous les sites de services publics.

Comment fonctionne le ratio de contraste WCAG

Le ratio de contraste se calcule à partir de la luminance relative de deux couleurs. La formule compare la luminosité perçue du texte et du fond, en tenant compte de la sensibilité de l'oeil humain aux différentes longueurs d'onde (le vert parait plus lumineux que le bleu à intensité égale).

Ratio = (L1 + 0,05) / (L2 + 0,05) avec L = 0,2126 x R + 0,7152 x G + 0,0722 x B (luminance relative sRGB)

Le ratio obtenu va de 1:1 (aucun contraste, couleurs identiques) à 21:1 (noir pur sur blanc pur). Plus le ratio est élevé, meilleure est la lisibilité.

Les niveaux WCAG : AA et AAA

Les WCAG définissent deux niveaux de conformité pour le contraste. Le niveau AA est le minimum recommandé pour la majorité des sites web, tandis que le niveau AAA est conseillé pour les contextes à forte exigence d'accessibilité (santé, éducation, administration).

Seuils de contraste WCAG 2.1

AA normal
Ratio minimum 4.5:1
AA grand
Ratio minimum 3:1
AAA normal
Ratio minimum 7:1
AAA grand
Ratio minimum 4.5:1
Maximum
Noir sur blanc : 21:1

Source : W3C, WCAG 2.1 Success Criterion 1.4.3 et 1.4.6

Le "grand texte" selon WCAG correspond à du texte d'au moins 18pt (24px) en style normal ou 14pt (environ 18,67px) en gras. Le grand texte bénéficie de seuils plus souples car il est naturellement plus facile à lire.

4.5:1

Ratio de contraste minimum requis pour le texte normal (WCAG 2.1 niveau AA)

Exemple concret : tester un design bleu sur gris

Imaginons que vous conceviez une interface avec du texte #3B82F6 (bleu) sur un fond #F3F4F6 (gris clair). Voici comment évaluer le contraste étape par étape :

1

Convertir en RGB

sRGB

Texte : R=59, G=130, B=246. Fond : R=243, G=244, B=246.

2

Linéariser les canaux

Gamma

Appliquer la courbe gamma sRGB pour chaque composante.

3

Calculer la luminance

L

Texte : L = 0,214. Fond : L = 0,905.

4

Obtenir le ratio

3.62:1

(0,905 + 0,05) / (0,214 + 0,05) = 3,62:1

Résultat : 3,62:1 passe le niveau AA pour le grand texte (seuil 3:1), mais échoue pour le texte normal (seuil 4,5:1). Il faudrait assombrir le bleu vers #2563EB pour atteindre un ratio suffisant.

Daltonisme et accessibilité : au-delà du contraste

Environ 8 % des hommes et 0,5 % des femmes présentent une forme de daltonisme. Le type le plus courant, la deutéranopie, rend difficile la distinction entre le rouge et le vert. Un bon ratio de contraste aide, mais ne suffit pas : il est recommandé de ne jamais transmettre une information uniquement par la couleur (par exemple, ajouter une icône aux messages d'erreur en plus du rouge).

Contraste seul

4.8:1

Rouge sur blanc (AA normal)

Contraste + icône

4.8:1 + signal visuel

Accessible y compris daltoniens

Attention au daltonisme

Un ratio de contraste suffisant ne garantit pas l'accessibilité pour les personnes daltoniennes. Combinez toujours le contraste avec des indices visuels supplémentaires : icônes, textures, soulignement des liens.

Erreurs fréquentes à éviter

  • Tester uniquement en mode clair : vérifiez aussi le contraste en mode sombre. Un texte lisible sur fond blanc peut devenir illisible sur fond noir.
  • Ignorer les états interactifs : les couleurs au survol, au focus et en état désactivé doivent aussi respecter les seuils WCAG.
  • Confondre contraste et esthétique : un gris clair sur blanc parait élégant, mais un ratio de 2:1 exclut une partie de vos utilisateurs.
  • Oublier le texte sur image : si votre texte se superpose à une photo, le contraste varie selon la zone. Utilisez un overlay semi-transparent.
  • Se limiter au texte : depuis WCAG 2.1, les composants d'interface (icônes, bordures de champs) doivent aussi respecter un ratio minimum de 3:1.

Sources et références

Design & Créatif

Calculateur Échelle Typographique
Calculateur Ratio d'Image
Générateur Border Radius CSS
Convertisseur Em vers Px
Guide Tailles Images Réseaux Sociaux
Générateur Box Shadow CSS

Sources : W3C, WCAG 2.1 (Success Criterion 1.4.3 et 1.4.6) · IEC 61966-2-1 (spécification sRGB) · MDN Web Docs · web.dev · Dernière mise à jour : avril 2026.