Webdesign dilemma: Hoe laat je een dark theme goed uit de verf komen?

Laatst heb ik mijn eerste dark theme website gemaakt, ofwel een donkere website met lichte letters. Het kan je website een stoere of mysterieuze uitstraling geven, en het zou ook beter voor het milieu zijn dan een lichte website met donkere letters. In deze blogpost geef ik je de overwegingen die je kunt maken bij beide opties, en tips hoe je een dark theme goed uit de verf kunt laten komen.

Argumenten voor zwart op wit

Beter leesbaar
Zwarte letters op een lichte achtergrond zijn rustiger voor de ogen dan witte letters op een zwarte achtergrond. Hierdoor is een zwart op wit tekst beter leesbaar.
Vertrouwd
Zwarte tekst op een witte achtergrond wordt verreweg het meest gebruikt, en zijn we ook gewend vanuit boeken en ander drukwerk. Hierdoor geeft zwart op wit ons een vertrouwd gevoel, we worden niet opeens verrast door de kleurstelling.

Argumenten voor wit op zwart

Eigen uitstraling
Omdat nog niet zoveel websites gebruik maken van een dark theme, heb je direct een herkenbare eigen uitstraling. Een zwarte achtergrond kan heel stoer overkomen voor bijvoorbeeld een band- of festivalwebsite, maar een dark theme kan ook heel chic zijn als je bijvoorbeeld crème op donkerblauw gebruikt.
Milieuvriendelijker
Er wordt wel gezegd dat een dark theme milieuvriendelijker is, maar daar zitten een paar haken en ogen aan. Dit geldt namelijk alleen bij schermen waar donkere pixels daadwerkelijk uitgezet worden, zoals bij OLED.
Bij schermen met een kristalraster maakt het niks uit: er wordt evenveel backlight geproduceerd, en donkere pixels worden enkel “dicht” gedaan. Ook wordt er niet minder informatie verzonden om een pixel wit of zwart te maken.

Zo laat je een dark theme goed uit de verf komen

Persoonlijk gebruik ik liever een traditioneel licht thema dan een dark theme. Dit omdat grotere stukken tekst wit op zwart snel vermoeiend kunnen worden voor de ogen. Koppen en korte stukken tekst zijn heel goed te doen in een dark theme, leesbaarheid en vermoeidheid van de ogen zijn daar niet zo’n issue.

Verder kun je de leesbaarheid (en daarmee toegankelijkheid) van je dark theme website vergroten met de volgende tips:

Licht tekstblok
Gebruik een lichtgekleurd tekstvlak voor langere stukken tekst, zoals een blogpost. Dit kan simpelweg wit zijn, maar ook een passende pastelkleur.
Eenvoudig font
Gebruik een eenvoudig, rustig, schreefloos font.
Grote letters
Zorg dat je letter iets groter zijn dan gebruikelijk, als je met wit op zwart werkt.
Vetgedrukt
Zorg dat je font niet te dun is, geef je body tekst een hoge font weight in de standaardinstellingen.

Dark theme tekst inspiratie

1 – Dikgedrukte tekst

Dit is een lettertype met normale font weight. Zoals je ziet is het wel leesbaar, maar je moet moeite doen. Het danst een beetje voor je ogen.

Deze tekst is dikker gedrukt en iets groter. De letters lijken minder te dansen en voelen iets rustiger voor de ogen.

2 – Wit tekstvlak met accent

Voor een langer stuk tekst kun je ook een wit tekstvlak creëren met een accentkleur erachter. Zo heb je wel je dark theme, maar ook de leesbaarheid van zwarte tekst op een witte achtergrond.

3 – Transparant tekstvlak

Dit is een beige tekstvlak op een donkerblauwe achtergrond. De achtergrond van het tekstvlak heeft een opacity van 80%. De rand aan de linkerkant heeft dezelfde kleur en een opacity van 100%.

Kun je wel wat hulp gebruiken bij het bouwen van jouw website? Neem dan contact op!