Donkere modus en toegankelijkheid: wat u moet weten

Moet uw website een donkere modus hebben om toegankelijk te zijn? Het korte antwoord is nee. Het langere antwoord is interessanter. Dark mode en toegankelijkheid hebben wel met elkaar te maken, maar niet op de manier die vaak wordt aangenomen. Voor sommige bezoekers is een donkere weergave een verademing. Voor anderen is hij juist lastiger te lezen. En een slecht uitgevoerde donkere modus kan een site die eerst goed was, minder toegankelijk maken.

Wat WCAG zegt over een donkere modus

WCAG noemt dark mode nergens als eis. Er is geen criterium dat zegt dat u een donkere weergave moet aanbieden. Wat wel geldt: elke weergave die u aanbiedt, moet aan dezelfde eisen voldoen. Biedt u een donkere modus aan, dan moet die net zo goed het contrast halen als de lichte: 4,5:1 voor gewone tekst, 3:1 voor grote tekst en voor onderdelen zoals knoppen, invoervelden en focusranden.

Dat klinkt vanzelfsprekend, maar juist daar gaat het vaak mis. De lichte weergave wordt zorgvuldig ontworpen en getest. De donkere wordt er later bij gemaakt, soms automatisch, en niemand kijkt er nog goed naar.

Voor wie is een donkere weergave prettig?

• Mensen die gevoelig zijn voor licht, bijvoorbeeld door migraine, bepaalde oogaandoeningen of na een hersenschudding. Een groot wit vlak kan voor hen pijnlijk zijn.
• Sommige slechtziende bezoekers, die met lichte tekst op een donkere achtergrond minder last hebben van verblinding.
• Iedereen in een donkere omgeving, zoals ’s avonds op de bank.

En voor wie juist niet?

• Mensen met astigmatisme geven vaak aan dat lichte tekst op een donkere achtergrond lijkt uit te lopen of te gloeien. Dat maakt lange teksten vermoeiender.
• Lezers van lange teksten lezen volgens veel gebruikers prettiger in een lichte weergave bij normaal daglicht.
• Bezoekers die al een eigen instelling gebruiken, zoals hoog contrast in Windows of een omgekeerde kleurweergave. Een eigen donkere modus van de site kan daarmee botsen.

Conclusie: er is geen weergave die voor iedereen het best is. Het beste wat u kunt doen, is de bezoeker laten kiezen en beide weergaven goed maken.

prefers-color-scheme: volg de voorkeur van de bezoeker

Bezoekers stellen in hun besturingssysteem of browser in of ze een lichte of donkere weergave willen. Met de CSS-mediaquery prefers-color-scheme kan uw site die voorkeur volgen:

:root {
  --achtergrond: #ffffff;
  --tekst: #1f1f1f;
  --link: #0b57d0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --achtergrond: #121212;
    --tekst: #e8e8e8;
    --link: #8ab4f8;
  }
}

body { background: var(--achtergrond); color: var(--tekst); }
a { color: var(--link); }

Door alle kleuren als variabelen te definiëren, hoeft u ze maar op één plek aan te passen per weergave. Dat maakt het ook makkelijker om ze allemaal op contrast te controleren.

Wilt u daarnaast een knop op de site waarmee de bezoeker kan wisselen, zorg dan dat die knop een duidelijke naam heeft, met het toetsenbord werkt en dat de keuze wordt onthouden.

Waar het in de praktijk misgaat

Puur zwart en puur wit

Zuiver witte tekst op zuiver zwarte achtergrond heeft het hoogst mogelijke contrast, maar is voor veel lezers juist vermoeiend. Een donkergrijze achtergrond met lichtgrijze, niet helemaal witte tekst leest vaak rustiger en haalt nog ruim het vereiste contrast.

Merkkleuren die niet meedraaien

Een donkerblauwe huisstijlkleur die op wit prima contrast heeft, is op een donkere achtergrond nauwelijks zichtbaar. Links, knoppen en focusranden in die kleur verdwijnen dan. Voor de donkere modus heeft u meestal een lichtere variant van uw merkkleur nodig. Hoe u kleuren kiest die in verschillende situaties werken, leest u in kleuren kiezen voor uw website.

De focusrand verdwijnt

Een donkere focusrand die op een lichte site goed zichtbaar is, valt weg op een donkere achtergrond. Toetsenbordgebruikers raken dan kwijt waar ze zijn. Controleer de focus in beide weergaven; waarom die zichtbaar moet blijven, staat in zichtbare focus op uw website.

Afbeeldingen en logo’s

Een logo met zwarte tekst op een transparante achtergrond is onzichtbaar op een donkere pagina. Diagrammen en screenshots met een witte achtergrond worden felle vlakken. Zorg voor een lichte versie van het logo en overweeg afbeeldingen een rand of een eigen achtergrond te geven.

Ingesloten onderdelen

Formulieren van externe diensten, kaarten, chatvensters en cookiebanners volgen uw donkere modus vaak niet. Dan krijgt u een donkere pagina met een fel wit blok erin, of erger: donkere tekst uit het externe onderdeel op uw donkere achtergrond.

Automatische donkere modus

Sommige browsers en extensies kunnen een site automatisch donker maken, en ook sommige WordPress-plugins doen dat door kleuren om te keren. Het resultaat is wisselend. Een omgekeerde kleur kan precies het contrast verliezen dat u in de lichte weergave zo goed had.

Testen: twee keer, niet één keer

1. Zet uw besturingssysteem of browser op donker en open uw site. Volgt de site de instelling?
2. Controleer per weergave de kleuren van tekst, links, knoppen, invoervelden en randen met een contrastchecker.
3. Tab met het toetsenbord door een pagina, in beide weergaven. Is de focus steeds zichtbaar?
4. Bekijk afbeeldingen, logo’s, iconen en ingesloten onderdelen.
5. Draai een controle met een tool zoals WAVE of de toegankelijkheidscontrole in de ontwikkelaarstools, ook in de donkere weergave.

Moet u er dan aan beginnen?

Heeft u geen donkere modus, dan mist u niets wat WCAG vraagt. Uw eerste zorg is een lichte weergave met goed contrast. Wilt u een donkere modus toevoegen, bijvoorbeeld omdat uw doelgroep er veel om vraagt, behandel hem dan als een tweede ontwerp dat ook getest moet worden, en niet als een schakelaar die u aanzet.

Het contrast in beide weergaven goed krijgen zonder uw huisstijl op te geven, is precies het soort werk dat we beschrijven bij kleurcontrast van uw website verbeteren. De bredere aanpak voor een site die voor iedereen werkt, vindt u op toegankelijk maken volgens WCAG 2.2.