Anteprima e-mail in modalità scura

Tre comportamenti, non una sola modalità scura

Su un sito web decidi tu come appare la modalità scura. Nelle e-mail decide per te il programma di lettura, e ogni famiglia di programmi ha il suo modo di farlo.

Quindi un messaggio ha quattro aspetti: l’originale chiaro più questi tre. La pagina li mostra tutti e quattro in larghezza desktop o telefono.

Come vengono prodotte le anteprime

Lo strumento riscrive ogni colore che trova nel tuo HTML, che stia in un attributo style inline, in un blocco <style> o in un vecchio attributo come bgcolor. Ogni colore viene convertito in tonalità, saturazione e luminosità. La tonalità resta e la luminosità cambia.

• Inversione parziale: uno sfondo con luminanza relativa sopra 0,35 diventa scuro. Testo e bordi nella metà più scura della scala diventano chiari. Tutto il resto resta com’è.
• Inversione totale: la luminosità viene rispecchiata per ogni colore, quindi il bianco diventa quasi nero e il nero quasi bianco.
• Nessuna modifica: non viene riscritto nulla. Se il messaggio dichiara color-scheme con dark, le sue regole @media (prefers-color-scheme: dark) vengono attivate. Un messaggio che non imposta alcun colore riceve lo sfondo scuro predefinito del programma.

Le regole scritte per Outlook.com con i selettori [data-ogsc] e [data-ogsb] vengono applicate nell’anteprima parziale. Ogni anteprima gira in un frame isolato dove gli script non possono essere eseguiti.

Cosa significano i risultati

Contrasto insufficiente

In ogni versione, lo strumento abbina ogni parte di testo visibile allo sfondo più vicino dietro di essa e calcola il rapporto di contrasto. Le coppie sotto 4,5:1 vengono elencate, dalla peggiore. Sotto 3:1 la modalità viene segnata come errore. Il testo di preheader nascosto viene saltato.

Testo grigio medio

Un grigio poco saturo con una luminosità tra il 45 e il 70 percento sta a metà della scala. Invertilo e ottieni quasi lo stesso grigio, solo che adesso è sullo sfondo opposto. Usa #555555 o più scuro per il testo secondario.

Logo scuro su sfondo trasparente

Lo strumento carica fino a 15 immagini e ne esamina i pixel. Quando la maggior parte dei pixel opachi è molto scura e i bordi sono trasparenti, il logo finirà per confondersi con uno sfondo scuro. Viene segnalata anche un’immagine su sfondo bianco opaco, perché apparirà come un riquadro bianco.

Trasparenza da verificare

Il server dell’immagine non ha permesso a un altro sito di leggerne i pixel. Dovrai guardare tu le anteprime scure.

Impostazioni della modalità scura

Dice se il messaggio dichiara il supporto alla modalità scura e se fornisce colori scuri. Dichiarare il supporto senza fornire colori è peggio che non dichiarare nulla.

Immagini e testo

Un messaggio con meno di 120 caratteri di testo vero è fatto soprattutto di immagini, e il testo dentro le immagini non si adatta mai. Gli attributi alt mancanti vengono contati.

Correzioni che reggono in ogni programma

Comincia dalle scelte che non richiedono codice. Usa coppie forti, cioè testo molto scuro su sfondi molto chiari o il contrario, perché sono i toni intermedi a essere rovinati dall’inversione. Dai a un logo scuro un contorno bianco di due o tre pixel, oppure mettilo su una forma bianca arrotondata dentro il file immagine. Lascia le parole come testo HTML.

Per una newsletter puoi poi aggiungere i tuoi stili scuri per i programmi che li rispettano:

<meta name="color-scheme" content="light dark">
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    .card { background-color: #1e1e1e !important; }
    .body-text { color: #f2f2f2 !important; }
  }
</style>

Una firma non ha questa possibilità. L’editor in cui la incolli elimina <meta> e <style>, e ti restano colori netti e un logo che funzioni su entrambi gli sfondi. Il nostro generatore di firme e-mail può inviare il suo risultato direttamente a questa pagina.