Dark mode: een tweede huisstijl, geen omgekeerde kleuren
Steeds meer mensen zetten hun telefoon standaard op donker. Komen ze dan op een felwitte website, dan is dat een klap in het gezicht. Zeker ‘s avonds in bed. Sommige bezoekers klikken daarom weg voordat ze iets gelezen hebben.
De reflex is dan om alle kleuren om te draaien. Wit wordt zwart, zwart wordt wit. Dat werkt niet, en het ziet er meestal slecht uit.
Bij Synoz One kwam die vraag op tafel. Ik bouwde daar de nieuwe website en verzorgde de vindbaarheid. Hun doelgroep zit veel achter een scherm, vaak laat op de dag.
We hebben geen filter over de site gelegd. Ik heb een tweede kleurenset gemaakt die past bij de huisstijl. Dezelfde herkenbaarheid, andere waarden. De site volgt nu automatisch de instelling van het apparaat.
Dark mode is een tweede versie van je huisstijl, geen filter.
Wat is dark mode?
Dark mode is een donkere weergave van een website of app. Donkere achtergrond, lichte tekst. De bezoeker kiest die voorkeur zelf in zijn besturingssysteem.
Jouw site kan die keuze uitlezen. Staat het apparaat op donker, dan schakelt je site mee. Je bezoeker hoeft nergens op te klikken.
Waar de voorkeur vandaan komt
De systeemvoorkeur zit in het systeem, niet in je website. Windows, macOS, iOS en Android hebben allemaal zo’n schakelaar. De browser geeft die keuze door aan je pagina.
Waarom omdraaien niet werkt
Kleuren spiegelen levert bijna altijd een lelijk en onleesbaar resultaat op. Daar zijn drie redenen voor.
Contrast klapt om
Een lichtgrijze tekst op wit is prima leesbaar. Diezelfde tint op zwart wordt te fel. Je moet het kleurcontrast opnieuw bepalen, niet omdraaien.
Wit wordt te hard
Zuiver wit op zuiver zwart trilt op een scherm. Ik gebruik daarom nooit die twee uitersten. Een zeer donkerblauw met gebroken wit leest veel rustiger.
Beeld valt uit de toon
Logo’s en illustraties met een witte achtergrond springen eruit als een lamp. Die moeten een aparte versie krijgen.
Hoe het technisch werkt
Je legt in CSS een tweede kleurenpalet vast. Dat doe je met een regel die vraagt of het systeem donker staat.
Werk je met variabelen voor je kleuren, dan is het werk beperkt. Je verandert de waarden achter de namen en de hele site schuift mee. Werk je zonder variabelen, dan moet je elke regel langs.
Wat ik altijd apart nakijk
Formuliervelden en hun randen, die vallen vaak weg.
Schaduwen, die zijn onzichtbaar op donker.
Logo’s en iconen met een vaste achtergrond.
Grafieken en kaarten van externe diensten.
De focusrand voor toetsenbordgebruikers.
Heeft jouw site het nodig?
Eerlijk gezegd vaak niet. Het is geen rankingfactor en het levert je geen extra aanvragen op. Het is een comfortkeuze.
Ik adviseer het wel bij sites waar lang gelezen wordt. Denk aan documentatie, een kennisbank of een langere blog. Ook bij een doelgroep die veel schermgebruik in het donker heeft, is het prettig.
Voor een gewone bedrijfssite met korte bezoeken is de winst klein. Steek je tijd dan liever in pagespeed of in je formulier.
Toegankelijkheid
Dark mode is geen vervanging voor goede accessibility. Ook in donkere weergave gelden dezelfde contrasteisen. Ik meet dat opnieuw, want een geslaagde lichte variant zegt niets over de donkere.
Voor mensen met bepaalde vormen van slechtziendheid is donker juist prettiger. Voor anderen met astigmatisme werkt het slechter. Daarom laat je de keuze altijd bij de bezoeker en dwing je niets af. Dat verbetert het leescomfort voor iedereen.
In de praktijk
In WordPress kan het via je thema of met eigen code. Let op dat je paginabouwer meebeweegt, want die zet vaak vaste kleuren neer. Test daarna in meerdere browsers.
Laat de keuze bij de bezoeker
Ik bouw geen eigen schakelaar op de site. Het apparaat weet de voorkeur al, en die is bewust ingesteld. Een tweede knop levert alleen verwarring op.
Wil je hem toch, onthoud de keuze dan per bezoeker. Anders springt je site bij elke pagina terug naar de systeeminstelling. Dat is irritanter dan geen keuze bieden.
Test tot slot je afbeeldingen apart. Een logo met een witte achtergrond valt op donker op als een lamp. Daar hoort een tweede versie bij.
Meer vragen over Dark mode
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is dark mode?
Heeft mijn website dark mode nodig?
Hoe werkt dark mode technisch?
Is dark mode beter voor je ogen?
Wat kost het om dark mode toe te voegen?
Werkt dark mode in elke browser?
Wat is dark mode?
Vaak niet, en dat zeg ik tegen de mode in. Het is geen rankingfactor en het levert je geen extra aanvragen op.
Dark mode is een comfortkeuze. Er zijn wel situaties waarin die keuze echt telt.
Bij sites waar lang gelezen wordt, is de winst duidelijk. Denk aan documentatie, een kennisbank of een blog met lange artikelen. Iemand die twintig minuten leest, merkt het verschil.
Ook bij een doelgroep die veel achter een scherm zit, is het prettig. Ontwikkelaars, ontwerpers en mensen die ‘s avonds werken zetten hun apparaat vaak op donker.
Voor een gewone bedrijfssite met korte bezoeken is de winst klein. Iemand die dertig seconden je dienstenpagina bekijkt, ligt er niet wakker van.
Steek je tijd dan liever in je laadtijd of je formulier. Daar zit meer resultaat.
Kijk ook even in je statistieken naar de gemiddelde tijd op je pagina. Blijft die onder de minuut, dan leest niemand lang genoeg om er last van te hebben. Dat cijfer beantwoordt deze vraag vaak in een oogopslag.
Heeft mijn website dark mode nodig?
Dark mode is een donkere weergave van een website of app. Donkere achtergrond, lichte tekst. De bezoeker kiest die voorkeur zelf in zijn besturingssysteem.
Windows, macOS, iOS en Android hebben allemaal zo’n schakelaar. Staat die op donker, dan kan jouw website dat uitlezen en meeschakelen. De bezoeker hoeft nergens op te klikken.
Belangrijk is wat dark mode niet is. Het is geen filter dat je over je site legt. Het is een tweede kleurenset die je bewust ontwerpt.
Kleuren omdraaien werkt namelijk niet. Lichtgrijze tekst die op wit prima leest, wordt op zwart veel te fel. En zuiver wit op zuiver zwart trilt op een scherm.
Ik gebruik daarom nooit die uitersten. Een zeer donkerblauw met gebroken wit leest een stuk rustiger. Meer over de techniek eronder lees je bij CSS.
Zie dark mode dus als een tweede ontwerp, niet als een instelling. Wie het als schakelaar behandelt, krijgt een site die er in de donkere stand half af uitziet. Dat is slechter dan helemaal geen dark mode.
Hoe werkt dark mode technisch?
Je legt in je opmaak een tweede set kleuren vast. Dat doe je met een regel die vraagt of het systeem op donker staat.
De browser geeft die systeemvoorkeur door aan je pagina. Staat hij op donker, dan gelden jouw donkere waarden. Staat hij op licht, dan gelden de normale.
Hoeveel werk dat is, hangt af van hoe je site is opgebouwd. Werk je met variabelen voor je kleuren, dan verander je de waarden achter de namen. De hele site schuift dan mee.
Werk je zonder variabelen, dan moet je elke regel apart langs. Dat is precies waarom ik kleuren altijd centraal vastleg.
Er zijn vijf dingen die ik altijd apart nakijk. Formuliervelden en hun randen, schaduwen, logo’s met een vaste achtergrond, grafieken van externe diensten en de focusrand voor toetsenbordgebruikers.
Reken vooraf uit wat het kost. Werk je met centrale kleurwaarden, dan is het een dagdeel werk. Ligt alles verspreid over losse blokken, dan loopt het snel op naar dagen. Dat verschil bepaalt of het de moeite waard is.
Is dark mode beter voor je ogen?
Dat ligt genuanceerder dan de verhalen op internet suggereren. Voor sommige mensen wel, voor anderen juist niet.
In een donkere kamer scheelt het merkbaar. Een felwit scherm in het donker voelt als een lamp in je gezicht. Daar is dark mode gewoon prettiger.
Bij daglicht is het vaak andersom. Donkere achtergronden met lichte tekst lezen dan juist slechter.
Er is ook een medische kant. Voor mensen met bepaalde vormen van slechtziendheid werkt donker beter. Voor mensen met astigmatisme werkt het vaak slechter, omdat lichte tekst op donker gaat uitlopen.
Daarom dwing je nooit iets af. Je volgt de keuze van de bezoeker en laat hem zelf beslissen. Dat is ook precies hoe ik accessibility benader.
Doe de test zelf een keer bewust. Lees een lange tekst in donkere weergave bij daglicht en daarna in het donker. Je merkt dan meteen dat de context meer uitmaakt dan de instelling zelf. Wat voor jou prettig leest, hoeft dat voor je bezoeker niet te zijn.
Werkt dark mode in elke browser?
In alle moderne browsers wel. Chrome, Safari, Firefox en Edge ondersteunen het allemaal al jaren.
Er zitten wel verschillen in de details. Formuliervelden en keuzelijsten worden per systeem anders getekend. Een invoerveld op een iPhone ziet er in donkere weergave anders uit dan op Windows.
Ook ingesloten onderdelen doen niet automatisch mee. Een kaart, een videospeler of een grafiek van een externe dienst blijft vaak licht. Dat springt er dan uit als een wit vlak.
Daarom test ik dark mode altijd in meerdere browsers voordat het live gaat. Het kost een half uur per sjabloon.
Oude browsers negeren de instelling gewoon en tonen de lichte versie. Dat is geen probleem, want die versie werkt volledig. Meer daarover lees je bij cross-browser.
Controleer na elke grote update opnieuw. Een nieuwe versie van je paginabouwer zet regelmatig vaste kleuren neer die je donkere set overschrijven. Dat zie je alleen als je er gericht naar kijkt.
Twijfel je of dark mode iets toevoegt voor jouw bezoekers? Stuur me je website via het formulier hieronder. Ik kijk naar je doelgroep en je leestijd en zeg eerlijk of het de moeite waard is. Blijkt van niet, dan noem ik drie dingen die wel effect hebben. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Donkere modus, nachtmodus, donker thema
