Dark mode-ontwerp: achtergronden, kleur en contrast

Dark mode-ontwerp betekent een aparte set waarden bouwen voor vlakken, tekst, accenten en beeld, en niet de kleuren van de lichte modus omkeren. Donkere ondergronden veranderen hoe kleur zich gedraagt: verzadigde tinten lijken zwaarder, schaduwen verdwijnen, helderwitte tekst verblindt en zachte kleurverlopen krijgen banding. Het goede nieuws is dat dezelfde eigenschappen donkere thema’s mooi maken als je er goed mee omgaat: kleur gloeit, diepte voelt gelaagd en de inhoud staat rustig op de voorgrond.

Waarom je puur zwarte achtergronden mijdt

Puur zwart, #000000, met puur witte tekst geeft het hoogst mogelijke contrast van 21:1. Dat klinkt ideaal, maar is vaak onprettig: veel lezers zien heldere tekst uitstralen of trillen tegen puur zwart, vooral in lange passages. Zwart laat ook nergens een donkerdere plek over, zodat je niet kunt tonen dat het ene vlak onder het andere ligt. En op sommige OLED-telefoons kan inhoud die over echt zwart scrolt even nasmeren als pixels aanschakelen. De richtlijnen van Google Material Design gebruiken om deze redenen #121212 als donker basisvlak.

Hoogte tonen met lichtheid

In de lichte modus scheiden schaduwen een kaart van de pagina. Op een donkere achtergrond zie je een donkere schaduw nauwelijks. Donkere thema’s draaien de logica dus om: hoe dichter een vlak bij de kijker ligt, hoe lichter het is. De pagina is het donkerst, kaarten zijn een stap lichter, menu’s en dialogen weer lichter. Houd de stappen klein en consistent en voeg een haarlijn in een iets lichtere tint toe waar twee gelijkende vlakken elkaar raken.

Tekstkleur en contrast in dark mode

Gebruik een gebroken wit zoals #e6e8ec voor lopende tekst in plaats van puur wit. Het geeft nog steeds heel hoog contrast, 15:1 op #121417, en verblindt minder. Secundaire tekst mag terugvallen op een middengrijs, maar controleer het: #9aa1ad blijft op 7,1:1 op hetzelfde vlak en 5,5:1 op een lichtere kaart. WCAG vraagt minstens 4,5:1 voor normale tekst, welk thema je ook gebruikt; kleurcontrast legt uit hoe je dat controleert.

Accentkleuren minder verzadigd maken

Een sterk violet zoals #7c3aed werkt als knop op wit. Op een donker vlak oogt het zwaar en haalt het maar 3,2:1, te weinig voor tekstlinks. De lichtere tint #a78bfa haalt 6,8:1 op dezelfde achtergrond en leest als dezelfde merkkleur. De algemene regel: verschuif accenten voor donkere thema’s naar lichter en iets minder verzadigd, en houd de tint gelijk.

Kleurverlopen in dark mode-ontwerp

Donkere ondergronden zijn waar kleurverlopen schitteren. Een diepe achtergrond laat kleur als licht ogen in plaats van als verf, en daarom zie je gloeden, aurora’s en neonovergangen zo vaak op bijna-zwart. Houd het grootste deel van het vlak donker en laat kleur op een of twee plekken verschijnen: een gloed achter een hero, een kleurverloop langs de rand van een uitgelichte kaart, een zachte waas bovenaan een pagina.

De adder onder het gras is banding. Donkere, langzame overgangen gebruiken op een 8-bitscherm maar een paar verschillende tinten, dus stappen worden zichtbaar. Een vage korrellaag verbergt ze; zie gradient banding en, voor het web, CSS-ruistextuur. Voor achtergronden die helemaal in het donker zijn opgebouwd, heeft donkere kleurverloopachtergronden paletten.

Dark mode bouwen in CSS

Definieer kleuren één keer als custom properties en wissel hun waarden per thema. color-scheme zegt de browser dat hij zijn eigen bediening en schuifbalken in het bijpassende thema moet tonen, en de functie light-dark() kiest tussen twee waarden op basis van het actieve schema.

:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #121417);
  --card: light-dark(#f6f7f9, #22262c);
  --text: light-dark(#16181d, #e6e8ec);
  --text-muted: light-dark(#5b6270, #9aa1ad);
  --accent: light-dark(#7c3aed, #a78bfa);
}

body {
  background: var(--surface);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);
  }
}

Geef mensen ook een handmatige schakelaar naast het volgen van de systeeminstelling, en denk aan alles buiten de interface: grafieken, illustraties, logo’s en e-mail moeten in beide thema’s worden gecontroleerd. Kleurverlopen in e-mail behandelt hoe mailapps met dark mode omgaan.

Een checklist voor dark mode

• Donkergrijze vlakken, geen puur zwart, met een duidelijke lichtheidsstap per hoogte.
• Gebroken witte lopende tekst met hoog contrast; secundaire tekst nog steeds boven 4,5:1.
• Accenten lichter en zachter gemaakt, met behoud van de merktint.
• Randen, geen schaduwen, om gelijkende vlakken te scheiden.
• Kleur als licht gebruikt op een paar plekken, niet overal.
• Korrel op grote donkere kleurverlopen om banding te voorkomen.
• Logo’s met een lichte versie voor donkere ondergronden; zie logo op een kleurverloopachtergrond.
• Beide thema’s bekeken op een echte telefoon, in een schemerige kamer en bij daglicht.