Goed dark mode ontwerp is veel meer dan het omkeren van de kleuren van een licht thema. De achtergrond zwart maken en de tekst wit lijkt op het eerste gezicht te werken, maar in de praktijk veroorzaakt zuiver wit op zuiver zwart een vermoeiende gloed (halation), verdwijnen schaduwen en worden je merkkleuren hard. Een donker thema is een apart ontwerpsysteem dat je opnieuw moet doordenken met zijn eigen logica, zijn eigen grijspalet en zijn eigen contrastregels. In dit artikel loop ik de juiste grijstinten, leesbare contrastverhoudingen en kleurkeuzes door die oogvermoeidheid verminderen, met praktische voorbeelden.
Waarom zuiver zwart (#000000) een slecht startpunt is
De eerste reflex van de meeste mensen is de achtergrond op #000000 zetten, maar dat geeft meerdere problemen. Zuiver witte tekst op zuiver zwart levert extreem contrast op; vooral op OLED-schermen vervagen de randen van heldere letters en raakt het oog vermoeid tijdens lang lezen. Op een zuiver zwart oppervlak wordt een slagschaduw bovendien onzichtbaar, dus je verliest een van de krachtigste middelen om lagen (kaarten, modals, menu's) van elkaar te scheiden.
Gebruik in plaats daarvan een heel donkergrijs. Google's Material-richtlijnen adviseren al jaren ongeveer #121212 als basisoppervlakkleur, omdat je op die tint semi-transparante witte lagen kunt stapelen om een gevoel van elevatie te creëren. Een praktisch startpalet kan er zo uitzien:
--bg: #121212; /* laagste oppervlak */
--surface-1: #1e1e1e; /* kaarten */
--surface-2: #242424; /* verhoogde kaarten, menu's */
--surface-3: #2c2c2c; /* modals, popovers */
--text: #e6e6e6; /* hoofdtekst (geen zuiver wit) */
--text-dim: #a0a0a0; /* secundaire tekst */Merk op dat de oppervlakkleur lichter wordt naarmate de laag stijgt. In een donker thema lijken hogere oppervlakken helderder omdat het licht van boven komt; dit bootst de lichtlogica van de echte wereld na en laat de interface natuurlijk aanvoelen.
Verzacht wit in plaats van zuiver wit voor tekst
Maak de bodytekst niet #ffffff. Op een donker oppervlak veroorzaakt zuiver wit een trillingseffect rond de letters. Gebruik in plaats daarvan wit op 85–90% dekking, of een tint rond #e6e6e6. De Material-richtlijnen schalen de tekstdekking zo:
- Hoge nadruk (hoofdtekst): 87% van wit
- Gemiddelde nadruk (secundaire tekst, labels): 60% van wit
- Uitgeschakeld (inactieve elementen): 38% van wit
In CSS is het voorspelbaarder om dit als een directe kleur te schrijven in plaats van als dekking, want als je wit transparant maakt met rgba verandert de onderliggende oppervlakkleur het resultaat. Je kunt beide gebruiken, maar blijf consistent binnen een project.
Contrastverhouding: respecteer de WCAG-grenzen
De meest gemaakte fout in dark mode ontwerp is het contrast verlagen omwille van de esthetiek. Vervaagde grijze tekst op een donker oppervlak ziet er misschien "strak" uit, maar is onleesbaar. De toegankelijkheidsstandaard WCAG 2.1 stelt duidelijke drempels:
- Normale tekst: minstens een contrastverhouding van 4,5:1
- Grote tekst (boven 18pt / 24px, of 14pt vet): minstens 3:1
- UI-componenten (knopranden, iconen, contouren van formuliervelden): minstens 3:1
Een voorbeeld: op een #121212 achtergrond heeft tekst #e6e6e6 een contrastverhouding van ongeveer 13:1, ruim voldoende. Maar als je #757575 gebruikt voor secundaire tekst zakt de verhouding naar ongeveer 4,6:1, net voldoende. Kies #5a5a5a en hij valt onder 3:1 en is onbruikbaar voor normale tekst. Controleer elk kleurenpaar met de contrastchecker in de dev-tools van je browser of een tool zoals de WebAIM Contrast Checker.
Felle kleuren ontzadigen
Felle, verzadigde kleuren die er in een licht thema geweldig uitzien (helderblauw, rood, groen) "zweven" en trillen tegen een donker oppervlak. Dat komt doordat het grote luminantieverschil tussen hoge verzadiging en een donkere achtergrond het oog belast. De oplossing: verlaag de verzadiging en verhoog de helderheid licht voor dark mode. Met andere woorden, gebruik meer pastel, meer "stoffige" tinten.
/* Accentkleur in het lichte thema */
--accent-light: #0066ff; /* helderblauw */
/* Verzachte versie voor dark mode */
--accent-dark: #5b9aff; /* lichter, minder verzadigd */Dezelfde regel geldt voor merkkleuren. Als je primaire merkkleur erg donker is (bijvoorbeeld marineblauw), versmelt hij met het oppervlak en wordt hij onleesbaar in dark mode; dan moet je een lichtere variant afleiden voor de toegankelijkheid. Kleur-tokens themagebaseerd houden (een lichte en een donkere waarde per kleur) maakt dit beheersbaar.
Elevatie, schaduwen en randen
In een licht thema scheid je lagen met schaduwen. In een donker thema werken schaduwen slecht omdat de achtergrond al donker is. Combineer in plaats daarvan twee technieken: een lichtere oppervlakkleur (de lagenschaal hierboven) en een subtiele rand. Een witte rand met heel lage dekking scheidt een kaart elegant van het oppervlak:
.card {
background: var(--surface-1);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}Laat schaduwen niet volledig vallen; maak ze gewoon zachter en diffuser, zodat ze diepte suggereren in plaats van hardheid. In een donker thema is het doel geen dramatische schaduw maar een zachte scheiding.
Afbeeldingen en de themaovergang
Foto's en illustraties kunnen te helder blijven op een donker oppervlak; een heel lichte verduistering (filter: brightness(0.9)) of een dunne rand op contentafbeeldingen verbetert het visuele comfort. Transparante PNG-logo's, vooral donkere, verdwijnen in dark mode, dus bereid een lichte variant van je logo voor.
Tot slot: regel de overgang tussen thema's. Onthoud de keuze van de gebruiker (bijvoorbeeld in localStorage) en lees de systeemvoorkeur met prefers-color-scheme als beginwaarde. Om te voorkomen dat de overgang "knippert", pas je de themaklasse toe voordat de pagina voor het eerst rendert, idealiter met een klein script in de <head>.
Veelgestelde vragen
Vermoeit dark mode de ogen echt minder?
Dat hangt van de context af. In een donkere omgeving is een donker thema rustiger voor de ogen omdat de totale helderheid van het scherm daalt. Maar in een heldere omgeving kan een donker thema de pupil verwijden en de randen van tekst waziger doen lijken. De beste aanpak is gebruikers een keuze geven en hun systeemvoorkeur respecteren.
Heb ik een apart kleurenpalet nodig voor dark mode?
Ja, ten minste voor accent- en tekstkleuren. De kleuren van het lichte thema ongewijzigd overnemen geeft contrast- en verzadigingsproblemen. Kleur-tokens definiëren met aparte waarden per thema is de duurzaamste aanpak.
Moet ik zuiver zwart gebruiken voor OLED-schermen?
Voor batterijbesparing schakelt zuiver zwart inderdaad pixels uit, dat klopt. Maar de hele interface #000000 maken breekt de leesbaarheid en de laagscheiding. Een evenwichtige aanpak: houd het hoofdoppervlak heel donker zoals #121212 en gebruik echt zwart alleen waar je dat specifiek wilt.
Wil je een interface die feilloos werkt in zowel een licht als een donker thema voor je merk? Ik kan helpen met het ontwerpen van toegankelijk contrast, een consistent kleursysteem en een oogvriendelijke dark mode. Neem contact op en laten we het over je project hebben.