Gratis tool

Contrast checker

Met deze gratis contrast checker zie je of je tekstkleur goed leesbaar is op je achtergrondkleur. Vul twee kleuren in en je ziet de contrastverhouding en of het paar voldoet aan WCAG 2.2 niveau AA en AAA, voor normale tekst, grote tekst en knoppen.

Gratis, geen account nodig

Hoeveel contrast heeft mijn tekst nodig?

Volgens WCAG 2.2 niveau AA heeft normale tekst een contrastverhouding van minimaal 4,5:1 met de achtergrond nodig, en grote tekst minimaal 3:1. Knoppen, iconen en formulierranden hebben ook 3:1 nodig ten opzichte van de kleuren ernaast. Er wordt niet afgerond, dus 4,49:1 is te weinig voor normale tekst.

Wat de contrast checker berekent

De checker vergelijkt de relatieve helderheid van de twee kleuren, zoals WCAG die definieert, en geeft een verhouding tussen 1:1 (geen contrast) en 21:1 (zwart op wit). Daarna toetst hij die verhouding aan vijf grenzen en toont hij een live voorbeeld van een kop en lopende tekst in jouw kleuren.
  • AA, normale tekst: minimaal 4,5:1
  • AA, grote tekst: minimaal 3:1
  • AAA, normale tekst: minimaal 7:1
  • AAA, grote tekst: minimaal 4,5:1
  • Knoppen, iconen en formulierranden: minimaal 3:1

Zo lees je de uitkomst

Groen betekent dat het paar voor alle tekst voldoet aan niveau AA. Je kunt het gebruiken voor lopende tekst, menu's en knoppen. Oranje betekent dat de verhouding tussen 3:1 en 4,5:1 ligt. Dat is alleen genoeg voor grote tekst: minimaal 18 punt (ongeveer 24 pixels) of 14 punt vet (ongeveer 18,5 pixels). Gebruik het voor grote koppen, niet voor alinea's, prijzen of formulierlabels. Rood betekent dat de verhouding onder 3:1 ligt. Tekst in deze kleuren is voor veel mensen slecht leesbaar, zeker op een telefoon in de zon. Maak een kleur donkerder of de andere lichter tot de uitkomst groen wordt.

Veelgemaakte fouten met contrast

  • Lichtgrijze lopende tekst op wit omdat het rustig oogt
  • Witte tekst op een lichte huiskleur, zoals geel, lichtgroen of oranje
  • Placeholdertekst in formuliervelden als enige label
  • Tekst op een foto zonder donkere laag eroverheen
  • Knopranden en iconen die opgaan in de achtergrond
  • Denken dat huisstijlregels een uitzondering zijn: alleen logo's zijn uitgezonderd

Wat je daarna doet

Test de kleuren die je website echt gebruikt: lopende tekst, links, knoppen, prijzen, formuliervelden en de footer. Valt een huiskleur af, dan hoef je hem niet te schrappen. Gebruik hem als achtergrond van grote vlakken met donkere tekst erop, of gebruik een donkerdere tint van dezelfde kleur voor tekst en knoppen. Bekijk de pagina na het aanpassen nog eens op je telefoon buiten. Goed contrast helpt elke bezoeker, niet alleen mensen die slechter zien.

Sinds 28 juni 2025 moeten veel webshops en online diensten in de EU door de Europese Toegankelijkheidswet (European Accessibility Act) aan toegankelijkheidseisen voldoen, die verwijzen naar WCAG niveau AA. Te weinig contrast is een van de meest voorkomende tekortkomingen.

Zo gebruik je de contrast checker

  1. Vul de tekstkleur in

    Kies hem met de kleurkiezer of typ een hexcode zoals #1e3346.

  2. Vul de achtergrondkleur in

    Gebruik de kleur direct achter de tekst of knop. Wissel de kleuren met een klik als dat nodig is.

  3. Lees de verhouding en de toetsen

    Zie de verhouding en welke AA- en AAA-niveaus slagen voor normale tekst, grote tekst en knoppen.

  4. Pas aan tot het voldoet

    Maak de donkere kleur donkerder of de lichte lichter en kijk naar het voorbeeld tot je groen ziet.

Vragen over kleurcontrast

Wat is een goede contrastverhouding?
Mik voor normale tekst op minimaal 4,5:1, dat is WCAG niveau AA. Vanaf 7:1 voldoe je aan niveau AAA. Zwart op wit is het maximum van 21:1.
Wat telt als grote tekst?
WCAG noemt tekst groot vanaf 18 punt, ongeveer 24 CSS-pixels, of vanaf 14 punt vet, ongeveer 18,5 pixels.
Moeten logo's voldoen aan de contrastregels?
Nee. Tekst die deel is van een logo of merknaam heeft geen contrasteis, net als uitgeschakelde knoppen en puur decoratieve tekst.
Moet mijn webshop aan deze regels voldoen?
Sinds 28 juni 2025 geldt de Europese toegankelijkheidswet (European Accessibility Act) voor veel webshops en diensten in de EU, en die verwijst naar WCAG niveau AA. Micro-ondernemingen die diensten leveren zijn uitgezonderd. Check de regels in je land om te zien wat voor jou geldt.
Is AAA verplicht?
Voor zover wij weten verplicht geen wet AAA voor een hele website. AA is het gebruikelijke doel. AAA is een mooie extra stap voor lange teksten en voor een publiek met veel oudere bezoekers.

Gerelateerde tools en gidsen

Een website in je eigen kleuren die leesbaar blijft

SitePack-thema's volgen je eigen huiskleuren. Bouw je website vanaf €15 per maand, jaarlijks gefactureerd, met Europese hosting en SSL inbegrepen. Probeer het 14 dagen gratis, zonder betaalgegevens.

Probeer 14 dagen gratis Bekijk de prijzen
Cookievoorkeuren

Cookies helpen ons bij het leveren, beschermen en verbeteren van onze producten en diensten. Door onze website te gebruiken, gaat u akkoord met ons gebruik van cookies.