Contraste du texte sur les images

Silktide repère le texte placé directement sur une image ou un dégradé, lorsque le contraste entre le texte et son arrière-plan ne peut pas être mesuré automatiquement. Ces cas nécessitent une vérification humaine pour confirmer que le texte est lisible.

Pourquoi c'est important

Les bannières « hero » et les arrière-plans photographiques sont parmi les endroits où le contraste échoue le plus souvent en pratique. Une photo comporte des zones claires et sombres, si bien qu’un texte lisible sur une partie de l’image peut disparaître sur une autre — et l’image peut se déplacer derrière le texte lorsque la taille de l’écran change. Les personnes malvoyantes sont les plus touchées, mais un texte sur une photo chargée fatigue tout le monde.

Les mêmes minimums légaux s’appliquent que pour le texte ordinaire : les de exigent un d’au moins 4,5:1 pour le texte normal et de 3:1 pour le texte de grande taille (au moins 18 points, ou 14 points en gras), mesuré par rapport à la zone de l’image derrière le texte.

Comment corriger

Vérifiez visuellement chaque élément signalé. Le texte doit respecter le rapport requis par rapport à chaque partie de l’image sur laquelle il peut se superposer, y compris aux autres tailles d’écran où l’image peut se repositionner.
Lorsque le contraste est douteux, ajoutez une superposition unie ou semi-transparente entre l’image et le texte, ou déplacez le texte hors de l’image.
Choisir des images plus calmes et plus uniformes derrière le texte peut aussi fonctionner, mais souvenez-vous que l’image peut être remplacée ultérieurement par des éditeurs de contenu — une superposition est plus sûre.
Si le texte est clairement lisible, le constat.

Comment Silktide teste ceci

Examine chaque élément de texte visible sur la page, en ignorant le texte masqué, le texte à l’intérieur des graphiques SVG, et tout élément que vous avez exclu de la vérification.
Identifie le texte dont l’arrière-plan est une image ou un dégradé plutôt qu’une couleur unie. Le texte sur des couleurs unies est mesuré automatiquement par Contraste du texte.
Ignore les arrière-plans qui ne peuvent pas affecter le texte, comme des images d’arrière-plan de taille nulle et les petites images d’arrière-plan non couvrantes sur les éléments de liste (généralement des puces personnalisées).
Signale le texte restant pour que vous le confirmiez, en indiquant la couleur du texte et les couches d’arrière-plan concernées. Comme une image n’a pas une couleur unique, le rapport ne peut pas être calculé automatiquement.

Dépannage

Le contrôle signale un texte clairement lisible

C’est attendu — ce contrôle ne peut pas mesurer le contraste sur une image, il préfère donc vous montrer chaque cas. Passez-les en revue et approuvez ceux qui sont corrects ; ils resteront approuvés lors des analyses ultérieures.

L’image semble correcte sur mon écran

Vérifiez aussi aux largeurs d’écran plus petites et plus grandes. Les mises en page responsives déplacent le texte par rapport à l’image ; un texte qui se trouve sur une zone sombre sur ordinateur peut se retrouver sur une zone claire sur mobile.