Gratis tool: Toegankelijkheid

Kleurcontrastchecker

Vergelijk hier direct een tekstkleur met een achtergrondkleur volgens WCAG 2.2, of voer een paginaadres in om elke tekst onder het contrastminimum te vinden, met de gemeten kleuren en de dichtstbijzijnde kleur die wel slaagt.

Contrastcalculator

Voer een tekstkleur en een achtergrondkleur in. Alles wordt in je browser berekend.

Zo ziet normale tekst van 16 pixels eruit.

Grote tekst van 24 pixels

De rand van een knop

Contrastverhouding4.54:1

WCAG 2.2-resultaten voor deze kleuren
Normale tekst, AAWCAG 1.4.3, vereist 4.5:1Geslaagd
Grote tekst, AAWCAG 1.4.3, vereist 3:1Geslaagd
Normale tekst, AAAWCAG 1.4.6, vereist 7:1Niet geslaagd
Grote tekst, AAAWCAG 1.4.6, vereist 4.5:1Geslaagd
Iconen, randen en formulierveldenWCAG 1.4.11, vereist 3:1Geslaagd

Dichtstbijzijnde tekstkleuren die op deze achtergrond slagen

Grote tekst betekent minstens 24 pixels, of 18,66 pixels vet. Verhoudingen worden naar beneden afgerond, dus 4.499:1 wordt weergegeven als 4.49:1 en slaagt niet, zoals WCAG het bedoelt.

Of scan een pagina op tekst met te weinig contrast

Gratis. Controleert het ingevoerde adres in ongeveer 20 seconden.

Wat deze tool controleert

  • De WCAG-verhouding van twee willekeurige kleuren

    De calculator gebruikt de formule voor relatieve luminantie uit de definities van WCAG 2.2 en toont het resultaat voor normale tekst, grote tekst en onderdelen van de interface, op AA en AAA. Hij draait in je browser.

  • Een kleur die slaagt, al berekend

    Als een paar niet slaagt, zoekt hij de dichtstbijzijnde tekstkleur met dezelfde tint die 4.5:1 of 7:1 haalt, zodat je zo weinig mogelijk aan je ontwerp verandert.

  • Elke tekst met te weinig contrast op een pagina

    De paginascan voert de color-contrast-regel van axe-core uit in een echte Chrome-browser en toont elk element dat niet slaagt, met de tekstkleur, achtergrondkleur, lettergrootte en verhouding.

  • Gegroepeerd per kleurpaar

    Fouten worden gegroepeerd per tekst- en achtergrondkleur, omdat één aanpassing van een themakleur meestal elk element oplost dat die kleur gebruikt.

  • De juiste drempel voor grote tekst

    Tekst van minstens 24 pixels, of 18,66 pixels vet, heeft 3:1 nodig in plaats van 4.5:1. De scan past per element de juiste drempel toe op basis van de berekende grootte en het lettergewicht.

  • Wat hij niet kon meten, en waarom

    Tekst op afbeeldingen, kleurverlopen of overlappende elementen wordt apart vermeld met de reden, zodat je precies weet wat je met het oog moet controleren.

Wat de tool niet kan controleren

  • Tekst op foto’s, kleurverlopen of video meten. Software kan niet weten welk deel van een afbeelding achter elke letter zit, dus deze gevallen worden vermeld zodat jij ze kunt controleren.
  • Hover-, focus- of andere toestanden controleren. De scan ziet de pagina zoals die laadt; controleer die kleuren met de calculator.
  • Iconen, randen en formuliervelden op de pagina scannen voor WCAG 1.4.11. De calculator toont het resultaat voor 3:1 bij elk paar dat je invoert.
  • Tekst lezen die deel uitmaakt van een afbeelding, zoals een banner waarin de woorden zijn verwerkt.
  • Meer testen dan de pagina die je invoert. De volledige gratis scan test maximaal vijf belangrijke pagina’s.

Waarom het belangrijk is

Te weinig contrast is de meest voorkomende toegankelijkheidsfout op het web. De analyse van WebAIM uit 2026 van de homepages van de top één miljoen websites vond tekst met te weinig contrast op 83,9% daarvan, met gemiddeld 34 gevallen per pagina.

Vage tekst is moeilijk te lezen voor mensen die slechtziend zijn of een kleurenzienstoornis hebben, en voor iedereen die een telefoon in fel zonlicht gebruikt. WCAG 2.2-succescriterium 1.4.3, op niveau AA, legt het minimum op 4.5:1 voor normale tekst en 3:1 voor grote tekst.

Het is ook een van de goedkoopste problemen om op te lossen: op de meeste sites veroorzaakt een handvol themakleuren bijna elke fout, en als je die aanpast, los je het op alle pagina’s tegelijk op.

Zo lees je de resultaten

Contrastverhouding
Van 1:1 (twee keer dezelfde kleur) tot 21:1 (zwart op wit). Verhoudingen worden naar beneden afgerond, dus een paar dat 4.49:1 toont, haalt het minimum van 4.5:1 niet.
Normale tekst, AA (4.5:1)
Het minimum voor lopende tekst, links, labels en knoptekst volgens WCAG 1.4.3.
Grote tekst, AA (3:1)
Voor tekst van minstens 24 pixels, of 18,66 pixels vet. WCAG definieert grote tekst als 18 punt, of 14 punt vet.
AAA (7:1 en 4.5:1)
Het verhoogde niveau in WCAG 1.4.6. Het is niet nodig voor conformiteit op AA, maar het helpt meer lezers.
Iconen, randen en formuliervelden (3:1)
WCAG 1.4.11 vraagt 3:1 tegenover aangrenzende kleuren voor de delen van bedieningselementen en afbeeldingen die mensen moeten zien om ze te gebruiken.
Tekst die niet slaagt
Elk element dat de scan onder de drempel heeft gemeten, met selector, kleuren, grootte en verhouding. Open er een om de markup en, waar beschikbaar, een screenshot te zien.
Met het oog te controleren
Tekst die axe-core niet kon meten, met de reden, bijvoorbeeld een afbeelding of kleurverloop erachter.

Zo los je de meest voorkomende problemen op

  • Grijze tekst op wit

    #767676 is ongeveer het lichtste grijs dat op wit 4.5:1 haalt (4.54:1). Lichtere grijstinten zoals #999999 (2.84:1) zijn een veelvoorkomende oorzaak van fouten in footers, bijschriften, placeholders en prijzen.

  • Witte tekst op een knop in de merkkleur

    Als witte tekst op je merkkleur niet slaagt, maak de achtergrond van de knop dan een paar stappen donkerder of gebruik donkere tekst. Controleer ook de kleuren bij hover en focus, want die worden vaak lichter.

  • Placeholdertekst in formulieren

    Placeholdertekst is ook tekst en heeft 4.5:1 nodig. Beter nog: gebruik een zichtbaar label boven het veld, zodat de placeholder niet de enige instructie is.

  • Tekst op afbeeldingen en sliders

    Zet de tekst op een effen of halfdoorzichtige achtergrond, of leg een donkere laag over de afbeelding, en controleer daarna het lichtste deel van de afbeelding achter de tekst.

  • Kortingslabels en kleine lettertjes

    Tekst in uitgeschakelde bedieningselementen is vrijgesteld van 1.4.3, maar kortingslabels, prijzen en juridische kleine lettertjes niet. Dat is vaak de vaagste tekst op de pagina’s van een webshop.

Te weinig kleurcontrast: waarom het ertoe doet en hoe je het oplost in Shopify, WooCommerce en op elke site

Vragen over deze tool

Welke contrastverhouding vereist WCAG?

Voor niveau AA 4.5:1 voor normale tekst en 3:1 voor grote tekst (succescriterium 1.4.3), en 3:1 voor interfacecomponenten en betekenisvolle afbeeldingen (1.4.11). Niveau AAA vraagt 7:1 en 4.5:1 (1.4.6).

Wat telt als grote tekst?

WCAG definieert grote tekst als minstens 18 punt, of 14 punt vet. In CSS-pixels is dat ongeveer 24 px, of 18,66 px vet.

Moeten logo’s aan het contrastminimum voldoen?

Nee. WCAG 1.4.3 zondert logotypes en tekst die deel uitmaakt van een logo of merknaam uit, net als puur decoratieve tekst en tekst in inactieve bedieningselementen.

Waarom zet de scan tekst op een afbeelding bij de items om te controleren?

axe-core meet effen kleuren. Als er een afbeelding, kleurverloop of ander element achter de tekst zit, kan het niet zien welke kleuren elkaar raken, dus meldt het het element zodat een mens het kan controleren, in plaats van te gokken.

Heb ik AAA-contrast nodig?

AAA is niet vereist voor conformiteit op niveau AA, en het W3C raadt niet aan om AAA voor hele sites te eisen. 7:1 halen voor lopende tekst is nog steeds goede praktijk waar je ontwerp het toelaat.

Is APCA onderdeel van WCAG?

Nee. APCA is een andere contrastmethode die is besproken voor WCAG 3, dat nog een concept is. Conformiteit wordt vandaag gemeten met de WCAG 2-verhouding die deze tool berekent.

Bronnen

Gerelateerde tools

Het Toegankelijkheidsrapport ($174, eenmalig) begint bij de volledige gratis scan en voegt meer pagina’s toe, de aanpassing voor elke bevinding, een pdf en hertests om je oplossingen te controleren.

Over het Toegankelijkheidsrapport