Contraste couleurs : test WCAG du texte et du fond

Seuils à interpréter correctement#

Le grand texte correspond à au moins 18 points (24 pixels CSS) en graisse normale, ou 14 points (environ 18,67 pixels CSS) en gras. Le ratio affiché est arrondi ; le verdict utilise la valeur complète. Critère W3C 1.4.3.

Calcul reproductible#

Chaque canal sRGB est ramené entre 0 et 1, puis linéarisé : c/12,92 si c ≤ 0,04045, sinon ((c + 0,055)/1,055)^2,4. La luminance relative vaut 0,2126 R + 0,7152 V + 0,0722 B. Le ratio est (luminance claire + 0,05) / (luminance sombre + 0,05). Formule de référence.

Limites du test#

• Les dégradés et les photos doivent être contrôlés dans leurs zones les moins contrastées.
• La transparence doit d’abord être composée avec le fond réel.
• La couleur seule ne doit pas porter une information : ajoutez un texte, une forme ou une icône.
• Le contraste d’un texte ne valide pas à lui seul les composants, le clavier ou les lecteurs d’écran.

Comment la correction proposée est calculée#

Si le texte échoue au seuil de 4,5:1, nous testons sa luminosité HSL par pas de 0,1 point, sans changer le fond. La proposition conserve la teinte et la saturation HSL avant l’arrondi sRGB et retient le plus petit déplacement de luminosité parmi les candidats qui réussissent. Le ratio est recalculé après arrondi. C’est une suggestion de travail, pas une recherche du changement perceptuel minimal.

Pourquoi un ratio affiché à 4,50 peut-il échouer ?#

Le résultat affiché est arrondi à deux décimales, mais le verdict compare la valeur complète au seuil. Par exemple, 4,499 est inférieur à 4,5 et échoue pour du texte courant au niveau AA. Choisissez une marge au-dessus du seuil plutôt que de vous fier à l’arrondi. Le W3C précise cette règle de comparaison.

Texte noir ou blanc : ce que montrent nos 71 échantillons#

Sur les 71 codes distincts du répertoire, 51 acceptent un texte noir et 21 un texte blanc au seuil de 4,5:1. Un seul accepte les deux : #D9381E. Les noms et alias partageant un code ne sont comptés qu’une fois.

Pour #D9381E, le contraste vaut 4.53:1 avec le noir et 4.63:1 avec le blanc. Ce cas montre pourquoi il faut calculer le couple exact avant de décider.

Ces résultats décrivent notre sélection de codes ; ils ne signifient pas que le noir convient à la même proportion de toutes les couleurs possibles. Une image, un dégradé ou de la transparence doit être testé sur le fond réellement affiché.

Méthode : dédupliquer les HEX, calculer la luminance sRGB, puis appliquer (L claire + 0,05) / (L sombre + 0,05). Le verdict utilise la valeur non arrondie. W3C — WCAG 2.2 : contraste minimal.

Synthèse CSV · Synthèse JSON · Voir les valeurs par couleur.

Texte noir ou blanc sur 16 777 216 fonds sRGB#

Sur les 16 777 216 fonds sRGB opaques possibles à 8 bits par canal, 292 107 atteignent le seuil de contraste AA de 4,5:1 avec du texte noir et avec du texte blanc. Cela représente 1,74 % des codes. Pour tous les autres, un seul des deux textes franchit ce seuil.

Pour reproduire le calcul, linéarisez les trois canaux de chaque code, puis calculez sa luminance relative L. Le rapport avec le noir vaut (L + 0,05) / 0,05. Avec le blanc, il vaut 1,05 / (L + 0,05). Comptez séparément les fonds qui franchissent chaque seuil avant tout arrondi. Définition du contraste par le W3C.

Le décompte donne le même poids à chaque code. Il ne mesure ni la fréquence des couleurs utilisées sur le Web, ni la lisibilité d’une photographie, d’un dégradé ou d’une peinture. Pour un fond concret, entrez son code dans le testeur en haut de page.

Rédaction Cercle Chromatique, 4 novembre 2026. Télécharger les résultats (JSON) · Reproduire le calcul (Python, sans dépendance).

Sur quel fond gris le texte noir et le texte blanc conviennent-ils tous les deux ?#

Parmi les 256 gris neutres sRGB opaques à 8 bits, seuls #757575 et #767676 atteignent 4,5:1 avec les deux encres pures. Sur le gris immédiatement plus sombre, le noir échoue. Sur le gris immédiatement plus clair, c’est le blanc.

Chaque gris a trois canaux égaux : 117, 117, 117 pour le premier qui accepte les deux encres. Pour vérifier un autre gris, ouvrez le tableau des 256 gris (CSV). Cette série est un sous-ensemble du recensement de tous les fonds sRGB. La méthode suivie est celle du contraste minimal du W3C.

Texte noir ou blanc : tableau par couleur#

Pour chaque fond du répertoire, comparez les deux ratios. « AA » indique uniquement que ce couple opaque atteint 4,5:1 pour du texte courant ; ce n’est pas une certification de la page. Les noms désignent les codes affichés, pas toutes les nuances portant ce nom.

Télécharger les valeurs en CSV · JSON

Méthode : linéariser les canaux sRGB, calculer la luminance relative, puis appliquer (L claire + 0,05) / (L sombre + 0,05). Formule W3C ; seuils et exceptions. Les exports arrondissent les ratios à six décimales ; les verdicts utilisent la précision complète. Réutilisation : conditions pédagogiques et attribution.

Sources et méthode

1. W3C — WCAG 2.2 : contraste minimal
   Seuils de contraste des textes, tailles et exceptions.
2. W3C — WCAG 2.2 : luminance relative
   Formule de luminance sRGB utilisée pour nos calculs.
3. W3C — CSS Color : codes sRGB, noms CSS et HSL
   Les valeurs numériques et mots-clés CSS ; pas une normalisation des noms français.

Les palettes et exemples de ce site sont des propositions éditoriales. Les conversions et contrastes sont calculés à partir des codes indiqués. Voir la méthode et signaler une correction.