Elke designer weet hoe belangrijk kleurcontrast is voor de uitstraling van een merk of website. Het bepaalt de branding, spreekt een specifieke doelgroep aan, geeft informatie over het merk of het bedrijf en roept een gevoel op bij gebruikers.
Kleurcontrast is ook erg belangrijk voor de toegankelijkheid van de website. Het bepaalt namelijk in grote mate of gebruikers je website kunnen lezen en erop kunnen navigeren. Kleurcontrast is dus iets wat je niet over het hoofd wilt zien bij het ontwerpen van een website. Hoe dit precies samenhangt, wat de WCAG-richtlijnen hierover zeggen en hoe je als designer je contrast kunt ontwerpen en testen, dat leggen we in dit artikel uit.
Inhoudsopgave
Hoe bepaalt kleurcontrast de toegankelijkheid van je website?
Wanneer we het hebben over kleurcontrast, doelen we op het verschil in helderheid en kleur tussen twee elementen op een website. Denk bijvoorbeeld aan tekst op een bepaalde achtergrond of de kleur van klikbare links in een tekst.
Het belang van kleur, contrast en complementaire kleuren
Kleurcontrast is enorm belangrijk voor het functionele gebruik van een website. Hoe groter het kleurcontrast is, hoe makkelijker een website kan worden gebruikt en hoe duidelijker bepaalde functies op een website zijn. Kleurcontrast is dus niet alleen esthetisch belangrijk, maar heeft ook invloed op gebruik in bepaalde situaties.
- Mensen met slecht zicht hebben meer contrast nodig om vormen en letters te onderscheiden.
- Mensen die kleurenblind zijn kunnen bepaalde kleuren niet of nauwelijks zien.
- Bij gebruik van een website bij fel zonlicht vallen bepaalde kleuren weg.
- Oudere mensen zijn minder contrastgevoelig en hebben een duidelijk contrast nodig.
- Bij vermoeidheid kost het verwerken van een laag contrast extra energie.
Kleurcontrast in de praktijk
Er is echter niet één ‘juiste’ manier om een hoog kleurcontrast te creëren. Een van de meest gebruikte kleurtheorieën is de theorie van Johannes Itten. Hij maakt onderscheid tussen zeven kleurcontrasten.
Kleur-in-zichzelf contrast
Het kleur-in-zichzelf contrast houdt in dat twee zuivere en felle kleuren worden gecombineerd. Het eenvoudigste kleurcontrast ontstaat als enkelvoudige kleuren met de grootste zuiverheid tegen elkaar aan te zetten. Wanneer er twee verschillende kleuren worden gekozen die ver uit elkaar liggen op de kleurencirkel, zoals de primaire kleuren rood, geel en blauw, kan het contrast erg hoog zijn. Er is echter weinig nuance in dit type contrast.
Complementair contrast
Wanneer twee complementaire kleuren met elkaar worden gecombineerd, spreken we van een complementair contrast. Dit betreft kleuren die tegenover elkaar liggen op de kleurencirkel, waardoor het contrast erg sterk is en de kleuren elkaar versterken.
Licht-donkercontrast (helderheidscontrast)
Bij licht-donker contrast wordt een lichte kleur tegenover een donkere kleur geplaatst. Een goed voorbeeld hiervan is de combinatie zwart-wit. Een sterk licht-donker contrast is opvallend en goed te lezen. Hierdoor wordt het licht-donker contrast vaak gebruikt.
Warm-koud contrast
In een warm-koud contrast worden zogenaamde ‘koude’ kleuren gecombineerd met ‘warme’ kleuren om zo een intens effect te creëren. De combinatie van kleuren roept specifieke emoties op, zoals rood voor energie en blauw voor vertrouwen, en hier maakt het warm-koud contrast gebruik van.
Kwaliteitscontrast
Een kwaliteitscontrast, ook wel bekend als een verzadigingscontrast of een intensiteitscontrast, is een contrast tussen verzadigde kleuren en minder verzadigde kleuren. Onverzadigde tinten verdwijnen namelijk sneller naar de achtergrond, waardoor verzadigde kleuren eruit springen. Hetzelfde effect kan worden bereikt door de helderheid van de kleur aan te passen, zoals het creëren van troebele kleuren.
Kwantiteitscontrast
Kwantiteitscontrast betekent dat er een contrastverschil ontstaat door kleuren in verschillende hoeveelheden te gebruiken. Dit wordt ook wel een gebiedscontrast genoemd.
Simultaan contrast
Een simultaan contrast, oftewel een gelijktijdig contrast, ontstaat wanneer een bepaalde kleur wordt beïnvloed door zijn omgeving. Het is een soort van subjectieve aanpassing van de kleur doordat onze hersenen de waarneming beïnvloeden. Het is een optisch fenomeen waar gebruik van kan worden gemaakt.
WCAG-richtlijnen voor kleurcontrast
Om de toegankelijkheid van websites te vergroten, zijn diverse richtlijnen opgesteld. De richtlijnen voor kleurcontrast zijn vastgelegd in de WCAG, oftewel de Web Content Accessibility Guidelines. Dit zijn internationale richtlijnen voor de digitale toegankelijkheid en is de standaard.
De 4 principes van WCAG
De WCAG stoelt op 4 belangrijke principes:
- Waarneembaarheid: de content van een website of app moet voor iedereen waarneembaar zijn.
- Bedienbaarheid: de website of app moet voor iedereen bedienbaar zijn.
- Begrijpelijkheid: de content van de website of app moet voor iedereen te begrijpen zijn.
- Robuustheid: de website of app moet door iedereen kunnen worden gebruikt, ook met nieuwe technologieën.
De richtlijnen van WCAG
De 4 principes van WCAG zijn veelzeggend, maar ook vrij globaal. Om deze principes te vertalen in duidelijke doelstellingen, zijn er 13 richtlijnen ontwikkeld met daaraan gekoppelde succescriteria. Hiermee kunnen designers en developers gericht aan de slag om de toegankelijkheid van hun platform te verbeteren en het kleurcontrast te optimaliseren.
WCAG proof
Een website of app voldoet aan de WCAG-norm wanneer deze aan de succescriteria van WCAG A en AA voldoet. Er wordt namelijk onderscheid gemaakt tussen WCAG A, WCAG AA en WCAG AAA.
WCAG A behelst de noodzakelijke succescriteria, 30 stuks in totaal. Als een website of app niet aan deze criteria voldoet, is het onmogelijk voor bepaalde mensen of groepen om het platform te gebruiken.
WCAG AA behelst niet alleen de noodzakelijke succescriteria, maar ook de wenselijke succescriteria. Hier komen 20 aanvullende succescriteria bij om de toegankelijkheid meer te vergroten en om volgens Europese en Nederlandse wetgeving te worden gezien als toegankelijk.
WCAG AAA behelst de succescriteria van WCAG A en WCAG AA en 28 aanvullende succescriteria. Websites en apps op dit niveau zijn heel toegankelijk en zorgen er actief voor dat bepaalde groepen mensen de content makkelijk kunnen lezen en gebruiken. De succescriteria van WCAG AAA zijn optioneel, maar wel van toegevoegde waarde.
Contrast volgens de WCAG
We weten nu dat de WCAG richtlijnen biedt voor toegankelijkheid en contrast en dat elke website en app hieraan getoetst kan worden. Maar wat zijn die richtlijnen en succescriteria nu precies?
Contrastverhouding
Een contrastverhouding geeft aan hoeveel lichter de ene kleur is dan de andere kleur in een tekst of op een website. Een normale tekst heeft volgens de WCAG een contrastverhouding van 4,5:1. Een grote tekst heeft een verhouding van 3:1, net als UI-elementen en grafische elementen. Hierbij is een grote tekst een tekst van meer dan 24px normaal gewicht of 18,66px in bold.
UI-componenten
Volgens WCAG moet elk element op de website of in de app visueel te onderscheiden zijn. Het is dus belangrijk dat icon-only buttons duidelijk zichtbaar zijn, dat er gebruik wordt gemaakt van hover- en active-states met voldoende contrast en dat focusranden goed zichtbaar zijn.
Vertrouw niet enkel op kleur
Het is in de WCAG duidelijk vastgelegd dat designers niet enkel op kleur moeten vertrouwen om contrast te creëren. Complementaire kleuren of twee kleuren die elkaar ondersteunen zijn belangrijk, maar niet altijd voldoende. Er zijn, zoals we in dit artikel hebben kunnen lezen, volop manieren om contrast te creëren met kleuren, maar er zijn meer manieren om contrast te creëren en de toegankelijkheid te vergroten.
Stappenplan voor toegankelijkheid voor designers
Wil je actief aan de slag met kleurcontrast op je website of in je app? Maak dan een vliegende start met dit stappenplan.
- Start met je kleurenpalet en gebruik de tips uit dit artikel voor complementaire kleuren, contrasterende kleuren en handig gebruik van kleurcontrast.
- Kies de kleur van je tekst heel bewust en gebruik complementaire kleuren of contrasterende kleuren om je tekst eruit te laten springen.
- Check alle states op je website en zorg dat ze allemaal voldoen aan de WCAG richtlijnen.
- Controleer de links in teksten en zorg dat ze zich onderscheiden.
- Laat foutmeldingen er altijd uitspringen, niet alleen door kleur, maar ook door tekst en iconografie.
- Houd rekening met de dark mode van je website. Hier gelden contrastregels juist extra.
- Test je website of je app in elke modus en op elk scherm voor een realistische beleving.
Wil je meer van dit soort inzichten ontvangen?
Schrijf je in voor de nieuwsbrief van Digitaal Toegankelijk.
