Maurizio Carnago ha ricondiviso questo.
Torno con le mie mirabolanti domande di #mastoaiuto sul tema #informatica e #WebDesign. L'argomento di oggi è il tema scuro nei siti e nell'interfaccia del computer/cellulare. O come lo chiamano in modo tutto figo #DarkMode.
Io mi sento più rilassato quando lavoro con il tema scuro su progetti grafici o scrittura. Mi aiuta a concentrarmi meglio su quello che sto facendo. Ma quando si tratta di #accessibilità mi viene un dubbio enorme: se faccio un sito con tema scuro, accontento tutti i lettori?
Io ho sempre fatto attenzione a non usare mai lo sfondo totalmente nero #000 con testi totalmente bianchi #fff perché anche solo pensarlo mi si bruciano le retine. Ho sempre fatto una mediazione di grigi o comunque colori complementari che abbiano lo stesso un elevato contrasto, ma più morbido. Ho già chiesto ad alcune persone con difficoltà di lettura come si trovassero con i miei siti e hanno risposto che riescono a leggere senza affaticarsi. Ma l'esperienza di persone che si conta sulle dita di una mano non fa statistica.
Ora, questo approccio che a me piace è sempre stato venduto anche come ecologico perché inciderebbe meno sull'energia impiegata dal monitor, con gran gioia della bolletta, della batteria e dell'ambiente stesso. Ma è davvero così?
Leggo articoli online che si contraddicono, perciò mi piacerebbe sentire il parere da gente vera come voi. In realtà un tema chiaro incide poco o nulla sulle performance e quindi è meglio stare più leggeri per non mettere in difficolta i lettori online, oppure c'è un vero e tangibile risparmio energetico e quindi è buono l'impegno nel fare temi scuri ma il più possibile accessibili?
Io mi sento più rilassato quando lavoro con il tema scuro su progetti grafici o scrittura. Mi aiuta a concentrarmi meglio su quello che sto facendo. Ma quando si tratta di #accessibilità mi viene un dubbio enorme: se faccio un sito con tema scuro, accontento tutti i lettori?
Io ho sempre fatto attenzione a non usare mai lo sfondo totalmente nero #000 con testi totalmente bianchi #fff perché anche solo pensarlo mi si bruciano le retine. Ho sempre fatto una mediazione di grigi o comunque colori complementari che abbiano lo stesso un elevato contrasto, ma più morbido. Ho già chiesto ad alcune persone con difficoltà di lettura come si trovassero con i miei siti e hanno risposto che riescono a leggere senza affaticarsi. Ma l'esperienza di persone che si conta sulle dita di una mano non fa statistica.
Ora, questo approccio che a me piace è sempre stato venduto anche come ecologico perché inciderebbe meno sull'energia impiegata dal monitor, con gran gioia della bolletta, della batteria e dell'ambiente stesso. Ma è davvero così?
Leggo articoli online che si contraddicono, perciò mi piacerebbe sentire il parere da gente vera come voi. In realtà un tema chiaro incide poco o nulla sulle performance e quindi è meglio stare più leggeri per non mettere in difficolta i lettori online, oppure c'è un vero e tangibile risparmio energetico e quindi è buono l'impegno nel fare temi scuri ma il più possibile accessibili?
Questa voce è stata modificata (1 anno fa)
Andrea reshared this.
Andrea
in reply to Maurizio Carnago • • •Partiamo dalla cosa più semplice:
A quanto so, non ci sono problemi di accessibilità riguardo i temi scuri.
Le persone che proprio non li sopportano possono usare le opzioni del browser per forzare il tema chiaro (almeno, quelli che lo hanno ossia i desktop - assicurati che sul tuo sito funzioni la modalità lettura di quelli mobile).
Io so che bisogna assicurarsi che il contrasto sia chiaro e accessibile: in questo senso: bianco su nero o nero su bianco sono uguali.
Qui trovi linee guida di accessibilità web in generale: https://developer.mozilla.org/en-US/docs/Web/Accessibility.
Quanto a risparmio energetico, gli sfondi scuri possono essere peggio:
Testo chiaro su sfondo scuro è più difficile da leggere, perché, nonostante il contrasto (quello effettivo) sia uguale, c'è meno luce che finisce nei tuoi occhi (indipendentemente dal tipo di superficie contenente il testo, che sia un display o un pezzo di carta), e si fa più fatica a distinguere le lettere. Chiamiamo la quantità di luce che finisce negli occhi "contrasto percepito".
Non solo questo:
Considerando che maggiore è il contrasto sia effettivo che percepito e meglio si legge, e il contrasto è maggiore quando la differenza tra zone chiare e scure è più accentuata...
A parità di illuminazione ambientale, e parlando di schermi che producono la propria luce che finisce negli occhi di chi legge, in ogni caso per leggere meglio (fino a un certo punto, ad esempio sei in una stanza buia, luminosità al massimo è insopportabile) si dovrebbe sempre alzare l'illuminazione dello schermo per avere buon contrasto percepito, ma:
- Su schermi OLED, dove i pixel neri sono spenti, il contrasto effettivo tra zone nere e bianche è sempre più alto di un LCD; alzare la luminosità aumenta tanto il consumo energetico su sfondo chiaro, ma su sfondo scuro il consumo è trascurabile
- Su schermi LCD, dove i pixel neri in realtà sono semplicemente "chiusi", e fanno passare meno della retroilluminazione (meno, ma non niente, e puoi vedere chiaramente che una schermata 100% nera su un LCD in realtà si vede grigina luminescente!); alzare la luminosità comporta sempre lo stesso consumo energetico, MA, il contrasto effettivo su un LCD è sempre più basso di un OLED perché i pixel neri fanno trapelare luce, e considerando che in ogni caso per vedere meglio bisogna avere sia buon contrasto percepito che effettivo... su un LCD finirai con l'alzare la luminosità su sfondo scuro per migliorare entrambi i contrasti, quindi addirittura a consumare più energia di quanta ne consumeresti per leggere un testo nero su bianco con lo stesso livello di comfort!
Spero di averti fatto capire - sto qua degli sfondi chiari o scuri su schermi diversi meriterebbe un articolo di blog...
E ora che ti ho detto tutto questo, però:
A meno che il sito non debba avere i colori che ha per una scelta artistica (ma in quel caso, di nuovo, assicurati almeno che l'HTML del tuo sito sia buono e quindi analizzabile dalle modalità di lettura dei browser, chi non sopporta il tuo tema potrà leggere con quella), se la tua scelta è puramente pratica.. allora non decidere tu, usa CSS per far decidere al browser (e al sistema operativo) di chi visita la tua pagina: usa le media query per dichiarare un tema chiaro, e un tema scuro. Fine.
Vedi https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme.
Un esempio:
/* Tema chiaro, predefinito */
body {
background-color: #FFFFFF;
color: #000000;
}
/* Tema scuro, secondario - Usato solo dai browser supportati (tutti quelli aggiornati, da anni) e che hanno preferenza di tema scuro */
@media (prefers-color-scheme: dark) {
body {
background-color: #000000;
color: #FFFFFF;
}
}
Si può volendo anche invertire il tutto, mettendo come predefiniti (specificati senza media query) i colori scuri, e specificando con @media (prefers-color-scheme: light) i colori chiari per chi preferisce quelli.
Maurizio Carnago
in reply to Andrea • •Andrea likes this.