Astuce : text-shadow pour du texte plus lisible

Bonsoir,

Idée d’un nommé Bert Bos : il utilise la propriété text-shadow pour rendre lisible par exemple du texte en blanc sur un fond qui autrement ne serait pas assez sombre pour assurer un bon contraste. J’imagine qu’en dehors du CSS, l’astuce est connue des graphiste (je n’y avais jamais pensé).

Voir ici : CSS Tips & Tricks [Bert Bos]

Reste à savoir si cette astuce peut passer avec un validateur d’accessibilité (et puis il faut penser au support par le navigateur aussi en fait).

Image (copie d’écran de son site) :



Plus bas (dans le lien précédent), il utilise quatre ombrages simultanés, pour donner un effet de outline (contour) sur du texte.
Modifié par hibou57 (15 Jan 2011 - 22:43)

Bonjour Hibou,

hibou57 a écrit :

Reste à savoir si cette astuce peut passer avec un validateur d’accessibilité (et puis il faut penser au support par le navigateur aussi en fait).

Il faut espérer. On en a déjà parlé ici : http://forum.alsacreations.com/topic.php?fid=6&tid=47754&s=text-shadow

Bonjour,

Pour ce qui est du validateur, ce n'est qu'un outil, il faut toujours un humain derrière pour interpréter et contrôler les résultats. Une évaluation de l'accessibilité d'un site ne doit pas reposer entièrement sur une programme.

Donc même si les validateurs n'acceptent pas, ça ne veux pas dire que ce ne soit pas accessible.
Modifié par Laurie-Anne (17 Jan 2011 - 08:42)

À mon sens les algo sont là, il est donc facile de récupérer les couleurs de police, de fond et de l'ombre et de faire tourner l'algo ; c'est plus simple qu'un algo détectant la présence d'une ombre.

Mais je ne m'étais peut-être pas bien exprimée.

Bonsoir,

Pour améliorer la lisibilité, j'utilise un réglage beaucoup plus léger :

text-shadow:0 1px 0 #333;

Cela marche très bien sur du texte moyen (~10-14px).
Il reste à choisir la bonne luminosité de couleur pour rester subtil.

Vous pouvez voir un exemple d'utilisation de cette propriété ici : http://disqus.com

oui, enfin, pas sous IE même v9 afaik.

Et les filter IE sont bien pourris et ne peuvent pas donner la même chose que les text-shadow css3

je crois que pour IE, ça marche pas

Avec le futur IE10 déjà en test et qui supporte text-shadow, mieux vaut préciser "pour IE 9 et avant".

En même temps IE10 est prévu pour dans un an