Je hebt een website, presentatie of app opgeleverd en iemand vraagt: “Is dit eigenlijk goed leesbaar voor mensen die kleuren anders zien?” Een eerlijke vraag, en vaak weet je het antwoord niet zeker. Een lichtgrijze tekst op wit zag er in het ontwerp stijlvol uit — maar of die voor meer mensen leesbaar is, heb je nooit gemeten.
Een toegankelijkheidsscan op kleur volgt een vaste volgorde van stappen, met gratis tools die in Nederlandse en Belgische toegankelijkheidsbronnen terugkomen. Hieronder vind je wat je precies test, welke tools daarbij helpen en hoe je de uitkomsten blijvend verwerkt.
Wat een toegankelijkheidsscan op kleur controleert
Bij kleur gaat een scan om twee vragen die vaak door elkaar lopen. De eerste: is het contrast tussen tekst en achtergrond groot genoeg? De tweede: leunt de betekenis van iets op kleur alléén?
De Web Content Accessibility Guidelines (WCAG) kennen hiervoor aparte succescriteria. Criterium 1.4.3 gaat over het contrast van tekst, criterium 1.4.11 over het contrast van niet-tekstuele onderdelen. Criterium 1.4.1 stelt dat informatie nooit uitsluitend via kleur mag worden overgebracht.
Voor gewone tekst geldt volgens de Belgische overheidsrichtlijn dat de contrastverhouding tussen tekstkleur en achtergrondkleur ten minste 4,5:1 moet zijn (accessibility.belgium.be, per september 2026). Let op: dit is de grenswaarde voor gewone tekst. Grote tekst heeft in WCAG een eigen grenswaarde.
Criterium 1.4.11 geldt voor relevante gebruikersinterfacecomponenten en betekenisdragende grafische objecten — niet automatisch voor ieder icoon of iedere knop. Raadpleeg voor de exacte grenswaarden en conformiteitsniveaus de WCAG-richtlijn zelf, als primaire bron naast de hier genoemde websites.
Belangrijk om te beseffen: een contrastmeting en de controle op kleurafhankelijke betekenis zijn twee verschillende toetsen. Een voldoende contrastverhouding is geen bewijs dat criterium 1.4.1 wordt gehaald. Daarom heeft een goede scan altijd beide onderdelen.
Stap 1: Inventariseer alle kleurcombinaties
Voordat je gaat meten, breng je in kaart wát je meet. Loop je product door en noteer elke combinatie van voorgrond en achtergrond die informatie draagt.
Denk aan:
- Lopende tekst op de achtergrondkleur van de pagina
- Tekst op knoppen, in menu’s en in voetteksten
- Placeholder-tekst in formuliervelden
- Linkkleuren binnen lopende tekst
- Iconen, focusranden en statusindicatoren
- Grafieken, kaarten en legenda’s
Noteer ook de verschillende toestanden: hover, focus, uitgeschakeld, en tekst over afbeeldingen of overlays. Zet de combinaties in een eenvoudige tabel met de hex-waarden, als je die hebt. Ken je de exacte waarden niet, dan is dat geen probleem: sommige tools werken met een pipet waarmee je direct van het scherm meet.
Stap 2: Meet het contrast met een gratis tool
Er zijn drie categorieën tools die in de Nederlandse toegankelijkheidsbronnen terugkomen: een losse desktoptool, ingebouwde browserfuncties en online checkers. Welke je kiest hangt af van je werkomgeving.
Colour Contrast Analyser (TPGi)
Proper Access beschrijft de TPGi Colour Contrast Analyser als een gratis tool om te controleren of de kleuren op je website genoeg contrast hebben volgens de WCAG-richtlijnen. Je downloadt en installeert het programma, opent het naast je webpagina of document en kiest met een pipet de voorgrond- en achtergrondkleur (properaccess.nl, per september 2026).
MKB Toegankelijk voegt daaraan toe dat de kleurwaarden bij deze tool niet vooraf bekend hoeven te zijn. Als nadeel noemen zij dat de tool vaak niet op computers gebruikt kan worden die veiligheidsblokkades hebben tegen het installeren of uitvoeren van onbekende software (mkbtoegankelijk.nl, per september 2026). Werk je op een beheerde werkplek, dan is een browsertool waarschijnlijk praktischer.
Ingebouwde browsertools
Volgens Aally heeft Chrome in de developer tools een Color Picker waarmee je kleurcontrast kunt bepalen en verbeteren (aally.nl, per september 2026). Je opent de developer tools, selecteert een tekstelement en klikt op het kleurvakje bij de tekstkleur.
Firefox heeft voor webontwikkelaars de Accessibility Inspector gemaakt. Daarmee kan een ontwikkelaar of ontwerper onder meer bekijken of het contrast tussen tekst en achtergrond voldoende is (mkbtoegankelijk.nl, per september 2026). Gebruik je een van deze browsers al, dan hoef je voor deze controle niets extra te installeren.
Online contrastcheckers
Ken je de hex-waarden uit stap 1, dan kun je die invoeren in een online contrastchecker. Handig bij het opstellen van een huisstijl, minder handig als je live op een pagina wilt meten. Let bij het kiezen op: ondersteunt de tool zowel criterium 1.4.3 als 1.4.11, en kun je resultaten eenvoudig exporteren of vastleggen?
Werk je resultaten per combinatie bij in je tabel: gemeten verhouding, en of die aan de norm voldoet. Zo ontstaat vanzelf een lijst met wat wel en niet moet worden aangepast.
Stap 3: Controleer of betekenis niet alleen via kleur loopt
Een numerieke contrastchecker beoordeelt dit onderdeel niet zelfstandig. Controleer daarom handmatig plekken als: een foutmelding die alleen rood kleurt, een grafiek met uitsluitend gekleurde lijnen, een “verplicht veld” dat alleen een gekleurd randje krijgt. Contrast en betekenis zijn twee losse controles.
Stel bij elk gekleurd element één vraag: als ik de kleur wegdenk, weet ik dan nog wat hier bedoeld wordt? Een praktische heuristiek is een schermafbeelding tijdelijk naar grijswaarden zetten en kijken wat er van de informatie overblijft. Let wel: deze truc helpt om risico’s op te sporen, maar bewijst geen conformiteit met criterium 1.4.1.
Waar het antwoord “nee” is, voeg je een tweede drager toe: een icoon, een tekstlabel, een patroon of arcering in grafieken, een onderstreping bij links. Kleur mag ondersteunen, maar mag nooit de enige aanwijzing zijn.
Stap 4: Bekijk je ontwerp door een kleurzichtsimulator
Contrast en betekenis heb je nu getest. De laatste controle richt zich op kleurcombinaties die bij bepaalde kleurzichtprofielen kunnen samenvallen. Denk aan rood en groen naast elkaar in een legenda, of blauw en paars als categoriekleuren.
De KLEURLENS-simulator is een educatief hulpmiddel dat bedoeld is om te benaderen welke kleurverschillen kunnen samenvallen bij verschillende profielen. De simulator gebruikt daarbij de gangbare terminologie: bij dichromasie (protanopie, deuteranopie, tritanopie) functioneert één type kegeltje niet of is het functioneel afwezig; bij anomale trichromasie (protanomalie, deuteranomalie, tritanomalie) wijkt de spectrale gevoeligheid van één type kegeltje af.
Goed om te weten: de term “kleurenblind” wekt de indruk dat iemand geen kleur ziet. In de profielen die de simulator gebruikt gaat het niet om het ontbreken van alle kleurwaarneming, maar om bepaalde kleurverschillen die kunnen samenvallen. Een simulatie is geen weergave van iemands exacte, subjectieve waarneming.
Gebruik de simulator zo: laad een schermafbeelding van je ontwerp, loop de verschillende profielen langs en let op plekken waar onderscheid lijkt weg te vallen. Vind je zo’n plek, dan ga je terug naar stap 3 en voeg je een tweede drager toe. Een simulator is een aanvullende indicatie, geen WCAG-test: het doel is om kleur nooit alleen te laten werken.
Stap 5: Verwerk de uitkomsten in je huisstijl
Zonder verankering sluipen oude problemen bij de volgende nieuwe pagina gemakkelijk weer binnen. MKB Toegankelijk adviseert daarom om contrast direct mee te nemen in de huisstijl (mkbtoegankelijk.nl, per september 2026).
Concreet betekent dat: leg in je huisstijlgids per kleur vast op welke achtergronden die gebruikt mag worden voor tekst, en op welke niet. Voeg goedgekeurde combinaties toe als kant-en-klare paren, zodat een redacteur of ontwerper niet zelf hoeft te rekenen.
Neem ook de afspraak op dat statussen, categorieën en waarschuwingen altijd een tweede drager krijgen naast kleur. En plan een terugkerend moment — bijvoorbeeld bij elke grotere release — waarop je stap 1 tot en met 4 herhaalt.
Begin met één pagina
Een volledige scan van een groot product kan ontmoedigend aanvoelen. Begin daarom klein: kies één veelbezochte pagina, open de developer tools van Chrome of Firefox en meet het contrast van de lopende tekst en de belangrijkste knop. Noteer de twee waarden.
Met die eerste meting leer je hoe de tool werkt en zie je of je gewone tekst de grenswaarde van 4,5:1 uit de Belgische richtlijn haalt. Houd er rekening mee dat toestanden, overlays, afbeeldingen en dynamische achtergronden aparte metingen vragen. Daarna werk je pagina voor pagina verder.
Wil je zelf verkennen hoe kleurverschillen bij verschillende profielen kunnen samenvallen, dan kun je de KLEURLENS-simulator inzetten als educatieve aanvulling op je scan. Voor vragen over iemands eigen kleurzicht kan een optometrist of oogarts passend professioneel advies geven.