Let op voorkeursinstellingen voor kleur ​
Gebruikers kunnen hun kleurvoorkeuren instellen via hun besturingssysteem of browser, waardoor de visuele ervaring van een webpagina kan variëren. Het is belangrijk om deze voorkeuren te respecteren en ervoor te zorgen dat onze platforms zich aanpassen aan verschillende visuele instellingen.
1. Verschillende voorkeursinstellingen ​
Aangepast Kleurenthema ​
Veel gebruikers geven de voorkeur aan een donker kleurenthema (dark mode) of een licht kleurenthema (light mode). Deze voorkeur kan via systeeminstellingen of browseropties worden aangegeven. Het is belangrijk om te detecteren welk kleurthema de gebruiker verkiest, zodat je de juiste visuele ervaring biedt.
Met behulp van de media query prefers-color-scheme kun je het kleurenthema detecteren en automatisch het juiste thema (licht of donker) toepassen. Hierdoor kunnen gebruikers de interface in hun voorkeursmodus bekijken.
Aangepast contrast ​
Sommige gebruikers geven de voorkeur aan meer contrast in de interface, terwijl anderen juist een zachter contrast willen. Dit kan bijvoorbeeld belangrijk zijn voor mensen met visuele beperkingen die moeite hebben met het onderscheiden van kleuren of tekst.
De media query prefers-contrast stelt je in staat te detecteren of de gebruiker een hoge of lage contrastinstelling heeft gekozen. Op basis hiervan kun je de interface aanpassen om deze voorkeur te ondersteunen. Bovendien kunnen gebruikers ook de Windows High Contrast Mode inschakelen voor nog meer contrast.
Afbeelding: Drie voorbeelden van hetzelfde scherm met verschillende kleurinstellingen: het eerste met een lichte modus, het tweede met een donkere modus en het derde met een hoog contrast.
2. Best Practices voor het ondersteunen van voorkeursinstellingen ​
- Detecteer en pas aan: Gebruik de
prefers-color-schemeenprefers-contrastmedia queries om te detecteren welke instellingen de gebruiker heeft gekozen. Pas je ontwerp automatisch aan op basis van deze voorkeuren. - Zorg voor voldoende contrast: Wanneer een gebruiker een hoge contrastinstelling heeft geselecteerd, zorg ervoor dat de interface duidelijk leesbaar blijft zonder dat de kleurervaring ongemakkelijk wordt.
- Test op verschillende instellingen: Test je ontwerp op zowel lichte als donkere thema’s en op verschillende contrastinstellingen om ervoor te zorgen dat het goed werkt voor alle gebruikers, ongeacht hun voorkeuren.
- Wees flexibel met kleuren: Gebruikers met een donkere modus kunnen moeite hebben met een te felle achtergrond of tekst. Zorg ervoor dat de kleuren voldoende afstemmen op de gekozen modus, zodat de leesbaarheid behouden blijft.
3. Gerelateerde WCAG-succescriteria ​
Onze ontwerpprincipes zijn gebaseerd op de Web Content Accessibility Guidelines (WCAG), die richtlijnen geven voor het verbeteren van de toegankelijkheid van webcontent. De volgende succescriteria zijn relevant voor het omgaan met kleurwaarneming: