Mørk modus, ofte omtalt som dark mode, er ikke en negativ kopi av en lys side.

Når bakgrunnen endres, påvirkes også tekst, kantlinjer, kort, bilder, skygger, knapper og interaksjonstilstander. Et godt resultat krever at hele fargesystemet vurderes samlet.

Små avvik kan gi store lesbarhetsproblemer

En vanlig feil er at hovedbakgrunnen blir mørk mens enkelte seksjoner beholder lyse flater. Hvis teksten samtidig er endret til hvit, kan deler av innholdet bli svært vanskelig å lese.

Slike feil kan se ut som mindre CSS-problemer, men for brukeren er resultatet et direkte tilgjengelighetsproblem.

Kontrast gjelder flere elementer enn brødtekst

WCAG 2.2 beskriver minstekrav til kontrast for tekst. For vanlig tekst er hovedregelen minst 4,5:1, mens stor tekst kan ha minst 3:1.

W3C stiller også kontrastkrav til viktige ikke-tekstlige elementer, blant annet visuelle signaler som trengs for å forstå og bruke kontroller.

Tallene er et minimum, ikke en full kvalitetskontroll. En knapp kan ha tilstrekkelig kontrast i normal tilstand og samtidig få en svak fokusmarkering eller utydelig deaktivert tilstand.

Temaet må fungere i alle komponenter

Under arbeidet med mørk visning på samthomas.no viste mobilgjennomgangen at enkelte seksjoner fortsatt hadde lys bakgrunn etter at teksten var blitt hvit.

Feilen gjorde én ting tydelig: Det holder ikke å endre hovedbakgrunnen. Tekst, seksjonsflater og komponenttilstander må kontrolleres sammen.

Dette er en erfaring fra utviklingen av mitt eget nettsted, ikke en brukerstudie eller en dokumentasjon på full WCAG-samsvar.

Bilder trenger også en vurdering

Et bilde eller en illustrasjon som fungerer godt på lys bakgrunn, kan få en helt annen kontrast eller visuell tyngde i mørk modus.

Logoer med gjennomsiktig bakgrunn, skjermbilder, grafer og dekorative elementer bør derfor testes i begge temaer. I noen tilfeller er det nødvendig med egne varianter.

Test hele oppgaven i begge temaer

Kontrollen bør omfatte mer enn forsiden.

Gå gjennom tekst, lenker, ikoner, skjemaer, menyer, kort og bilder. Bruk tastatur og mus, og sjekk at fokus og tilstander er tydelige. Test også på en liten skjerm og med forstørret tekst.

Mørk modus er ferdig når hele grensesnittet fungerer som en sammenhengende løsning, ikke når bakgrunnen har fått en mørkere farge.