Design for mørk modus: bakgrunner, farge og kontrast

Design for mørk modus betyr å lage et eget sett med verdier for flater, tekst, aksenter og bilder, ikke å snu fargene fra lys modus. Mørke bunner endrer hvordan farger oppfører seg: mettede fargetoner virker tyngre, skygger forsvinner, skarp hvit tekst blender, og jevne gradienter får fargebånd. Heldigvis er det de samme egenskapene som gjør mørke temaer vakre når de håndteres godt: farger gløder, dybden bygges i lag, og innholdet ligger rolig i forgrunnen.

Hvorfor du bør unngå helt svarte bakgrunner

Rent svart, #000000, med rent hvit tekst gir høyest mulig kontrast på 21:1. Det høres ideelt ut, men er ofte ubehagelig: mange lesere ser lys tekst gløde utover eller vibrere mot rent svart, særlig i lange tekster. Svart gir heller ikke rom for noe mørkere, så du kan ikke vise at én flate ligger under en annen. Og på enkelte OLED-telefoner kan innhold som rulles over helt svart, gi et kort etterslep når pikslene slås på. Googles Material Design bruker #121212 som mørk grunnflate av disse grunnene.

Vis høyde med lyshet

I lys modus skiller skygger et kort fra siden. På mørk bakgrunn er en mørk skygge knapt synlig. Derfor snur mørke temaer logikken: jo nærmere en flate er betrakteren, desto lysere er den. Siden er mørkest, kort er ett trinn lysere, og menyer og dialogbokser enda lysere. Hold trinnene små og konsekvente, og legg til en hårfin kant i en litt lysere tone der to like flater møtes.

Tekstfarge og kontrast i mørk modus

Bruk brukket hvitt som #e6e8ec til brødtekst i stedet for rent hvitt. Det gir fortsatt svært høy kontrast, 15:1 på #121417, og blender mindre. Sekundærtekst kan være mellomgrå, men mål den: #9aa1ad holder 7.1:1 på samme flate og 5.5:1 på et lysere kort. WCAG krever minst 4.5:1 for vanlig tekst, uansett tema; fargekontrast forklarer hvordan du kontrollerer det.

Demp metningen i aksentfarger

En sterk fiolett som #7c3aed fungerer som knapp på hvitt. På en mørk flate virker den tung og måler bare 3.2:1, for lavt for tekstlenker. Den lysere nyansen #a78bfa måler 6.8:1 på samme bakgrunn og oppfattes som samme merkevarefarge. Hovedregelen: gjør aksenter lysere og litt mindre mettede i mørke temaer, og behold fargetonen.

Gradienter i design for mørk modus

Mørke bunner får gradienter til å skinne. En dyp bakgrunn lar farge se ut som lys fremfor maling. Derfor vises glød, nordlys og neonoverganger så ofte på nesten svart. Hold det meste av flaten mørk og la farge dukke opp ett eller to steder: en glød bak et toppfelt, en gradientkant på et fremhevet kort, et mykt fargeslør øverst på siden.

Ulempen er fargebånd. Mørke, langsomme overganger bruker bare noen få ulike nyanser på en 8-bitsskjerm, så trinnene blir synlige. Et svakt kornlag skjuler dem; se fargebånd i gradienter og, for nett, støytekstur i CSS. For bakgrunner bygget helt i mørke finner du paletter i mørke gradientbakgrunner.

Bygg mørk modus i CSS

Definer farger én gang som egendefinerte egenskaper og bytt verdiene per tema. color-scheme ber nettleseren tegne sine egne kontroller og rullefelt i riktig tema, og funksjonen light-dark() velger mellom to verdier ut fra det aktive fargevalget.

: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);
  }
}

Gi folk en manuell bryter i tillegg til å følge systeminnstillingen, og husk alt utenfor grensesnittet: diagrammer, illustrasjoner, logoer og e-post må også kontrolleres i begge temaer. Gradienter i e-post forklarer hvordan e-postapper håndterer mørk modus.

En sjekkliste for mørk modus

• Mørkegrå flater, ikke rent svarte, med et tydelig lyshetstrinn for hvert høydenivå.
• Brukket hvit brødtekst med høy kontrast; sekundærtekst fortsatt over 4.5:1.
• Lysere og mykere aksenter som beholder merkevarens fargetone.
• Kanter fremfor skygger for å skille like flater.
• Farge brukt som lys noen få steder, ikke overalt.
• Korn på store mørke gradienter for å hindre fargebånd.
• En lys logoversjon for mørke bunner; se logo på gradientbakgrunn.
• Begge temaer vurdert på en ekte telefon, i et dunkelt rom og i dagslys.