Gratis Kleurcontrast Checker

Test your text and background color combinations for WCAG 2.1 accessibility compliance. Get direct pass/fail results for AA and AAA standards — geen registratie nodig.

94,217+ contrastcontroles uitgevoerd

Contrastverhouding

17.06:1

Grote Tekstweergave (24px)

Weergave normale tekst (16px). De snelle bruine vos springt over de luie hond. Dit voorbeeld toont hoe je kleurencombinatie eruitziet op typisch bodytekstformaat.

Kleine tekst (14px) — vaak gebruikt voor bijschriften, voetnoten en metadata.

Omgekeerd: achtergrond op tekstkleur (17.06:1 — zelfde verhouding)

AA Normale Tekst

Vereist 4,5:1

GESLAAGD

AA Grote Tekst

Vereist 3:1

GESLAAGD

AAA Normale Tekst

Vereist 7:1

GESLAAGD

AAA Grote Tekst

Vereist 4,5:1

GESLAAGD

Klaar om een toegankelijke website te bouwen met deze kleuren?

Bouwen met deze kleuren

Wat Is een Kleurcontrast Checker?

Een kleurcontrast checker is een tool die het luminantieverschil meet tussen twee kleuren — doorgaans voorgrondtekst en zijn achtergrond — en een contrastverhouding berekent volgens de Web Content Accessibility Guidelines (WCAG). Deze verhouding bepaalt of je kleurencombinatie leesbaar is voor mensen met visuele beperkingen, inclusief kleurenblindheid en slechtziendheid.

Kleap's contrastchecker berekent direct de WCAG 2.1-contrastverhouding en test hem tegen alle vier nalevingsniveaus: AA Normale Tekst (4,5:1), AA Grote Tekst (3:1), AAA Normale Tekst (7:1) en AAA Grote Tekst (4,5:1). Als je kleuren niet slagen, suggereert de tool de dichtstbijzijnde toegankelijke alternatief zodat je toegankelijkheidsproblemen kunt oplossen zonder je hele palet te herontwerpen.

WCAG Contrastniveaus Uitgelegd

AA Normale Tekst

4,5:1 minimum

Vereist een minimale contrastverhouding van 4,5:1. Dit is het meest gebruikelijke nalevingsdoel en geldt voor bodytekst onder 18pt (of 14pt vet).

AA Grote Tekst

Minimum 3:1

Vereist een minimale contrastverhouding van 3:1. Geldt voor tekst van minimaal 18pt (24px) of 14pt vet (18,66px vet).

AAA Normale Tekst

Minimum 7:1

De hoogste standaard, vereist 7:1 contrastverhouding. Zorgt voor leesbaarheid voor gebruikers met matige slechtziendheid (approximately 20/80).

AAA Grote Tekst

4,5:1 minimum

Vereist 4,5:1 voor grote tekst op AAA-niveau. Biedt verbeterde leesbaarheid voor headers en displaytekst.

Tips voor Toegankelijk Kleurontwerp

1

Begin met contrast

Kies je tekst- en achtergrondkleuren met contrast in gedachten vanaf het begin. Achteraf toegankelijkheid toevoegen is veel moeilijker dan het van begin af aan inbouwen.

2

Vertrouw niet alleen op kleur

Gebruik pictogrammen, patronen, onderstrepingen of labels naast kleur om betekenis over te brengen. Ongeveer 8% van de mannen heeft een vorm van kleurenblindheid.

3

Test op echte apparaten

Kleuren zien er anders uit op monitoren, telefoons en in felle zon. Test je contrastverhoudingen op echte apparaten, niet alleen in je ontwerptool.

4

Gebruik ook donkere modus

Als je site donkere modus ondersteunt, verifieer dan de contrastverhoudingen voor beide thema's. Een kleurpaar dat slaagt in lichte modus kan falen in donkere modus.

5

Let op het lettergewicht

Dunne en lichte lettergewichten verminderen het waargenomen contrast. Als je gewichten onder 400 gebruikt, streef dan naar een hogere contrastverhouding dan het minimum.

6

Controleer interactieve toestanden

Hover-, focus- en actieve toestanden gebruiken vaak andere kleuren. Zorg ervoor dat alle interactieve toestanden aan contrastvereisten voldoen, niet alleen de standaard.

Contrast Checker Vergelijking

FunctieKleapWebAIMCoolorsAdobe Color
PrijsGratisGratisFreemiumFree (with Adobe account)
Real-time voorbeeldJa, live tekst op achtergrondJa, basisJaJa
Dichtstbijzijnde toegankelijke kleurJa, automatisch voorgesteldNeeNeeGedeeltelijk
Geteste WCAG-niveausAA + AAA (normaal + groot)AA + AAAAlleen AAAA + AAA
Built-in WebsitebouwerJa, AI-gestuurdNeeNeeNee
Kleuren omwisselen knopJaNeeNeeNee
Willekeurig toegankelijk paarJaNeeNeeNee

Veelgestelde Vragen

