risposta-alla-domanda-sullo-sviluppo-web-bd.com

Text Shadow può migliorare la leggibilità?

Le ombre dei caratteri CSS sono spesso utilizzate per far risaltare il testo (o in, o colorato, o molte altre cose fantasiose). Mi chiedo se possa essere usato per aiutare la leggibilità.

So che trovare la giusta quantità di contrasto può aiutare molto nella leggibilità dello schermo digitale. Le ombre dei caratteri circondano sempre il testo, quindi potrebbero essere utilizzate per controllare il contrasto, sia la luminosità che il colore. riferimento: C'è un problema con l'uso del testo nero su sfondi bianchi?

20
Gn13l

In alcune situazioni è possibile utilizzare un'ombra esterna o un tratto per massimizzare l'accessibilità e mantenere il rapporto di contrasto tra testo e sfondo. Ho usato questo metodo una o due volte quando ho affrontato le rigide linee guida del marchio che richiedevano combinazioni di colori non conformi. È menzionato come una tecnica per soddisfare il criterio SC 1.4.3 (Contrast) di WCAG :

... se una lettera è più chiara nella parte superiore di quella nella parte inferiore, potrebbe essere difficile mantenere il rapporto di contrasto tra la lettera e lo sfondo sull'intera lettera. In questo caso, il designer potrebbe scurire lo sfondo dietro la lettera o aggiungere un sottile contorno nero (largo almeno un pixel) attorno alla lettera in ordine per mantenere il rapporto di contrasto tra la lettera e lo sfondo sopra 4,5: 1.

13
Matt Obee

A parte la risposta fornita, vorrei menzionare un caso d'uso molto importante in cui la soluzione è nulla MA ombre.

Testo su un'immagine

Quando non si ha il controllo sull'immagine sopra la quale si sta scrivendo il testo, è necessario garantire un contrasto adeguato per una migliore leggibilità. Una grande immagine di eroe sembra essere di gran moda in questi giorni. Un'ombra scura viene aggiunta dietro il testo bianco e un'ombra chiara dietro il testo nero.

Il vecchio sito Web Nexus ha fatto un uso pesante del fatto, perché la versione di Roboto che sembra incredibile sulle foto è quella Ultra Sottile. È un testo di colore bianco con un'ombra scura in modo da dare contrasto sulla parte superiore di un'immagine senza sacrificare il peso del carattere o aggiungere una sovrapposizione. Abbiamo usato questo fatto sul nostro sito web .

enter image description here

[~ # ~] edit [~ # ~] Dopo che OP ha pubblicato il commento, un caso d'uso con ombre sopra uno sfondo solido può essere dove non controlliamo lo sfondo (diciamo che proviene da un CMS). Se abbiamo un testo bianco, possiamo usare un'ombra nera e il testo sarà visibile su sfondi neri e in qualche modo anche su sfondi bianchi.

17
Gaurav Ramanan

Per me, la risposta è sì, soprattutto per i siti a tema scuro .

Ecco alcune immagini di un sito che ho progettato per l'azienda di coperture di mio fratello. Voleva un tema tutto oscuro. Quindi gli ho dato uno sfondo grigio scuro, alcuni testi in bianco e grigio, tutti con ombre CSS3 più scure.

(Piccolo avvertimento: le immagini in realtà sono risultate più scure rispetto al sito in realtà quando ho preso le schermate)

Prima di tutto, Home page:

Sfondo grigio scuro.
Grandi caratteri di testo in grigio, bianco e rosso.
Ombre più scure dello sfondo.

Home Page

In secondo luogo, la pagina dei servizi:

Sfondo grigio scuro.
Caratteri di testo piccoli grigi e bianchi.
Ombre più scure dello sfondo.

Services

Infine, la pagina di destinazione dei prodotti:

Sfondo grigio scuro.
X-Large loghi misti chiari e grigio scuro.
Ombre più scure dello sfondo.

Products

Penso che puoi vederlo senza le ombre, non solo sarebbe più difficile da leggere, ma non farebbe altrettanto scoppiare.

11
Code Maverick

Può, aumentando il contrasto tra il testo e lo sfondo, che è il suo scopo principale.

jsFiddle screen shot

jsFiddle per la demo reale ...

4

Le ombre di testo possono far apparire il testo ma non renderlo più leggibile.

Concedo che l'aggiunta di ombre di testo attorno al testo bianco su uno sfondo bianco renderà il testo più leggibile poiché tutto è più leggibile che invisibile. Non sono d'accordo, tuttavia, che l'uso delle ombre di testo attorno al testo nero su uno sfondo bianco sia più leggibile del semplice testo nero su uno sfondo bianco.

Il contrasto corretto è la chiave per il testo leggibile

Se vuoi che il testo si distingua perché è speciale, l'aggiunta di ombre di testo può farlo. Se stai solo cercando di avere il massimo testo leggibile, tuttavia, allora contrasto elevato senza ombre di testo è il modo andare. Ad esempio, alcune versioni di testo nero su sfondo bianco .

Se sai che l'ambiente sarà una sala server oscura o qualcosa del genere, il ragazzo della sala server ti ringrazierà per aver utilizzato una versione di testo chiaro su uno sfondo scuro .

2
DaveAlger