Dark mode – 3 tips för att göra dina emails dark mode kompatibla

Vad är dark mode?

Dark mode är en inställning som användaren kan applicera på både datorer och mobiler för att ändra färgerna på skärmen. Idén med dark mode är att det ska omvandla, eller invertera, färger med hög kontrast till mörkare färger. Anledningen till det är att användaren på så sätt ska minimera blått ljus från skärmen och förbättra läsbarheten för att minska påfrestningarna på ögonen.

Så för att undvika att våra mail ser helt annorlunda ut för dark mode användare, så måste vi se till att anpassa våra mail till det. Här är 3 enkla sätt som säkerställer att dina mail är dark mode optimerade.

3 sätt att dark mode optimera dina mail

1. Använd färger som passar dark mode

Färger inverterar i dark mode. Vilket innebär att starka färger omvandlas dovare färger och ljusa färger såsom vitt blir till mörkgrått eller svart. Använder du till exempel en vit bakgrund i ditt mail med svart text, så kommer dark mode omvandla det till en mörk bakgrund med vit text. Detsamma gäller färgstarka kulörer, en mörkrosa blir ljusrosa och en mörkgrön blir ljusgrön i dark mode.

Vilka färger är bäst för dark mode?

Vilka färger ska man använda i sitt mail och vilka färger bör du undvika? Här är några best practices när du ska välja färger för att dark mode optimera mail.

Använd färger med låg kontrast. Färg med hög kontrast påverkas särskilt mycket av dark mode inverteringen. Det vill säga, svart, vitt och starka, färgglada färger. Välj istället färger med lägre kontrast. Till exempel en vit färg som går mer mot grått än kritvitt eller mörkgrå istället för kolsvart för att undvika att kontrasten i färgerna blir för påfrestande för mottagaren.

Undvik svart bakgrund och vit text. Det kanske känns rimligt att vit text på svart bakgrund är go-to för att framhäva text dark mode. Men kombinationen svart bakgrund och vit brödtext blir väldigt påfrestande för ögonen. UX movement illustrerade detta i ett exempel.  Hur lättläst det blir för mottagaren beroende på vilken bakgrundsfärg och textfärg som du väljer.

Hur svart text på vit bakgrund ser ut i darkmode vs hur svart text på grå bakgrund ser ut i darkmode:

2. Använd transparenta PNG-filer

Om du inte har en transparent bakgrund på dina bilder så kommer det synas klart och tydligt i dark mode. Har bilden till exempel en vit bakgrund, som en jpg-fil brukar ha, så kommer det att synas mot den mörka färgen som ditt mail omvandlas till i dark mode. Se därför till att alltid använda PNG-filer med transparent bakgrund. På så sätt säkerställer du att det inte är en bakgrund som stör när mailet blir dark mode anpassat.

Exemplet ovan visar hur bilder kan se ut när du inte använder dig av bilder/filer med transparent bakgrund. Då kommer istället den bakgrunden runt bilden att synas och sticka ut. Vilket kanske inte är helt optimalt för utseendet.

Lägg vit kant runt mörka element

Använder du många mörka element? Det kan till exempel vara logotypen eller andra element i mailet. I sådana fall bör du överväga att lägga en vit kant runtom dem så att de inte försvinner in i den mörka bakgrunden i dark mode. Använder du en vit bakgrund i original designen kommer denna kant såklart inte synas, men den kommer förmodligen vara väl tillhands när mailet får en mörkgrå eller svart bakgrund i dark mode.

3. Kom ihåg att alltid testa dina mail!

Det viktigaste av allt är att alltid testa mail innan du skickar ut det till den stora massan. På så sätt kan du undvika att viktig content eller element försvinner eller knappt syns i dark mode. Och genom att testa dina e-postmeddelanden får du också en bättre uppfattning om vilka knep som fungerar med vilka kombinationer, vilket gör att du kan få ut det mesta av både light- och dark mode.

3 saker att tänka på

1. Syns er logga? Har ni en vit eller svart logga bör ni se till att den syns i både light- och dark mode. En svart logga kan till exempel kräva en vit kant runtom sig för att inte försvinna in i den mörka bakgrunden som uppstår i dark mode.

2. Blir alla färger som ni tänkt er? Ibland kan färger inverteras så pass mycket att det skiljer sig för mycket mot er grafiska profil. Kontrollera därför alltid hur era färger inverteras i dark mode innan ni bestämmer designen för utskicket.

3. Kontrollera ditt mail i alla maiklienter. Dark mode ser inte exakt likadant ut i alla email klienter. Dubbelkolla därför alltid i de största email klienterna så som Gmail, Apple mail och Outlook för att säkerställa att det ser ut som ni vill.

Vill du ha fler tips?

Nu har vi förbättrat användarupplevelsen för dem som öppnar dina nyhetsbrev. Vill du också se till att fler tar emot dina mail? Läs då vårt blogginlägg om hur du ökar leveransbarhet!