Wat is een kleurcontrastverhouding?+
Een kleurcontrastverhouding is een numerieke waarde die het luminantieverschil (waargenomen helderheid) tussen twee kleuren weergeeft. Het varieert van 1:1 (geen contrast, identieke kleuren) tot 21:1 (maximaal contrast, zwart op wit). De verhouding wordt berekend met de WCAG 2.1 relatieve luminantieformule, die rekening houdt met hoe het menselijk oog verschillende golflengten van licht waarneemt.
Welke WCAG-contrastverhouding heb ik nodig?+
Voor WCAG 2.1 Level AA-naleving (de meest vereiste standaard) heeft normale bodytekst minimaal 4,5:1 contrast nodig, en grote tekst (18pt+ of 14pt+ vet) minimaal 3:1. Voor Level AAA (de hoogste standaard) heeft normale tekst 7:1 nodig en grote tekst 4,5:1. De meeste wettelijke toegankelijkheidsvereisten verwijzen naar Level AA.
Wat telt als grote tekst in WCAG?+
Grote tekst in WCAG is gedefinieerd als tekst van minimaal 18 punten (24 CSS-pixels) of 14 punten vet (circa 18,66 CSS-pixels vet). Dit komt overeen met ongeveer koptekstformaat. Grote tekst heeft lagere contrastvereisten omdat het grotere formaat inherent gemakkelijker te lezen is.
Geldt WCAG voor afbeeldingen en iconen?+
Ja, WCAG 2.1 Succescriterium 1.4.11 vereist dat UI-componenten (zoals iconen, formulierranden en focusindicatoren) en grafische objecten minimaal 3:1 contrast hebben tegenover aangrenzende kleuren. Dit staat los van de tekstcontrastvereisten en werd geïntroduceerd in WCAG 2.1.
Hoe wordt de contrastverhouding berekend?+
De contrastverhouding gebruikt de relatieve luminantieformule: (L1 + 0,05) / (L2 + 0,05), waarbij L1 de luminantie van de lichtste kleur is en L2 die van de donkerste. Relatieve luminantie wordt berekend door sRGB-waarden om te zetten naar lineair licht (met gammacorrectie) en te wegen: 0,2126*R + 0,7152*G + 0,0722*B. De gewichten weerspiegelen de gevoeligheid van het menselijk oog — groen nemen we als helderste waar.
Is WCAG AA genoeg voor mijn website?+
WCAG AA is de standaard waarnaar de meeste toegankelijkheidswetten wereldwijd verwijzen, inclusief de ADA (VS), EAA (EU) en EN 301 549 (Europa). Voor de meeste websites en apps is AA-naleving zowel wettelijk voldoende als geeft het goede leesbaarheid. AAA wordt aanbevolen voor overheidswebsites, gezondheidszorg en onderwijs, maar is doorgaans niet wettelijk vereist.
Wat als mijn merkkleuren het contrast niet halen?+
Je hebt meerdere opties: pas de tint van je merkkleur iets aan (vaak is een kleine helderheidsverandering genoeg), gebruik je merkkleur alleen voor decoratieve elementen en een hoog-contrastkleur voor tekst, vergroot de tekstgrootte om in aanmerking te komen voor de grote tekst drempelwaarde, of voeg een semi-transparante overlay toe achter tekst op gekleurde achtergronden. Onze tool suggereert automatisch de dichtstbijzijnde toegankelijke kleur.
Is contrast ook belangrijk voor donkere modus?+
Absoluut. Dezelfde WCAG-contrastvereisten gelden ongeacht het kleurenschema. In donkere modus ontstaan unieke uitdagingen: puur witte (#FFFFFF) tekst op een zeer donkere achtergrond kan halos veroorzaken (een gloeiend effect) voor gebruikers met astigmatisme. Een iets off-white (#E0E0E0 tot #F0F0F0) op een donkergrijs (#1A1A1A tot #2D2D2D) biedt vaak betere leesbaarheid terwijl nog steeds aan AA-standaarden wordt voldaan.
Kunnen kleurenblinde gebruikers genoeg contrast zien?+
Hoge contrastverhoudingen helpen kleurenblinde gebruikers significant, maar contrast alleen is niet voldoende. WCAG vereist ook dat kleur niet het enige middel is om informatie over te brengen (1.4.1). Gebruik bijvoorbeeld niet alleen rood/groen om fout/succes aan te geven — voeg iconen of tekstlabels toe. De contrastverhoudeformule houdt rekening met luminantie, niet met kleursoort, dus het helpt bij alle soorten kleurenblindheid.
Hoe test ik het contrast op mijn bestaande website?+
Je kunt browser DevTools gebruiken (Chrome's Lighthouse-audit bevat contrastcontroles), browserextensies zoals axe of WAVE, of je exacte HEX/RGB-waarden in deze tool plakken. Voor uitgebreide tests gebruik je geautomatiseerde tools zoals Lighthouse voor een volledige paginascan, daarna verifieer je handmatig eventuele gemarkeerde elementen. Vergeet niet hovertoestanden, focusstijlen en plaatshoudertext te testen — deze worden vaak gemist.

Bouw een Toegankelijke Website met AI

Gebruik je toegankelijke kleurencombinaties om een complete, WCAG-conforme website te bouwen met Kleap's AI-websitebouwer.

Gratis Starten

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Gratis Kleurcontrast Checker | WCAG Toegankelijkheidstool 2026