Contrast Checker — Gratis WCAG-toetsinstrument voor contrastverhouding

Kleur is een van de krachtigste tools in het ontwerp, maar het kan ook een van de meest uitsluitende zijn. Een prachtige kleurpalet betekent niets als je gebruikers de tekst niet kunnen lezen. Slecht contrast is de meest voorkomende toegankelijkheidsfout op het internet, en beïnvloedt meer dan 300 miljoen mensen met kleurblindheid en talloze anderen die mobiele apparaten gebruiken in helder zonlicht of op schermen met verouderde helderheid. Onze gratis Contrast Checker berekent direct de contrastverhouding tussen twee kleuren en vertelt je precies waar ze staan ten opzichte van de WCAG AA- en AAA-standaarden — zodat je inclusief kunt ontwerpen zonder te gokken.

Wat is kleurcontrast en waarom is het belangrijk?

Kleurcontrast is het verschil in waargenomen helderheid tussen twee kleuren. Wanneer tekst op een achtergrond staat, bepaalt het contrast tussen hen of de tekst leesbaar is. Als de kleuren te gelijk zijn in helderheid, mengen ze zich en worden ze onzichtbaar voor mensen met lage zichtbaarheid, kleurblindheid of zelfs gebruikers die een scherm in direct zonlicht schuin bekijken.

De Web Content Accessibility Guidelines (WCAG) definiëren contrast wiskundig met behulp van relatieve helderheid — een maat voor hoe helder een kleur eruitziet voor het menselijk oog. De formule rekening houdt met het feit dat onze ogen gevoeliger zijn voor groen licht dan voor rood of blauw. Een helder groen kan lichter lijken dan een helder rood, zelfs als ze dezelfde numerieke helderheid hebben in RGB. De WCAG-formule corrigeert hiervoor, waardoor een contrastverhouding ontstaat die accuraat de menselijke perceptie weerspiegelt.

De verhouding varieert van 1:1 (identieke kleuren, geen contrast) tot 21:1 (zuivere zwarte op zuivere witte, maximale contrast). De meeste toegankelijke ontwerpen vallen ergens in het midden. Een verhouding van 4,5:1 is het minimum voor normale tekst onder WCAG AA. 7:1 is de striktere AAA-standaard. Deze getallen zijn niet willekeurig — ze zijn gebaseerd op uitgebreid onderzoek naar wat mensen met verschillende visuele beperkingen daadwerkelijk kunnen onderscheiden.

Buiten toegankelijkheid beïnvloedt contrast iedereen. Ontwerpen met hoge contrast zijn makkelijker leesbaar op kleine schermen, in heldere omgevingen en voor gebruikers ouder dan 40, waarvan de ogen natuurlijk contrastgevoeligheid verliezen. Tekst met lage contrast kan elegant lijken op een gekalibreerde monitor van een ontwerper, maar wordt onleesbaar op een budgetlaptop, een gescheurd telefoonscherm of een projecteur in een verlichte kamer.

Hoe gebruik je de Contrast Checker

Het testen van een kleurcombinatie duurt enkele seconden. Kies twee kleuren en krijg direct een oordeel.

1. Kies je voorgrondkleur. Dit is meestal je tekstkleur. Klik op het kleurstaaltje om de native kleurkiezer te openen, of typ direct een HEX-code in het invoerveld.
2. Kies je achtergrondkleur. Dit is het oppervlak achter je tekst. Gebruik dezelfde kleurkiezer of typ een HEX-code handmatig in.
3. Lees de contrastverhouding. Het hulpmiddel toont de exacte verhouding prominent — bijvoorbeeld 7,23:1 — zodat je precies weet waar je staat.
4. Controleer WCAG-compliancy. Het resultaatstabel toont pass/fail status voor:
   • Normale tekst bij WCAG AA (4,5:1) en AAA (7:1)
   • Grote tekst bij WCAG AA (3:1) en AAA (4,5:1)
   • UI-componenten bij WCAG AA (3:1)
