Hele grensesnittet må vurderes
Dark mode er ikke en enkel negativ versjon av en lys side. Når bakgrunnen endres, påvirkes tekst, kantlinjer, kort, bilder, skygger, knapper og alle tilstander mellom dem.
En vanlig feil er at hovedbakgrunnen blir mørk mens en seksjon beholder en lys verdi. En annen er hvit tekst på en flate som også blir lys. Begge kan se ut som små CSS-feil, men de kan gjøre innholdet vanskelig eller umulig å lese.
Kontrast gjelder mer enn brødtekst
WCAG 2.2 beskriver minstekrav til kontrast for tekst. For vanlig tekst er forholdet minst 4,5:1, mens stor tekst kan ha minst 3:1. W3C beskriver også kontrast for viktige ikke-tekstlige elementer, blant annet grenser og visuelle signaler som trengs for å forstå og bruke kontroller.
Tallene er en start, ikke hele kvalitetskontrollen. En knapp kan oppfylle et forhold og fortsatt ha en svak hover- eller fokusmarkering. Alle tilstander må vurderes: normal, hover, fokus, aktiv og deaktivert.
En konkret erfaring fra samthomas.no
Under arbeidet med mørk visning på dette nettstedet viste mobilbilder at enkelte seksjoner fortsatt hadde lys bakgrunn, mens teksten var blitt hvit. Hovedbakgrunnen hadde skiftet, men hele fargesystemet fulgte ikke med.
Det ga en konkret feil å rette: tekst og seksjonsflater måtte vurderes sammen. Erfaringen viser hvorfor jeg kontrollerer hele sider og komponenttilstander når jeg arbeider med temaer.
Dette er en erfaring fra utviklingen av mitt eget nettsted. Den er ikke en brukerstudie eller dokumentasjon på at nettstedet oppfyller alle tilgjengelighetskrav.
En praktisk test
Gå gjennom siden i begge modi og kontroller hver komponent, ikke bare forsiden. Se etter flater som fortsatt bruker faste lyse eller mørke farger. Test tekst, lenker, ikoner, skjema, meny, kort og bilder.
Bruk deretter tastatur og mus. Kan fokus og hover sees tydelig? Prøv også en liten mobilskjerm og økt tekststørrelse. En god dark mode er ferdig først når hele oppgaven fungerer, ikke når bakgrunnen har blitt mørk.