Farger til mørk modus: slik velger du bakgrunn, tekst og aksentfarger

Hvorfor helt hvitt på helt svart er slitsomt

Hvit #ffffff på svart #000000 er den høyeste kontrasten en skjerm kan vise: 21:1 i WCAG 2 og Lc -107,9 i APCA. Til teksten på en knapp går det fint. Til avsnitt er det for mye.

Problemet er halo-effekten (halasjon). Lyse bokstaver på svart bunn ser ut til å stråle lys ut i mørket rundt seg, så strekene virker tykkere og uskarpe, særlig for personer med astigmatisme. Øynene må også hele tiden tilpasse seg mellom den skarpe teksten og de svarte mellomrommene, og det sliter ved lengre lesing.

Senker du begge ytterpunktene, forsvinner problemet uten at lesbarheten lider. #e5e5e5 på #121212 gir fortsatt 14,87:1 og Lc -90,4, som er over nivået APCA anbefaler for brødtekst, Lc 90.

• Helt svart#000000
• Mørk flate#121212
• Brukket hvit tekst#e5e5e5
• Helt hvit#ffffff

De beste bakgrunnsfargene til mørk modus

De fleste mørke temaer bruker en bakgrunn med OKLCH-lyshet mellom 0,14 og 0,28. Tabellen viser vanlige valg med to tekstfarger oppå: #e5e5e5 for behagelig brødtekst og #fafafa for maksimal fremheving.

Å gå fra helt svart til #18181b koster nesten ingenting målt i APCA: tekst i #e5e5e5 faller fra Lc -91,0 til -89,9. Det du vinner, er rom under bakgrunnen til skygger og rom over den til hevede flater. #1f2937 er litt blålig (kroma 0,03). Det fungerer hvis den grafiske profilen din er kald, men ser feil ut ved siden av varme aksentfarger.

WCAG 2 overvurderer kontrasten på mørke bakgrunner

Formelen i WCAG 2 behandler et forhold likt enten fargene er lyse eller mørke. Det gjør ikke synet vårt: forskjeller mellom mørke farger er vanskeligere å se. APCA tar hensyn til dette, og avviket er stort. Tabellen viser hvilken grå du trenger på hver bakgrunn for å nå WCAG AA og to nivåer i APCA.

På hvitt når en grå som så vidt består AA, allerede Lc 71,6. På #121212 når en grå som så vidt består AA, bare Lc -32,8, under minimumet på Lc 45 som APCA setter for store overskrifter. For å nå det samme nivået for brødtekst i APCA, Lc 75, trenger du 5,10:1 på hvitt, men 11,67:1 på #121212.

Det samme skjer med farger. Den blå fargen #4a83f0 på #121212 består WCAG AA med 5,17:1, men APCA-verdien er Lc -37,6. I mørk modus bør du se på 4,5:1 som et absolutt minimum. For brødtekst bør du sikte på rundt 9:1 eller mer, der en grå på #121212 når Lc 60, eller sjekke APCA direkte.

Hvorfor du ikke bare kan snu den lyse paletten

En profilfarge som er tilpasset hvite bakgrunner, er som regel for mørk og for mettet til mørke. Ta den blå fargen #2f6bdf fra et lyst tema. På hvitt består den som lenketekst med 4,90:1. På #121212 faller den til 3,83:1 og Lc -27,7, og da består den ikke for tekst i noen størrelse.

Løsningen er å gå oppover i skalaen til profilfargen: høyere lyshet, lavere kroma. Tabellen sammenligner fire nyanser fra den samme blå skalaen på begge bakgrunnene.

Nyanse 300 er motstykket i mørk modus til nyanse 600 for lenker og farget tekst: lysheten går fra 0,555 til 0,805, og kroma faller fra 0,188 til 0,082, mindre enn halvparten. Den lavere kromaen er også viktig, fordi mettede farger på mørk bakgrunn ser ut til å gløde og vibrere i kantene.

Fylte knapper er noe annet, fordi knappen har sin egen bakgrunn. Hvit tekst på #2f6bdf beholder 4,90:1 i begge temaene, så hovedknappen kan være den samme. Det er bare farget tekst, ikoner og omriss som trenger den lysere nyansen.

Elevasjon: lysere flater i stedet for skygger

Skygger synes knapt på mørk bakgrunn, så mørke temaer viser høyde med lyshet: jo nærmere brukeren en flate ligger, desto lysere blir den. Det opprinnelige mørke temaet i Material Design gjorde dette med et hvitt overlegg på #121212, fra 5 % ved elevasjon 1 dp, brukt til kort, til 16 % ved 24 dp, brukt til dialogbokser.

Hvert nivå legger til omtrent 0,02 til 0,05 i OKLCH-lyshet. Selv det øverste nivået skiller seg fra bakgrunnen med bare 1,60:1, så gi flater som må skille seg ut, en ramme på 1 px. I OKLCH kan du skrive det samme systemet uten overlegg: behold kroma og fargetone, og øk L med rundt 0,03 per nivå.

prefers-color-scheme og egenskapen color-scheme

Mediespørringen prefers-color-scheme forteller om operativsystemet er satt til lyst eller mørkt. Egenskapen color-scheme forteller nettleseren hvilke fargeskjemaer siden din støtter, så den kan tegne rullefelt, skjemaelementer og standardbakgrunnen i farger som passer.

Sett color-scheme på roten, og overstyr deretter fargevariablene dine inne i mediespørringen.

:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --surface: #f4f5f6;
    --text: #15171b;
    --text-muted: #6e7279;
    --link: #2f6bdf;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --surface: #1e1e1e;
        --text: #e5e5e5;
        --text-muted: #b2b2b2;
        --link: #a3c0f5;
    }
}

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

Uten color-scheme viser en mørk side fortsatt et lyst rullefelt og hvite inndatafelt i de fleste nettlesere. Det er én linje, og den er lett å glemme.

Funksjonen light-dark() i CSS

light-dark() tar to farger og returnerer den første i et lyst fargeskjema og den andre i et mørkt. Den har virket i alle store nettlesere siden 2024: Chrome og Edge 123, Firefox 120 og Safari 17.5. Den leser egenskapen color-scheme: uten color-scheme: light dark returnerer den alltid den lyse verdien.

Hver farge deklareres én gang, ved siden av den mørke partneren sin, og et temabytte trenger bare å endre color-scheme.

:root {
    color-scheme: light dark;
    --bg: light-dark(#ffffff, #121212);
    --surface: light-dark(#f4f5f6, #1e1e1e);
    --text: light-dark(#15171b, #e5e5e5);
    --text-muted: light-dark(#6e7279, #b2b2b2);
    --link: light-dark(#2f6bdf, #a3c0f5);
    --primary: #2f6bdf;
    --on-primary: #ffffff;
}

:root[data-theme='light'] {
    color-scheme: light;
}

:root[data-theme='dark'] {
    color-scheme: dark;
}

På bakgrunnen av siden består hver tekstfarge i denne blokken AA i begge temaene. I det lyse temaet: tekst 17,94:1, dempet tekst 4,83:1, lenker 4,90:1. I det mørke temaet: tekst 14,87:1, dempet tekst 8,84:1 med Lc -60,1, lenker 10,18:1. Du kan sjekke dine egne par i kontrastsjekken i PickShade, som viser WCAG 2 og APCA side om side.

Spørsmål og svar