5. Voorbeeld van kleuren in context. Het hulpmiddel toont voorbeelden van normale tekst en grote kopregels met je gekozen combinatie, zodat je visueel kan oordelen over de werkelijke leesbaarheid.
6. Wissel kleuren met de flip-knop om de omgekeerde combinatie te testen — lichte tekst op een donkere achtergrond in plaats van donkere tekst op lichte.
7. Kopieer de verhouding naar je klembord met één klik voor documentatie of ontwerpsysteemnotities.

Het hele proces is direct. Pas één van de kleuren aan en zie hoe de verhouding, compliancy-tabel en voorbeeld real-time worden bijgewerkt.

Begrijpen van contrastverhoudingen

Verhoudingsbereik	Toegankelijkheidsniveau	Wat betekent het
1:1 tot 2,99:1	Voldoet aan geen enkele norm	Tekst is bijna niet te onderscheiden van de achtergrond; onbruikbaar voor elke leesbare inhoud
3:1 tot 4,49:1	Voldoet aan AA voor grote tekst en UI alleen	Geschikt voor grote koppen (18pt+), knoppen, pictogrammen en randen; faalt voor hoofdtekst
4,5:1 tot 6,99:1	Voldoet aan AA voor alle tekst	Voldoet aan het minimum standaard voor normale hoofdtekst; leesbaar voor de meeste gebruikers
7:1 tot 21:1	Voldoet aan AAA voor normale tekst	Verhoogde toegankelijkheid; leesbaar voor gebruikers met aanzienlijke visuele beperkingen; ideaal voor lange inhoud

Wat wordt als "grote tekst" beschouwd?

WCAG definieert grote tekst als 18 punt (24 pixels) of groter, of 14 punt vet (ongeveer 18,67 pixels vet) of groter. Kopregels, call-to-action-knoppen en hero-tekst vallen vaak onder grote tekst, wat betekent dat ze met een lagere contrastverhouding kunnen voldoen dan hoofdtekst. Echter, het is nog steeds een best practice om minstens 4,5:1 overal te streven, omdat dit consistentie waarborgt en je ontwerp toekomstbestendig maakt tegen het vergroten en zoomen.

Waarom gebruikt de formule relatieve helderheid

De WCAG-contrastformule is niet een eenvoudige vergelijking van RGB-waarden. Het converteert eerst elke kleur naar relatieve helderheid — een maat voor waargenomen helderheid die groen zwaarder weegt dan rood of blauw, omdat menselijke ogen het meest gevoelig zijn voor groen licht. Dit is de reden waarom twee kleuren met identieke helderheidswaarden in RGB zeer verschillende contrastverhoudingen kunnen produceren. Een zuiver rood (#FF0000) en een zuiver groen (#00FF00) hebben beide maximale intensiteit in één kanaal, maar groen lijkt veel helderder op menselijke ogen, dus zijn relatieve helderheid is hoger.

Belangrijke functies

Functie	Wat doet het	Waarom is het belangrijk
Real-time contrastberekening	Bereken de WCAG-verhouding direct terwijl je kleuren aanpast	Itereer door paletopties en zie compliancy direct bijwerken
WCAG AA & AAA-testen	Toont pass/fail voor normale tekst, grote tekst en UI-componenten op beide niveaus	Weet precies welke standaarden je voldoet zonder drempels te onthouden
Live tekstvoorbeeld	Render voorbeelden van hoofdtekst en grote kopregels met je kleuren	Oordeel leesbaarheid visueel, niet alleen wiskundig
Kleurwissel	Keert voorgrond en achtergrond om met één klik	Test direct licht op donker en donker op licht
HEX-invoer	Accepteert directe HEX-codes voor nauwkeurige kleurovereenstemming	Match exacte merkkleuren uit je ontwerpsysteem
Kopieer verhouding	Kopieert de contrastverhouding naar het klembord	Documenteer toegankelijkheidcompliancy in ontwerpspecs en audits
Privacy-georiënteerd	Alle berekeningen worden uitgevoerd in je browser	Geen ontwerpdata wordt naar een server verzonden

In tegenstelling tot basiscontrasttools die alleen een getal tonen, zet deze checker de verhouding in context. Je ziet niet alleen dat je combinatie 4,2:1 scoort, maar dat het faalt voor hoofdtekst bij AA en past voor grote tekst — actiebare informatie die je helpt beslissen of je je tekst donkerder moet maken of je lettergrootte moet vergroten.

Reële toepassingen

Webontwerpers die toegankelijke interfaces maken Een ontwerper bouwt een landingpagina met een donkere navy-achtergrond en lichte grijs-tekst. De combinatie lijkt elegant op hun monitor, maar de contrastchecker toont een verhouding van slechts 3,8:1 — faalt voor hoofdtekst bij AA. De ontwerper verlicht de tekst licht, bereikt 4,6:1 en nu is de pagina leesbaar voor gebruikers met lage zichtbaarheid zonder de donkere esthetiek te verliezen.

Ontwikkelaars die designsystemen implementeren Een ontwikkelaar onderhoudt een componentbibliotheek met tientallen kleurtokens. Voor het uitbrengen van een nieuw thema voert hij elke tekst- en achtergrondcombinatie door de contrastchecker. Het vroegtijdig opsporen van fouten voorkomt toegankelijkheidsfouten in productie en voorkomt de kostbare herontwerp van componenten na een audit.

Contentcreators die documenten formatteren Een marketer maakt een PDF-richtlijn met gekleurde callout-boxen en gemarkeerde tekst. Ze gebruiken de contrastchecker om te controleren dat elke tekstkleur op elke achtergrond WCAG AA voldoet. Dit zorgt ervoor dat de PDF toegankelijk is wanneer het wordt omgezet naar HTML of gelezen door schermlezers, en beschermt de organisatie tegen klachten over toegankelijkheid.

Productmanagers die toegankelijkheidsaudits uitvoeren Een PM voorbereidt zich op een VPAT (Voluntary Product Accessibility Template)-review. Ze gebruiken de contrastchecker om elke kleurcombinatie in hun toepassing te testen tegen WCAG-standaarden, en documenteren de verhoudingen voor elk. Dit creëert een audittrail die toont dat er voorzichtigheid en compliancy zijn getoond.

Onderwijzers die leerstofmateriaal maken Een leraar bouwt een online cursus met slides, toetsen en leesmateriaal. Ze controleren elke tekst- en achtergrondcombinatie om ervoor te zorgen dat leerlingen met visuele beperkingen gelijk kunnen meedoen. Hoge contrast helpt ook leerlingen die colleges op telefoons of tablets volgen in verschillende verlichtingsomstandigheden.

Mobiele appontwerpers Mobiele schermen worden overal bekeken — buiten in zonlicht, binnen onder fluorescente licht, en in bed met nachtmodus ingeschakeld. Een contrastchecker helpt ontwerpers rekening te houden met deze variabele omstandigheden door ervoor te zorgen dat combinaties genoeg ruimte hebben om leesbaar te blijven wanneer helderheid laag is, schermen vuil zijn of anti-reflectiefilters zijn toegepast.

Tips en beste praktijken

• Streef naar AAA wanneer mogelijk. Hoewel AA de juridische minimum is in de meeste jurisdicaties, biedt AAA een betere ervaring voor iedereen. Als je merkkleuren 7:1 kunnen bereiken zonder te botsen, gebruik ze. De kleine visuele afweging is waard voor de grote toegankelijkheidswinst.
• Rely niet alleen op kleur. Zelfs met perfect contrast is kleur niet toegankelijk voor iedereen. Kleurblinde gebruikers kunnen rood niet onderscheiden van groen. Combineer altijd kleur met pictogrammen, labels, patronen of tekst om betekenis over te brengen.
• Test je hele palet. Een designsystem kan tien tekstkleuren en tien achtergrondkleuren hebben. Dat is honderd mogelijke combinaties. Systeematisch testen van elke paar — of ten minste de meest voorkomende — voorkomt dat toegankelijkheidsfouten zich insluipen.
• Controleer focusstatus en interactieve elementen. Knoppen, links, formuliervelden en schakelaars hebben minstens 3:1 contrast tegen hun omgeving. Een knop die past voor tekst kan falen als UI-component als zijn rand te subtiel is.
• Rekening houden met transparantie en overlays. Als je tekst op een afbeelding of een semi-transparante overlay staat, is de effectieve achtergrond een mix van kleuren. De contrastchecker test vaste kleuren, dus voor overlays moet je eerst de gemengde resultaten berekenen of conservatief testen.
• Test op verschillende zoomniveaus. Gebruikers met lage zichtbaarheid zoomen in tot 200% of meer. Bij hoge zoom verschijnt tekst groter, wat helpt, maar de relatieve contrast blijft hetzelfde. Zorg dat je verhoudingen sterk genoeg zijn om te houden onder vergroting.
• Documenteer je verhoudingen. Wanneer je een kleurpaar finaliseert, noteer de contrastverhouding in je designsystemdocumentatie. Dit helpt toekomstige ontwerpers en ontwikkelaars om toegankelijkheid te behouden terwijl het product evolueert.

Vaak gestelde vragen

Is de Contrast Checker gratis te gebruiken?

Ja. De Contrast Checker is volledig gratis met geen enkele gebruikslimiet, geen registratie en geen advertenties. Je kunt zoveel kleurcombinaties testen als je maar wilt.

Wat is WCAG?

WCAG staat voor Web Content Accessibility Guidelines. Het is een internationaal erkend standaard gepubliceerd door de W3C die beschrijft hoe webinhoud toegankelijk moet zijn voor mensen met beperkingen. WCAG 2.1 is de huidige versie, en WCAG 2.2 voegt extra criteria toe. De richtlijnen zijn opgedeeld in drie niveaus: A (minimum), AA (standaard) en AAA (verhoogd).

Wat contrastverhouding heb ik nodig om WCAG AA te passen?

Voor normale tekst (onder 18pt of 14pt vet), heb je minstens 4,5:1 nodig. Voor grote tekst (18pt of groter, of 14pt vet of groter) en UI-componenten zoals knoppen en formuliervelden, heb je minstens 3:1 nodig.

Wat is het verschil tussen WCAG AA en AAA?

AA is het standaardcompliancenummer dat vereist wordt door meeste toegankelijkheidsregels en -richtlijnen wereldwijd, waaronder Sectie 508 in de Verenigde Staten en de Europese Toegankelijkheidsact. AAA is een verhoogd niveau dat een grotere toegankelijkheid biedt, maar niet overal vereist is en soms te strikt wordt beschouwd voor algemene webinhoud. Voor AAA heeft normale tekst een contrastverhouding van 7:1 nodig en grote tekst een contrastverhouding van 4,5:1.

Kan ik RGB of HSL-kleuren testen?

Het hulpmiddel accepteert directe HEX-kleurinvoer. Als je RGB- of HSL-waarden hebt, gebruik dan eerst onze Kleurkiezer om ze om te zetten in HEX. Voer de HEX-code in de Contrast Checker en test direct.

Werkt dit hulpmiddel op mobiele apparaten?

Ja. De Contrast Checker is volledig responsief en werkt op smartphones en tablets. De kleurkiezers, voorbeeldtekst en resultattabel zijn allemaal geoptimaliseerd voor touchscreens en kleinere schermen.

Kan ik dit gebruiken voor printontwerp?

Hoewel WCAG specifiek is ontworpen voor digitale inhoud, gelden de contrastprincipes ook voor print. Een verhouding van 4,5:1 of hoger zorgt doorgaans voor leesbare tekst in gedrukte materialen. Printontwerpers moeten echter ook rekening houden met inktdekkingsgraad, papierkwaliteit en bekeken afstand, naast digitale contrastverhoudingen.

Wat gebeurt er als mijn merkkleuren WCAG niet voldoen?

Als je merkkleuren de vereiste verhouding niet voldoen, heb je verschillende opties. Verlicht of verdonker de tekst licht. Verhoog de lettergrootte zodat de tekst als "grote tekst" wordt beschouwd, wat een lagere verhouding vereist. Voeg een tekstschaduw of rand toe om de waargenomen contrast te verhogen. Of gebruik de niet-compliante kleur alleen voor decoratieve elementen en kies een toegankelijke alternatief voor functionele tekst.