Gebruikersvoorkeur detectie implementeren
Hoe je de systeem voorkeur van gebruikers detecteert en je website automatisch aanpast. Met JavaScript en CSS media queries.
Lees meerKleurenschema’s ontwerpen voor donkere interfaces
Leer hoe je contrastrijke en prettige kleurencombinaties maakt die in beide modi goed werken. We behandelen contrast verhouding en toegankelijkheid.
Waarom kleurenschema’s belangrijk zijn
Dark mode is overal. Van smartphones tot design applicaties, gebruikers verwachten de mogelijkheid om naar een donkere interface te schakelen. Maar hier’s het ding — een donker achtergrond betekent niet dat je dezelfde kleuren kunt gebruiken als je lichte versie.
We zien het voortdurend: websites met witte tekst op een licht grijze achtergrond in dark mode. Niet leesbaar. Buttons die in het licht prachtig zijn, maar in het donker volkomen verdwijnen. Het probleem? Ontwerpers die de basisprincipes van contrast en kleurharmonie niet toepassen op beide modi.
We gaan je leren hoe je werkelijk goede kleurenschema’s ontwerpt. Niet alleen mooi, maar functioneel. Zowel in light mode als dark mode.
Het contrast-verhaal
Contrast is niet ingewikkeld, maar het wordt veel te vaak verkeerd begrepen. WCAG 2.1 zegt dat body text minimaal een contrast ratio van 4.5:1 moet hebben. Dat klinkt als wiskundig gezeur, maar het is eigenlijk heel praktisch.
In light mode: donkere tekst op lichte achtergrond. Makkelijk. Je neemt een donkergrijs (#333333) en zet het op wit (#ffffff). Contrast ratio? Ongeveer 12:1. Prima.
In dark mode: hier gaat het fout. Je kan niet simpelweg wit tekst (#ffffff) op donkergrijs (#1a1a1a) zetten en verwachten dat het hetzelfde voelt. Het voelt te schril. Te hard. Dus voegen ontwerpers shades toe — lichtgrijs tekst, wat meer adempruimte. Goed idee, maar dan daalt je contrast ratio. Plotseling zit je op 7:1 of lager. Nog steeds toegankelijk, maar niet optimaal.
De truc? Werk achterwaarts. Begin met de minimale ratio van 4.5:1 die je nodig hebt, en kies je kleuren daarop. Je’ll merken dat je meer mogelijkheden hebt dan je denkt.
De technische aanpak
Hoe pas je dit toe in werkelijk code? Met CSS custom properties. Dit is niet optioneel — het’s de enige manier die schaalbaar werkt.
Je definieert je kleurenpalet als variabelen en je voegt ze toe
aan twee media queries:
prefers-color-scheme: light
en
prefers-color-scheme: dark
. Dan kan de browser automatisch schakelen op basis van de
voorkeur van de gebruiker. Je code ziet eruit als:
:root { –text-primary: #1a1a1a; –bg-primary: #ffffff; } @media (prefers-color-scheme: dark) { :root { –text-primary: #f5f5f5; –bg-primary: #0d0d0d; } }
Simpel, toch? Dan gebruik je die variabelen overal in je CSS. Geen hex codes meer. Alles is flexibel. Je wilt de achtergrond wijzigen? Één regel aanpassen en klaar.
Het opbouwen van je kleurenpalet
We gaan drie stappen volgen. Dit werkt voor bijna elke interface.
01
Kies je basiskleur
Dit is je accent of merkkleur. Iets wat zich onderscheidt. Voor licht mode: een verzadigde kleur. Voor dark mode: dezelfde kleur, maar iets lichter. Als je #2563eb gebruikt in light mode, probeer #60a5fa in dark mode. Het voelt hetzelfde, maar werkt beter op donkere achtergronden.
02
Bouw je achtergrondschaal
Light mode: wit (#ffffff) als primair, lichte grijstinten (#f3f4f6, #e5e7eb) als secundair. Dark mode: zeer donker grijs (#0d0d0d) als primair, iets lichter (#1a1a1a, #262626) voor elementen. Dit geeft je diepte zonder te veel contrast.
03
Definieer je tekstkleuren
Light mode: donkergrijs (#111827) voor hoofd tekst, medium grijs (#6b7280) voor secundaire. Dark mode: bijna wit (#f9fafb) voor hoofd, lichter grijs (#d1d5db) voor secundaire. Test alles met een contrast checker. Serieus. Geen giswerk.
Testen en valideren
Je hebt je kleuren gekozen. Je hebt je variabelen ingesteld. Mooi. Nu test je het. En je test het grondig.
Gebruik WebAIM’s contrast checker. Het’s gratis en je voert gewoon je twee kleurwaarden in. Als je 4.5:1 of hoger krijgt, goed gedaan. Onder die 4.5:1? Terug naar stap één. Het’s niet onderhandelbaar.
Test ook in werkelijk browser met echte donkere mode ingeschakeld. Veel ontwerpers ontwerpen in light mode en schakelen nooit naar dark. Je’ll verassen hoe anders dingen eruitzien als je het echt gebruikt. Kleuren voelen anders. Contrasten voelen anders. Tekstgrootte voelt anders. Test op een iPhone, een Android, een laptop. Echt testen, niet “ik denk dat het werkt.”
En maak het jezelf gemakkelijk: zet een systeem op waarmee je snel kunt schakelen. Chrome DevTools laat je prefers-color-scheme emuleren. Gebruik het. Veel.
Samengevat
Goed kleurschema’s ontwerpen voor donkere interfaces is niet moeilijk. Het is discipline. Je volgt een systeem, je test voortdurend, en je compromiseert niet op contrast. Dat’s het.
CSS custom properties maken het gemakkelijk. Automatische thema-omschakeling op basis van gebruikersvoorkeur maakt het schoon. Contrast checkers zorgen ervoor dat je niet per ongeluk iets onleesbaars maakt. Je hebt alles wat je nodig hebt.
De volgende keer als je aan dark mode werkt, onthoud dit: hetzelfde kleuren gebruiken werkt niet. Een ander systeem werkt niet. Je moet bewust kiezen, voorzichtig testen en niet tevreden zijn met “bijna goed genoeg.” Jouw gebruikers zullen het verschil merken.
Wil je meer leren over thema-switching?
We hebben meer gidsen die je helpen donkere interfaces perfect in te stellen.
Volgende: Gebruikersvoorkeur detectieGerelateerde artikelen
Opmerking
Dit artikel geeft informatieve richtlijnen voor het ontwerpen van donkere interfaces. Hoewel we streven naar nauwkeurigheid, kunnen ontwerpen en implementaties per project verschillen. Contrastratios kunnen variëren afhankelijk van je scherm en browserinstellingen. Zorg altijd dat je je werk test met echte gebruikers en accessibility tools. WCAG-richtlijnen zijn minimale normen — streven naar betere resultaten waar mogelijk.