Cosa è meglio per lo sfondo di un sito web, nero o bianco?

Dipende dal contesto e dal contenuto. Ci sono due opzioni principali qui, quindi cerchiamo di capire il contesto e il contenuto appropriato per ciascuno.

Testo scuro su sfondo chiaro

Contenuto che è più lungo in natura ed è meglio se conservato come un blocco di informazioni piuttosto che pezzi singoli.

Esempi

• Libro
• Articolo di notizie
• Post di Quora

Il mezzo è tipicamente carta e in un ambiente illuminato. Un supporto retroilluminato non è l'ideale, poiché lo sfondo bianco può renderlo più duro per gli occhi, a meno che l'ambiente sia più luminoso dei lumi dello sfondo bianco.

Testo chiaro su sfondo scuro

Il nostro cervello lo memorizza come un simbolo. Questo può poi essere referenziato in seguito per il riconoscimento. Se c'è molto testo su uno sfondo scuro puoi provare a leggerlo tu stesso e notare che il tuo cervello sta lottando per interpretarlo non come un simbolo ma come un contenuto da capire e memorizzare più di quanto farebbe con un testo scuro su uno sfondo chiaro.

Esempi

• Loghi
• Biglietti
• Titoli
• Media (film/foto/ecc.)

Ci sono momenti in cui la luce su sfondo scuro funziona ma richiede anche un ambiente scuro perché il nostro cervello cambi tecnica. Noterai che il tuo GPS cambia il contrasto quando fuori è buio. Questo perché il nostro cervello fa la stessa cosa. La maggior parte dei siti di condivisione di foto o qualsiasi sito web che è ricco di contenuti multimediali in genere sceglie un tema scuro. Netflix è un primo esempio di questo, dato che tipicamente guardiamo quel sito in una stanza buia.

Per quanto riguarda il tema di un sito web...

La risposta frustrante qui è che dipende.

Qual è l'obiettivo del tuo sito web? Does it align with the strategy of dark on light or light on dark? If you're feeling extra ambitious you can add in a media query for ambient light as well as the Digg reader did here:

1. @media (luminosity: normal) { 
2. body { 
3. background: #f5f5f5; 
4. color: #262626; 
5. } 
6. } 
7. @media (luminosity: dim) { 
8. body { 
9. background: #e9e4e3; 
10. } 
11. } 
12. @media (luminosity: washed) { 
13. body { 
14. background: #ffffff; 
15. } 
16. }