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 un œil humain pour confirmer que le texte est lisible.

Pourquoi c’est important

Les bannières hero et les arrière-plans photo sont parmi les endroits les plus fréquents où le contraste échoue en pratique. Une photo comporte des zones claires et foncées, donc 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 selon la taille d’écran. Les personnes ayant une basse vision sont les plus touchées, mais du texte par‑dessus une photo chargée fatigue tout le monde.

Les mêmes minimums légaux s’appliquent que pour le texte ordinaire : exige un d’au moins 4,5:1 pour le texte courant et 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 trouver, 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 en dehors de l’image.
Opter pour des images plus sobres et uniformes derrière le texte peut aussi fonctionner, mais n’oubliez pas que l’image peut être remplacée plus tard par des éditeurs de contenu — une superposition est plus sûre.
Si le texte est clairement lisible, le constat.

Comment Silktide teste cela

Examine chaque morceau 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 des vérifications.
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 à la place.
Ignore les arrière-plans qui ne peuvent pas affecter le texte, comme des images d’arrière-plan de taille nulle et de petites images d’arrière-plan non couvrantes sur des éléments de liste (généralement des icônes de puces personnalisées).
Signale le texte restant pour que vous le confirmiez, en affichant la couleur du texte et les calques d’arrière-plan en cause. Comme une image n’a pas de couleur unique, le rapport lui-même ne peut pas être calculé automatiquement.

Dépannage

La vérification signale du texte pourtant clairement lisible

C’est attendu — cette vérification ne peut pas mesurer le contraste sur image, donc elle privilégie de vous montrer chaque cas. Passez en revue et approuvez ceux qui sont corrects; ils resteront approuvés lors des analyses futures.

L’image semble correcte sur mon écran

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