Handling #Text Over #Images in #CSS - Ahmad Shadeed
▻http://ishadeed.com/article/handling-text-over-image-css
You might come across a UI component that has text above an image. In some cases, the text will be hard to read depending on the image being used. There are some different solutions like adding a #gradient overlay, or a tinted background image, text-shadow, and others.
Ça c’est le truc le plus fun dans mon boulot : tu peux être certain que quand le graphiste propose les maquettes au client où il y a du texte sur des images, il va à tous les coups choisir la plus belle image possible, avec de très beaux aplats de couleur (la mer bleue jusqu’à l’horizon, un grand champ de blé bien flou au premier plan…) sur lesquels il prendra bien soin d’installer son texte. Oh c’est beau. Et la première image que le client mettra en ligne sera évidemment une photo super-moche, avec des micro-contrastes épouvantables partout, et parfois même (oh joie) déjà du texte dans l’image elle-même. Évidemment le texte devient illisible, et c’est à toi de trouver fissa une solution magique.
L’autre caractéristique du texte sur une image, c’et que c’est souvent dans des blocs de dimensions fixes. Et là encore, le graphiste va soumettre des maquettes où les titre sont « Lorem ipsum », ou « Ici le titre ». Et le premier article que le client va publier sera titré « En réponse à la question posée par un interlocuteur à propos de la posture de notre entreprise quant au truc au nom duquel qu’on se positionne ». Et forcément, ça tient pas (mais le client veut désormais que ça tienne sans avoir à raccourcir son titre, tu penses bien).
(Et je pourrais ajouter que, même dans les exemples illustrés de l’article ci-dessus, on n’échappe généralement pas à des problèmes de lisibilité et d’accessibilité avec ces différentes solutions. C’est assez chiant, mais si on fait dans le subtile et joli comme ci-dessus, on sera toujours très très limite sur le contraste et la lisibilité, et donc l’accessibilité.)
C’est pour ça qu’on demande toujours un droit de regard sur les maquettes graphiques, pour faire des commentaires ergo/accessibilité :)