1. Voer de tekstkleur in
Typ een kleurcode (bijv. #333333) in HEX-, RGB- of HSL-formaat – of kies een kleur uit de kleurkiezer.
Controleer kleurcontrast en leesbaarheid volgens WCAG-normen
Voer een tekst- en achtergrondkleur in en de tool laat zien of het contrast voldoende is. Berekeningen zijn gebaseerd op de internationale toegankelijkheidsstandaard WCAG 2.1, die minimale contrastwaarden definieert voor verschillende inhoudstypen.
Loading tool editor...
Waarom is kleurleesbaarheid belangrijk?
Leesbaarheid is het luminantieverschil tussen de tekstkleur en de achtergrondkleur. Hoe groter het verschil, hoe makkelijker de tekst te lezen is. Te laag contrast maakt inhoud moeilijk leesbaar – vooral voor mensen met een visuele beperking, ouderen of bij moeilijke lichtomstandigheden (bijv. op een telefoon in direct zonlicht).
Volgens de Wereldgezondheidsorganisatie (WHO) hebben ongeveer 2,2 miljard mensen wereldwijd een vorm van visuele beperking. Daarnaast hebben miljoenen kleurenblindheid (ongeveer 8% van de mannen en 0,5% van de vrouwen) en velen ervaren leeftijdsgerelateerde achteruitgang van het gezichtsvermogen.
De tool berekent de contrastverhouding met de formule uit WCAG 2.1 (Web Content Accessibility Guidelines) – internationale richtlijnen voor digitale toegankelijkheid. Het resultaat maakt een objectieve beoordeling mogelijk of kleuren leesbaar genoeg zijn, ongeacht monitorinstellingen of individuele kleurwaarneming.
Hoe de kleurcontrast checker te gebruiken
Leesbaarheid controleren duurt slechts enkele seconden:
2. Voer de achtergrondkleur in
Voer de achtergrondkleur in waarop de tekst wordt weergegeven – dit kan een sectie, blok of volledige pagina-achtergrond zijn.3. Lees het resultaat
De tool berekent de contrastverhouding en toont of de kleuren voldoen aan WCAG-eisen voor normale tekst, grote tekst en pictogrammen.4. Pas kleuren aan
Als het contrast te laag is, stelt de Afstemmen-functie automatisch een kleurvariant voor die voldoet aan de geselecteerde drempel.
Welke kleurformaten worden ondersteund?
HEX
Hexadecimaal formaat – het meest voorkomend in webdesign. Begint met # en bevat 3 of 6 tekens (cijfers 0-9 en letters A-F).
#fff– wit (verkorte vorm)#ffffff– wit (volledige vorm)#1a73e8– blauw
Contrastverhouding
8.59:1
Normale tekst
AA (min. 4.5:1)AAA (min. 7:1)
Voorbeeld normale tekst
Grote tekst
AA (min. 3:1)AAA (min. 4.5:1)
Hoe de resultaten van de leesbaarheidstest te interpreteren
Na het invoeren van kleuren toont de tool resultaten in drie secties:
- Normale tekst – vereist 4,5:1 contrast (AA) of 7:1 (AAA). Geldt voor tekst onder 18pt (24px) of onder 14pt vet.
- Grote / vette tekst – vereist 3:1 contrast (AA) of 4,5:1 (AAA). Geldt voor koppen, knoppen en accentueringen.
- Pictogrammen – vereist 3:1 contrast (AA). Geldt voor pictogrammen en grafische UI-elementen die informatie overbrengen.
Groene indicator betekent dat aan de eis is voldaan. Rode indicator betekent dat het contrast te laag is en verbeterd moet worden.
Wat betekenen de resultaten van de leesbaarheidstest?
De tool toont de contrastverhouding op een schaal van 1:1 (geen contrast) tot 21:1 (maximaal contrast – zwart op wit). Het resultaat wordt vergeleken met drempels gedefinieerd in de WCAG-standaard:
- Normale tekst – vereist minimaal 4,5:1 voor Niveau AA (minimumstandaard) of 7:1 voor Niveau AAA (verbeterde standaard). Geldt voor tekst onder 18pt (24px) of onder 14pt (18,5px) vet.
- Grote / vette tekst – vereist minimaal 3:1 voor Niveau AA of 4,5:1 voor Niveau AAA. Geldt voor tekst vanaf 18pt (24px) of vanaf 14pt (18,5px) vet – koppen, knoppen, accentueringen.
- Pictogrammen en UI-elementen – vereisen minimaal 3:1 voor Niveau AA. Geldt voor pictogrammen, knoppen, formuliervelden en andere interface-elementen die informatie overbrengen.
Niveau AA is het minimum dat vereist wordt door digitale toegankelijkheidsregelgeving in veel landen, waaronder de EU-richtlijn Webtoegankelijkheid. Niveau AAA biedt betere leesbaarheid maar is niet altijd praktisch haalbaar voor alle elementen.
Automatische kleurafstemming op WCAG-eisen
Als het contrast te laag is, hoeft u niet door trial-and-error naar de juiste kleur te zoeken. De Afstemmen-functie vindt automatisch een tekstkleurvariant die voldoet aan de geselecteerde contrastdrempel.
Hoe afstemming werkt:
- Selecteer het afstemmingsdoel uit de lijst – bijv. AA voor normale tekst of AAA voor grote tekst.
- Klik op de knop Afstemmen.
- De tool doorzoekt lichtheidsvarianten van de tekstkleur en stelt de dichtstbijzijnde voor die voldoet aan de eisen.
- De voorgestelde kleur kan naar het klembord worden gekopieerd of direct worden ingesteld als de nieuwe tekstkleur.
Het algoritme behoudt de tint en verzadiging van de oorspronkelijke kleur en wijzigt alleen de lichtheid. De voorgestelde kleur blijft consistent met de visuele identiteit terwijl het voldoet aan de toegankelijkheidsstandaard.
Wat betekenen de niveaus AA en AAA in de WCAG-standaard?
| Feature | Niveau AA (minimum) | Niveau AAA (verbeterd) |
|---|---|---|
| Normale tekst – min. 4,5:1 | ||
| Normale tekst – min. 7:1 | ||
| Grote / vette tekst – min. 3:1 | ||
| Grote / vette tekst – min. 4,5:1 | ||
| Pictogrammen en UI-elementen – min. 3:1 | ||
| Wettelijk verplicht (EU-richtlijn) | ||
| Vereist door US ADA / Section 508 | ||
| Vereist door UK Equality Act 2010 | ||
| Aanbevolen voor essentiële inhoud |
Niveau AA (minimum)
- Normale tekst – min. 4,5:1
- Normale tekst – min. 7:1
- Grote / vette tekst – min. 3:1
- Grote / vette tekst – min. 4,5:1
- Pictogrammen en UI-elementen – min. 3:1
- Wettelijk verplicht (EU-richtlijn)
- Vereist door US ADA / Section 508
- Vereist door UK Equality Act 2010
- Aanbevolen voor essentiële inhoud
Niveau AAA (verbeterd)
- Normale tekst – min. 4,5:1
- Normale tekst – min. 7:1
- Grote / vette tekst – min. 3:1
- Grote / vette tekst – min. 4,5:1
- Pictogrammen en UI-elementen – min. 3:1
- Wettelijk verplicht (EU-richtlijn)
- Vereist door US ADA / Section 508
- Vereist door UK Equality Act 2010
- Aanbevolen voor essentiële inhoud
Problemen oplossen met de contrastchecker
Ik zie een foutmelding over het kleurformaat
Controleer het kleurformaat. De HEX-code moet beginnen met # en 3 of 6 tekens bevatten (bijv. #fff of #ffffff). Controleer bij het RGB-formaat of de waarden gescheiden zijn door komma's en binnen het bereik 0-255 vallen.
De functie Aanpassen vindt geen geschikte kleur
Wanneer de achtergrond en tekst een vergelijkbare helderheid hebben in dezelfde tint, kan het algoritme geen variant vinden die aan de vereisten voldoet zonder de tint te wijzigen. Overweeg in dat geval de achtergrondkleur te wijzigen of een geheel andere tekstkleur te kiezen.
De kleur in de kleurkiezer komt niet overeen met de ingevoerde code
De kleurkiezer in de browser ondersteunt alleen het HEX-formaat zonder transparantie. Als u een kleur invoert in RGBA- of HSLA-formaat met transparantie, toont de kleurkiezer alleen het kleurgedeelte (zonder alpha). De contrastberekeningen houden nog steeds rekening met de transparantie.
Waar moet u kleurleesbaarheid controleren?
Leesbaarheid is belangrijk overal waar iemand tekst moet lezen of een UI-element moet herkennen:
Websites
Tekst op pagina's, knoppen, links, formulieren. Vooral belangrijk voor zakelijke sites waar bezoekers uiteenlopende leeftijden en visuele vermogens hebben.Webwinkels
Prijzen, Koop nu-knoppen, productinformatie. Slechte leesbaarheid kan gemiste bestellingen betekenen.Presentaties
Dia's weergegeven via een projector hebben vaak een zwakker contrast dan op een monitor. Controleer kleuren voor de presentatie.Posters en flyers
Drukwerk bekeken onder wisselende lichtomstandigheden vereist hoog contrast.Mobiele apps
Telefoons worden gebruikt in fel zonlicht, 's nachts en door mensen van alle leeftijden.Restaurantmenu's
Vaak gedrukt op gekleurd papier of met decoratieve lettertypen – makkelijk om te laag contrast te krijgen.
Kleurleesbaarheid voor kleurenblinde gebruikers
Kleurenblindheid treft ongeveer 8% van de mannen en 0,5% van de vrouwen. Mensen met kleurenblindheid kunnen moeite hebben om bepaalde kleurparen te onderscheiden, zelfs als het luminantiecontrast voldoende is.
Meest voorkomende typen kleurenblindheid:
- Deuteranopie – moeite met het onderscheiden van groen en rood (meest voorkomende vorm)
- Protanopie – moeite met het zien van rood
- Tritanopie – moeite met het zien van blauw en geel (zeldzaam)
Deze tool controleert luminantiecontrast, wat belangrijk is voor alle gebruikers. Bij het ontwerpen is het echter ook verstandig om problematische kleurcombinaties te vermijden (bijv. rode tekst op groene achtergrond) en niet uitsluitend op kleur te vertrouwen om informatie over te brengen – gebruik ook vormen, pictogrammen en tekst.
Toegankelijkheidsvereisten in Nederland en België
Nederland en België hebben uitgebreide regelgeving voor digitale toegankelijkheid:
- Nederland - Besluit digitale toegankelijkheid overheid: verplicht overheidswebsites en -apps om te voldoen aan WCAG 2.1 niveau AA. Logius voert de monitoring uit.
- Tijdelijk besluit digitale toegankelijkheid - overgangsregeling die de naleving stapsgewijs uitbreidt naar meer overheidsinstanties.
- België - Bestuursdecreet (Vlaanderen): verplicht Vlaamse overheidssites tot WCAG 2.1 AA. Wallonië en Brussel hebben vergelijkbare besluiten.
- EU-Toegankelijkheidswet (EAA) - vanaf juni 2025 gelden de eisen ook voor de private sector: webshops, banken, vervoersdiensten en mediaplatforms.
De contrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst is een wettelijke verplichting in beide landen.
Wat maakt deze contrast checker bijzonder?
Objectieve beoordeling op basis van wiskundige formule
De contrastverhouding wordt berekend met de WCAG-formule – het resultaat is onafhankelijk van monitorinstellingen of individuele kleurwaarneming.Conformiteit met internationale WCAG-standaard
Resultaten komen overeen met WCAG 2.1-eisen, die de basis vormen van digitale toegankelijkheidsregelgeving in de EU en veel andere landen.Automatische kleurafstemming op drempel
De Afstemmen-functie vindt een tekstkleurvariant die voldoet aan de geselecteerde contrastdrempel – behoudt de tint, wijzigt alleen de lichtheid.Vijf kleurformaten
Ondersteunde formaten: HEX, RGB, RGBA, HSL en HSLA. Kleurcode kan direct worden geplakt vanuit Figma, Photoshop of een CSS-stylesheet.Drie inhoudstypen in één test
Eén controle toont het resultaat voor normale tekst, grote tekst (koppen, knoppen) en pictogrammen – niet nodig om elk type apart te testen.
Veelgestelde vragen over de kleurcontrast checker
Wat is een kleurcontrastverhouding?
Een contrastverhouding is een maat voor het luminantieverschil tussen twee kleuren. De schaal loopt van 1:1 (geen verschil – bijv. witte tekst op witte achtergrond) tot 21:1 (maximaal verschil – zwarte tekst op witte achtergrond). Hoe hoger de verhouding, hoe makkelijker de tekst te onderscheiden is van de achtergrond.
Welk contrast is voldoende volgens WCAG?
Voor normale tekst is het minimum 4,5:1 (Niveau AA). Voor grote tekst – koppen vanaf 18pt of vette tekst vanaf 14pt – is 3:1 voldoende. Voor pictogrammen en UI-componenten is ook 3:1 vereist. Deze drempels garanderen leesbaarheid voor de meeste gebruikers, inclusief mensen met een visuele beperking.
Is kleurcontrast belangrijk voor kleurenblinde gebruikers?
De checker test luminantiecontrast, wat belangrijk is voor alle gebruikers, inclusief kleurenblinden. Kleurenblindheid is echter een kleurwaarnemingsprobleem, geen luminantieprobleem – vermijd daarom naast contrast ook problematische kleurparen (bijv. rode tekst op groene achtergrond) en vertrouw niet uitsluitend op kleur om informatie over te brengen.
Waarom voldoet mijn kleur niet aan de eisen, ook al kan ik het goed zien?
Persoonlijke kleurwaarneming hangt af van monitorinstellingen, kamerverlichting en individuele visuele vermogens. WCAG is gebaseerd op een objectieve wiskundige formule die rekening houdt met diverse visuele beperkingen. Een kleur die op één scherm leesbaar is, kan op een ander scherm of voor een ander persoon onleesbaar zijn.
Moet ik voldoen aan het AAA-contrastniveau?
Niet altijd. Niveau AA (4,5:1 voor normale tekst) is het minimum dat vereist wordt door toegankelijkheidsregelgeving in de Europese Unie. Niveau AAA (7:1) biedt betere leesbaarheid maar is moeilijker te bereiken. Voor kritieke inhoud – waarschuwingen, veiligheidsinstructies – overweeg AAA na te streven.
Wat is de WCAG-standaard?
WCAG (Web Content Accessibility Guidelines) is een internationaal pakket richtlijnen voor webtoegankelijkheid, ontwikkeld door de W3C-organisatie. Het definieert onder meer minimale kleurcontrastwaarden, kopstructuur, toetsenbordondersteuning en andere eisen die websites toegankelijk maken voor mensen met diverse beperkingen.
Waar kan ik de kleurcodes van mijn website vinden?
In een browser (Chrome, Firefox, Edge) kunt u de ontwikkelaarstools openen (rechtermuisklik > Inspecteren). Op het tabblad Stijlen ziet u de gebruikte kleuren op de pagina. Als alternatief kunt u browserextensies zoals ColorZilla gebruiken om de kleur van elk element te selecteren zonder in de code te duiken.
Welke kleurparen op mijn site moet ik het eerst controleren?
Het belangrijkst: tekst op de hoofdachtergrond, tekst op banners en gekleurde secties, knoppen (tekstkleur en knopachtergrond ten opzichte van de pagina-achtergrond), links en pictogrammen. Let vooral op elementen die op verschillende achtergronden verschijnen, afhankelijk van de sectie.
Vereist de Nederlandse wet kleurcontrast op websites?
Ja. Het Besluit digitale toegankelijkheid overheid verplicht overheidswebsites om te voldoen aan WCAG 2.1 AA, inclusief een contrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst. Vanaf juni 2025 breidt de EU-Toegankelijkheidswet (EAA) de verplichting uit naar de private sector.
Geldt dit ook voor Belgische websites?
Ja. In Vlaanderen verplicht het Bestuursdecreet WCAG 2.1 AA voor overheidssites. Wallonië en Brussel hebben vergelijkbare regelgeving. De EAA geldt vanaf juni 2025 ook voor de private sector in heel de EU.
Hoe vind ik kleurcodes van mijn website?
In de browser (Chrome, Firefox, Edge) open je de ontwikkelaarstools (rechtermuisklik > Inspecteren). Op het tabblad Styles zie je de kleuren van de pagina. Als alternatief kun je een extensie zoals ColorZilla gebruiken.
Wat is de veiligste grijstint op een witte achtergrond?
De donkerste grijstint die WCAG AA haalt op puur wit (#ffffff) is #767676 met een verhouding van 4,54:1. Lichtere tinten zoals #999999 (2,85:1) zakken. Voor AAA (7:1) is minimaal #595959 nodig.
Help ons onze tools te verbeteren
Heeft u een idee voor een nieuwe functie, een bug gevonden of wilt u een andere tool voorstellen die uw werk gemakkelijker zou maken? Schrijf ons – we reageren binnen 24 uur.