Waarom kleur de gebruiksvriendelijkheid van jouw webdesign ondermijnt
Het is vanzelfsprekend dat je wilt dat zo veel mogelijk bezoekers gebruik kunnen maken van jouw website. Maar wist je dat 8% van alle mannen en 0,5% van alle vrouwen kleurenblind is? Er zijn een aantal soorten kleurenblindheid, waarvan deuteranomalie (kleurenzwakte voor groen) de meest voorkomende is. Maar je hebt ook mensen die helemaal geen kleuren kunnen zien (achromatopsie). Zoals je kunt begrijpen wil je ook deze bezoekers tegemoet komen, maar hoe doe je dat?
Onduidelijkheid door kleur
Om duidelijk te maken dat elementen klikbaar zijn kunnen ontwerpers veel manieren gebruiken om dit te communiceren. Een van die methoden is het inzetten van kleur. Maar kleuren kunnen door kleurenblindheid op elkaar lijken of wegvallen tegen de achtergrond.
Grafieken en datavisualisaties zijn vaak ook afhankelijk van kleur. Maar als een gebruiker maar een beperkt aantal kleuren kan zien, kan het gebeuren dat de website niet gebruiksvriendelijk is. Kijk maar eens naar dit voorbeeld:
Dit probleem noemen we kleurafhankelijkheid. Dat wil zeggen: de mogelijkheid voor goede interactie met de website is afhankelijk van het kunnen zien van alle kleuren. Gelukkig zijn er manieren om dit op te lossen. Dit noemen we kleuronafhankelijkheid. Maar hoe zorg je ervoor dat jouw website kleuronafhankelijk is?
Oplossingen
Hier volgen enkele manieren om kleuronafhankelijkheid te realiseren. Het correct aanhouden van de minimale contrasteisen van de WCAG 2.1(link naar artikel) is in ieder geval al een eerste goede stap.
1. Links beter vormgeven
De meest voorkomende vorm van kleurafhankelijkheid op het internet is het stijlen van links in een tekst met enkel een andere kleur. Zie hier een voorbeeld van één van de meest bezochte sites op het internet:
Deze keuze is bewust gemaakt door Wikipedia voor toegankelijkheidsdoeleinden. Het is ook wel te zien als de gebruiker kleurenblind is, maar voor optimale toegankelijkheid zou de tekst onderstreept moeten worden omdat er weinig contrast is tussen de zwarte tekst en de blauwe kleur van de linktekst.
Het is wel slim dat de kleur blauw wordt gebruikt, omdat die makkelijk te zien is voor de meeste kleurenblinden. Dit is de meest gebruikte manier om links aan te duiden. Volgens de WCAG is onderstrepen niet verplicht (enkel op hover en focus states), maar het wordt wel aangeraden. Zo zouden links op Wikipedia eruitzien als ze onderstreept zouden zijn:
2. Formulierfeedback duidelijker maken
Veel formulieren op het web geven feedback tijdens het invoeren. Zo worden wachtwoorden soms direct gecontroleerd en is er vaak een foutmelding als er een foutief e-mailadres wordt ingevoerd. Voor deze feedback-berichten worden vaak de kleuren groen en rood gebruikt. Maar zoals eerder genoemd hebben de meeste kleurenblinden moeite om groen en rood van elkaar te kunnen onderscheiden. Zie het volgende voorbeeld:
Dit is natuurlijk niet gebruiksvriendelijk. Maar het is simpelweg op te lossen door een icoon en een goede foutmeldingsbeschrijving toe te voegen. Zie het volgende voorbeeld:
Zo kan iedereen je formulier makkelijk gebruiken en realiseer jij meer conversie!
3. Knoppen duidelijk maken
Als gekleurde knoppen worden gebruikt in combinatie met andere niet-interactieve elementen die er op lijken kan dat problemen opleveren. Vooral als er enkel met de kleur wordt gecommuniceerd dat het een knop is. Het is dus belangrijk om naast kleur ook op andere manieren te communiceren dat het een knop betreft. Dit kun je doen door:
- Labels in tekstvakken dikgedrukt te maken.
- Het achtergrondvlak te vullen met een voldoende contrasterende kleur of omlijning.
- Schaduw toevoegen (ook bij hover state).
- Ander (schreefloos) lettertype gebruiken.
- Geen andere niet-klikbare elementen op dezelfde manier vormgeven.
4. Patronen in datavisualisaties toepassen
Vraag menigeen een grafiek of tabel te tekenen, en ze zullen de datapunten visualiseren met kleurenlijnen of -balken. Dit is echter heel erg ontoegankelijk: de verschillende kleurenlijnen en -balken kunnen moeilijk te onderscheiden zijn waardoor opzoeken in de legenda ook moeilijk is. Hier kun je zien hoe onduidelijk deze diagrammen van het CBS voor kleurenblinden zijn:
Bij cirkel- en staafdiagrammen is dit makkelijk op te lossen door een patroon te tekenen in de verschillende vlakverdelingen. Zorg ervoor dat dit patroon genoeg contrast heeft met de achtergrond, en dat het ook in de legenda duidelijk zichtbaar is. Zie het volgende voorbeeld:
Beter, toch? In lijndiagrammen kunnen we ook patronen toevoegen, maar dan in de vorm van lijntypes. Of we kunnen de lijnen verschillende diktes geven. Zoals dit:
Veel gebruikers die niet kleurenblind zijn zullen je vertellen dat ze dit ook als veel duidelijker ervaren!
5. Je site eerst in grijstinten laten ontwerpen
Al deze tips zijn heel makkelijk door te voeren als je eerst je website in grijstinten laat ontwerpen, en daarna pas kleur gaat toevoegen. Dan weet je zeker dat je ontwerp kleuronafhankelijk is. Daarnaast zijn designs zonder kleur makkelijker aan te passen waardoor je het ontwerpproces versnelt en verbetert.
6. Testen, testen, testen - verbeteren!
Je kunt een kleurenblindheidssimulator gebruiken om je website te beleven als een kleurenblinde gebruiker. Controleer of je site nog goed te gebruiken is en verander wat niet duidelijk is en niet goed werkt.
Om er echt achter te komen of je site gebruiksvriendelijk is voor verschillende gebruikers is er één methode die boven alles uitsteekt: testen met echte gebruikers! Om ware toegankelijkheid te bereiken is het van belang dat je met een diversiteit aan gebruikers test.
Gebruik toch lekker kleur
Je vraagt je nu misschien af: betekent dit dat je helemaal geen kleur meer mag toepassen op je site? Zeker niet, in tegendeel! Kleur heeft enorm veel invloed op de gebruikerservaring (link naar artikel). Zorg er dus voor dat:
- Eerst alles duidelijk is zonder kleurafhankelijk te zijn...
- ...en maak vervolgens de gebruikerservaring nóg beter door kleuren toe te passen!
Kleuren hebben natuurlijk ook veel effect op de uitstraling van je merk. Zorg er echter wel voor dat je de juiste kleuren uitkiest (link naar artikel kleuren op site).
Meer lezen over toegankelijkheid?
Laat hieronder je e-mailadres achter en download onze gratis whitepaper over toegankelijkheid. In deze whitepaper leer je van alles over toegankelijkheid: wat het is, wat de standaard richtlijnen zijn, hoe jij je website praktisch toegankelijk kan maken en nog veel, veel meer.
