Design til mørk tilstand: baggrunde, farve og kontrast

Design til mørk tilstand kræver et særskilt sæt værdier til flader, tekst, accenter og billeder frem for at vende farverne fra lys tilstand om. Mørke flader ændrer, hvordan farver opfører sig: mættede kulører virker tungere, skygger forsvinder, kridhvid tekst blænder, og glatte gradienter får farvebånd. De samme egenskaber gør heldigvis mørke temaer smukke, når du bruger dem rigtigt: farver gløder, dybden får flere lag, og indholdet står roligt i forgrunden.

Derfor bør du undgå helt sorte baggrunde

Rent sort, #000000, med helt hvid tekst giver den højest mulige kontrast på 21:1. Det lyder ideelt, men er ofte ubehageligt: mange læsere ser lys tekst flyde ud eller flimre mod rent sort, især i lange afsnit. Sort giver heller ikke plads til mørkere nuancer, så du kan ikke vise, at én flade ligger under en anden. Og på nogle OLED-telefoner kan indhold, der ruller over helt sort, kortvarigt trække spor, når pixels tændes. Googles Material Design-vejledning bruger derfor #121212 som mørk grundflade.

Vis hævede lag med lyshed

I lys tilstand adskiller skygger et kort fra siden. På en mørk baggrund er en mørk skygge knap synlig. Derfor vender mørke temaer logikken om: jo tættere en flade er på betragteren, desto lysere er den. Siden er mørkest, kort er et trin lysere, og menuer og dialoger er endnu lysere. Hold trinene små og ensartede, og tilføj en hårfin kant i en lidt lysere tone, hvor to lignende flader mødes.

Tekstfarve og kontrast i mørk tilstand

Brug en knækket hvid som #e6e8ec til brødtekst frem for rent hvid. Den giver stadig meget høj kontrast, 15:1 på #121417, og blænder mindre. Sekundær tekst kan gå ned til mellemgrå, men kontrollér den: #9aa1ad holder sig på 7.1:1 på samme flade og 5.5:1 på et lysere kort. WCAG kræver mindst 4.5:1 til almindelig tekst uanset tema. Farvekontrast forklarer, hvordan du tjekker det.

Dæmp accentfarvernes mætning

En kraftig violet som #7c3aed fungerer som knap på hvidt. På en mørk flade virker den tung og måler kun 3.2:1, hvilket er for lavt til tekstlinks. Den lysere tone #a78bfa måler 6.8:1 på samme baggrund og opleves som den samme brandfarve. Hovedreglen er at gøre accenter lysere og lidt mindre mættede i mørke temaer og bevare kuløren.

Gradienter i design til mørk tilstand

Gradienter kommer til deres ret på mørke flader. En dyb baggrund får farve til at ligne lys frem for maling. Derfor vises glød, nordlys og neonblandinger så ofte på næsten sort. Hold det meste af fladen mørk, og lad farven dukke op ét eller to steder: en glød bag et heroafsnit, en gradientkant på et fremhævet kort eller et blødt farveslør øverst på siden.

Ulempen er farvebånd. Mørke, gradvise overgange bruger kun få forskellige nuancer på en 8-bit-skærm, så trinene bliver synlige. Et svagt kornlag skjuler dem. Se farvebånd i gradienter og til web støjtekstur i CSS. Mørke gradientbaggrunde har paletter til baggrunde, der er mørke hele vejen igennem.

Byg mørk tilstand med CSS

Definér farverne én gang som brugerdefinerede egenskaber, og skift deres værdier efter tema. color-scheme fortæller browseren, at dens egne kontroller og rullebjælker skal følge temaet, og funktionen light-dark() vælger mellem to værdier ud fra det aktive farveskema.

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

Giv folk en manuel omskifter ud over at følge systemindstillingen, og husk alt uden for grænsefladen: diagrammer, illustrationer, logoer og e-mails skal også tjekkes i begge temaer. Gradienter i e-mails gennemgår, hvordan mailapps håndterer mørk tilstand.

Tjekliste til mørk tilstand

• Mørkegrå flader frem for rent sort med et tydeligt trin i lyshed for hvert hævet lag.
• Brødtekst i knækket hvid med høj kontrast. Sekundær tekst stadig over 4.5:1.
• Lysere og blødere accenter, der bevarer brandets kulør.
• Kanter frem for skygger til at adskille lignende flader.
• Farve brugt som lys enkelte steder frem for overalt.
• Korn på store mørke gradienter for at undgå farvebånd.
• Logoer med en lys version til mørke flader. Se logo på en gradientbaggrund.
• Begge temaer gennemgået på en rigtig telefon i et dæmpet rum og i dagslys.