Calculateur de contraste
Vérifiez le rapport de contraste WCAG entre une couleur de texte et une couleur d’arrière-plan, consultez les niveaux d’accessibilité conformes et découvrez des couleurs suggérées qui respectent le seuil.
Mis à jour
Résultat du rapport de contraste
Rapport de contraste
-
Saisissez deux couleurs.
Exemple de texte grand format
Exemple de texte courant, le plus souvent concerné par les problèmes de contraste.
- AA, texte courant (4.5:1)
- -
- AA, texte grand format (3:1)
- -
- AAA, texte courant (7:1)
- -
- AAA, texte grand format (4.5:1)
- -
Couleurs de texte suggérées conformes au niveau AA
Les couleurs ci-dessous atteignent au moins 4.5:1 sur votre arrière-plan. Sélectionnez-en une pour l’essayer comme couleur de texte.
Fonctionnement
Le rapport de contraste est la différence de luminance entre une couleur de premier plan et une couleur d’arrière-plan. Selon les directives WCAG, il se calcule en divisant (L1 + 0.05) par (L2 + 0.05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la couleur la plus sombre. Le niveau AA des WCAG exige un rapport de 4.5:1 pour le texte courant et de 3:1 pour le texte grand format.
- Saisir ou choisir deux couleurs
Saisissez une valeur hexadécimale ou utilisez les sélecteurs de couleur.
- Lire le rapport et les niveaux
Chaque niveau WCAG indique si le rapport est conforme ou non.
- Essayer une couleur suggérée
Choisissez une nuance ci-dessous pour atteindre immédiatement le niveau AA avec votre arrière-plan actuel.
La formule de contraste WCAG
rapport = (L1 + 0.05) ÷ (L2 + 0.05)
La luminance relative L est calculée à partir du sRGB linéarisé : chaque canal est converti de sa valeur gamma corrigée de 0-255 en lumière linéaire à l’aide de la fonction de transfert sRGB, puis pondéré selon 0.2126R + 0.7152G + 0.0722B pour correspondre à l’efficacité lumineuse de l’œil humain. Le rapport maximal possible est de 21:1, avec du noir pur sur du blanc pur.
À quoi s’applique la règle de 4.5:1
Le rapport de 4.5:1 des WCAG s’applique spécifiquement au texte et aux images de texte. Les images décoratives, les logotypes et les icônes purement visuelles sans équivalent textuel en sont exemptés. Les composants d’interface non textuels, comme les boutons, les bordures des champs de formulaire et les indicateurs de focus, doivent seulement atteindre 3:1 selon WCAG 1.4.11. Ce seuil est plus bas, car les traits fins des caractères nécessitent davantage de contraste pour rester lisibles qu’une forme simple.
Les thèmes sombres peuvent échouer même s’ils semblent lisibles
L’algorithme WCAG utilise la luminance sRGB linéarisée, qui n’est pas linéaire par rapport à la luminosité perçue. Les thèmes sombres associent souvent du texte gris moyen à un arrière-plan presque noir ; le rapport peut alors être inférieur à 4.5:1 même si le texte semble lisible. Par exemple, #999999 sur #1A1A24 donne environ 3.6:1 et échoue au niveau AA. Éclaircir le texte jusqu’à environ #ABABAB ou davantage permet d’atteindre le seuil.
Foire aux questions
Quel rapport de contraste les WCAG AA exigent-elles pour le texte courant ?
Le niveau AA de WCAG 2.1 exige un rapport de contraste minimal de 4.5:1 pour le texte de graisse normale de moins de 18px ou le texte gras de moins de 14px, et de 3:1 pour le texte grand format (18px et plus en graisse normale, ou 14px et plus en gras). Le niveau AAA exige 7:1 pour le texte courant et 4.5:1 pour le texte grand format. Le rapport maximal possible est de 21:1, avec du noir pur (#000000) sur du blanc pur (#FFFFFF).
Comment le rapport de contraste WCAG est-il calculé ?
La formule consiste à diviser (L1 + 0.05) par (L2 + 0.05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre. La luminance relative est calculée à partir des valeurs sRGB linéarisées : chaque canal est converti de sa valeur gamma corrigée de 0-255 en lumière linéaire à l’aide de la fonction de transfert sRGB, puis pondéré selon 0.2126R + 0.7152G + 0.0722B pour correspondre à l’efficacité lumineuse de l’œil humain.
Un rapport de contraste de 4.5:1 est-il requis pour tous les éléments d’interface ?
Non. Le rapport de 4.5:1 des WCAG s’applique spécifiquement au texte et aux images de texte. Les images décoratives, les logotypes et les icônes purement visuelles sans équivalent textuel en sont exemptés. Les composants d’interface non textuels (boutons, champs de formulaire, indicateurs de focus) doivent seulement atteindre un contraste de 3:1 selon WCAG 1.4.11. Le seuil plus strict de 4.5:1 existe parce que la lisibilité du texte dépend de traits fins.
Pourquoi mon design en mode sombre échoue-t-il aux WCAG alors qu’il semble lisible ?
L’algorithme WCAG utilise la luminance sRGB linéarisée, qui n’est pas linéaire par rapport à la luminosité perçue. Les thèmes sombres associent souvent du texte gris moyen à un arrière-plan presque noir : le contraste perçu semble suffisant, mais le rapport de luminance passe sous 4.5:1. Par exemple, #999999 sur #1A1A24 donne environ 3.6:1 et échoue au niveau AA. Éclaircir le texte jusqu’à environ #ABABAB ou davantage sur le même arrière-plan permet d’atteindre le seuil.
Les exigences de contraste des couleurs s’appliquent-elles au texte indicatif des champs de formulaire ?
Oui. Selon WCAG 1.4.3, le texte indicatif qui transmet une information utile doit respecter le rapport de 4.5:1. De nombreux designs utilisent un texte indicatif à faible opacité, par exemple un gris à 40 %, qui ne respecte pas ce seuil. Le critère de succès 1.4.3 n’exempte pas systématiquement le texte indicatif ; l’exception concerne uniquement les composants d’interface inactifs ou la décoration pure, et non les textes d’aide.