Dark mode: toegankelijk of niet?

De ‘dark mode’ is in de basis een kleurenschema waarmee je een interface van kleur verandert. Naar een donkere achtergrond met daarop lichtere letters. Dit onderscheid in kleur is als functie niet nieuw. Sterker nog, de allereerste computerschermen in de 70’er jaren hadden standaard een donker scherm. En letters in een kleur. Bijvoorbeeld groen. Of oranje.

Met dank aan de ‘techreuzen’ Google (Android 10), Apple (iOs 13), Windows (‘Night mode’ in Windows 7) en Slack kreeg het donkere kleurenschema rond 2019 meer aandacht. Met name door Apple: de donkere modus geeft meer focus en creëert rust voor de ogen (aldus Apple). Aandacht hiervoor neemt het afgelopen jaar tijdens het vele thuiswerken in de lockdown toe. Maar er zijn meer redenen die genoemd worden waarom het goed is om de dark-modus te gebruiken:

• Het zorgt voor overzicht en rust. Dit is bijvoorbeeld de reden dat developers de donkerder kleurenschema’s al langer gebruiken.
• Donkere kleuren kosten minder energie. Voordelig voor de batterij van je smartphone en voor je energieverbruik. Al bestaat er twijfel over de hoeveelheid besparing (deze lijkt namelijk minimaal).
• Donkere kleuren zijn toegankelijker.

‘Whitehouse.gov’ is een aardig voorbeeld waarbij toegankelijkheid en publiciteit samengaan. Het team van Biden heeft namelijk in krap zes weken deze website met name op toegankelijkheid onder handen genomen. Een van de aanpassingen is een permanent aanwezige knop aan de linkerkant waarmee je kunt wisselen tussen een donkere en lichte modus en een groter of kleiner lettertype. Waarbij ik me wel afvraag waarom ze ‘high contrast’ als term gebruiken voor de ‘dark mode’.

Ook de manier waarop de Volkskrant de laatste update van hun app introduceert is veelzeggend of juist erg verwarrend. Het is maar net hoe je het leest (zie afbeelding hieronder).

Dat een donkerder kleurenschema kan helpen je website of app toegankelijker te maken klopt. Maar er zijn veel nuances te maken. Hieronder een paar van de belangrijkste inzichten, opgedaan na een korte ronde langs verschillende online bronnen.

Omgekeerd kleurenschema
Algemeen geldt dat het omkeren van een kleurenschema van licht naar donker niet meteen een hoog contrast oplevert dat toegankelijk is voor iedereen. Wel voldoen veel omgekeerde contrasten vaak op hoofdlijn aan de (belangrijkste) WCAG-richtlijnen. Maar gaat het fout op details. Het lichte kleurverschil bijvoorbeeld tussen hyperlinks en normale tekst is onvoldoende duidelijk. Of een navigatie-structuur valt te veel weg tegen de achtergrond. ’Dark mode’ bestaat dus niet alleen uit omgekeerde kleuren, maar uit een bewust en specifiek gekozen goed van elkaar verschillend kleurenschema.

Helpt niet bij cilindrische afwijking?
Er is een groep voor wie de dark mode minder toegankelijk lijkt te werken. Dit verklaart ontwerper H. Locke. Hij heeft ervaren dat hijzelf door zijn cilindrische afwijking (astigmatisme) in een donkerder kleurenschema alles juist extra ‘geblurred’ of wat ‘wazig’ zien. In Nederland heeft grofweg de helft van de mensen astigmatisme (en gebruikt hiervoor een bril of lenzen). Waarschijnlijk heeft van deze groep mensen niet iedereen de ervaring van wazig zien. Opmerkelijk blijft dat de dark mode hier voor het tegenovergestelde lijkt te zorgen van een toegankelijke website of app.

Helpt wel bij vertroebeling ooglens?
Weer een andere groep lijkt wel gebaat bij een donkerder kleurenschema. Namelijk mensen met een andere visuele beperking. Zoals bijvoorbeeld mensen met een vertroebeling van de ooglens waardoor hun zicht vermindert (cataract). Zo haalt Raluca Budia van Norman Nielsen aan onderzoeken aan die aantonen dat een dark mode voor mensen met visuele beperkingen handig zijn. En er bij een keuzemogelijkheid tussen licht en donker door hen vaker voor donker wordt gekozen. Kanttekening hierbij is dat deze onderzoeken wat gedateerd zijn.

