Dans cet article
Pour vérifier le contraste d’un texte sur une image générée, mesurez le fond situé directement sous les lettres dans chaque mise en page. Commencez par le recadrage le plus étroit, où le titre peut revenir à la ligne ou tomber sur une zone claire. Gardez le texte modifiable. Déplacez-le, assombrissez le fond localement ou ajoutez un aplat. Recommencez avec la police et le texte réels.
Fixer un objectif de contraste
Pour le web, l’explication du W3C sur le niveau AA des WCAG 2.2 indique un rapport minimal de 4.5:1 pour le texte courant et de 3:1 pour le texte répondant à la définition de texte de grande taille. Un style de titre ne suffit pas. Vérifiez la taille et la graisse affichées. Une petite mention sous le titre peut encore demander 4.5:1. Considérez ces valeurs comme un minimum. Un peu de marge peut faciliter la lecture au premier coup d’œil.
Mesurer le fond directement sous les lettres
Imaginez une bannière pour un atelier de céramique, avec un vase clair à droite et un mur bleu sombre à gauche. Sur ordinateur, le titre blanc reste sur le bleu. Sur mobile, dans un cadrage moins haut, la photo se décale et la dernière ligne traverse une tache beige éclairée. La moyenne de l’image ne repère pas cette tache. Dans l’aperçu à la taille prévue, masquez le texte en conservant l’image et tout voile d’assombrissement. Prélevez des couleurs sous les mots, surtout dans les zones les plus claires sous des lettres blanches. Pour le calcul, prenez la couleur prévue du texte plutôt qu’un pixel lissé au bord d’une lettre.
Comparer la meilleure zone à la moins lisible
Avec des couleurs d’exemple, le blanc sur le bleu foncé #253343 donne environ 12.86:1, et le blanc sur le beige #B9A78E environ 2.34:1. Ces valeurs ne sont pas prélevées sur l’illustration. Le bleu dépasse le seuil du texte courant. Le beige reste sous les deux seuils. Lisez toute la ligne à sa taille finale et cherchez le rapport le plus faible sous les lettres. Si le fond est texturé ou irrégulier, prélevez plusieurs points.