Licht versus donker
Tegelijkertijd zijn er ook onderzoeken gedaan rondom een lichter kleurenschema. In hetzelfde artikel van Norman Nielsen (bronvermelding in de vorige alinea) wordt aangegeven dat het gunstige effect van een lichter kleurschema stijgt gedurende de avond of nacht. Omdat het daglicht stimuleert, zorgt het voor betere (lees)prestaties. Maar ook hier zien de onderzoekers dat lange termijn effecten van het gebruik van een lichter kleurschema onvoldoende zijn onderzocht. En wellicht ook van doen hebben met bijziendheid.

Als je besluit om dark mode als functionaliteit toe te voegen aan je digitale product, betekent dit vooral dat je twee versies van hetzelfde ontwerp maakt. Eentje zonder en eentje met dark modus. Onderstaande punten zijn ook goed om mee te nemen:

1. Bekijk de voorwaarden: Voor kleurgebruik/contrast worden deze officieel opgesteld door het WCAG. Voorwaarden die overigens in de aankomende nieuwe 3.0 versie aangepast gaan worden (ook hier wordt nieuw inzicht toegepast).
2. Doe een contrast check: Hiervoor zijn talloze add-ons of plugins voor Photoshop & Figma. Twee bekende zijn de eenvoudige Webaim en aremycolorsaccessible direct vanuit je browser. Of het deels gratis/deels betaalde Stark voor Figma, Sketch, Adobe Xd en Google Chrome.
3. Zorg voor hiërarchie: Hoogte en diepte zijn in het ontwerp de voornaamste elementen. Een van de vuistregels is dat hoe hoger een ontwerplaag, hoe lichter deze moet zijn. Dit zorgt weer voor meer duidelijk over welke informatie het belangrijkst is.
4. Maak wisselen makkelijk: Biedt de gebruiker in de interface de keuze tussen de verschillende opties. En communiceer hier duidelijk over. Een website of app gebruiker moet altijd en overal makkelijk kunnen wisselen. Tussen kleurenschema’s en andere opties. En onthoud eventueel deze keuze voor de gebruiker.

Een mooi voorbeeld van dit laatste is nrc.nl. Hier wordt de instelling van je mobiele apparaat overgenomen en gekoppeld aan de vraag of je deze dark mode instelling ook wilt gebruiken voor de website. Eenmaal gekozen, wordt de instelling onthouden.

De dark mode is een mooi stokpaardje voor toegankelijkheid. Met dank aan de publiciteit vanuit een Apple, Google en Microsoft. En dat heeft gezorgd voor (meer?) bewustwording. Met als gevolg meer bedrijven die het toepassen en waarschijnlijk meer website-bezoekers die het gebruiken.

Maar is een dark mode nu toegankelijk of niet? Nee, dat is het niet. Niet voor iedereen. Het is onmogelijk om voor iedere individuele bezoeker 100% toegankelijk te ontwerpen (vanaf het eerste bezoek aan je website of gebruik van je app). Ook lijkt er qua onderzoek nog te veel verschil te zijn in uitkomsten voor een sluitende conclusie. En dat is misschien ook best prima. Er is geen enkele oplossing die voor iedereen even goed werkt (visueel beperkt of niet).

Mijn (tussentijdse) advies op dit moment? Zorg dat de dark mode een voorkeursinstelling voor de gebruiker van je website of app is. De gebruiker kan op basis van persoonlijke voorkeur en gewenste effect zelf kiezen voor het gebruik van de instelling. En op die manier helpt het de ene bezoeker heel goed de website toegankelijker maken en kan de andere bezoeker het links laten liggen.

Deze keuzevrijheid past bij de ontwikkeling op wat breder vlak dat mogelijkheden die de toegankelijkheid verhogen op een website of binnen een app voorkeursinstellingen zijn. Zoals bijvoorbeeld de optie om de tekstgrootte van de browser of je telefoon aan te passen (die veel gebruikt wordt), animaties uit te schakelen (bijvoorbeeld voor mensen met epilepsie) of om te kiezen voor een website-weergave die minder data gebruikt (zodat hij sneller laadt op momenten dat het internet minder stabiel is).

Twijfel je? Test de dark mode dan eens op een kleiner, relevant gedeelte van je website of dienst. Leer van de implementatie (qua investering in tijd en geld) en het gebruik door je bezoekers in het klein. Voordat je het verder doorvoert.