Kleurtools

Contrast-checker

Controleer WCAG-contrastverhoudingen tussen elke twee kleuren. Zie pass/fail-badges voor AA en AAA op normale en grote tekst, met live preview.

Voorgrond (tekst)

Achtergrond

Voorbeeld grote kop

Dit is normale broodtekst — de regel die je leest voor alinea's en formuliertekst.

Dit is kleine tekst — bijschriften, voetnoten, hulptekst.

Contrastverhouding

WCAG AA — Normaal --

WCAG AA — Groot --

WCAG AAA — Normaal --

WCAG AAA — Groot --

Wat is contrastverhouding?

Contrastverhouding is een getal van 1:1 (geen contrast) tot 21:1 (puur zwart op puur wit) dat beschrijft hoe goed een voorgrondkleur te onderscheiden is van de achtergrond. De WCAG-standaard definieert minimale verhoudingen voor leesbaarheid: 4.5:1 voor body-tekst, 3:1 voor grote tekst en UI-componenten op AA-niveau, oplopend tot 7:1 en 4.5:1 voor AAA. Voldoen aan deze drempels is geen ontwerpsmaak — het is hoe screenreaders, mensen met visuele beperkingen en zonlicht-zicht je content effectief bereiken.

Hoe gebruik je deze checker

Pak je tekstkleur in de voorgrond-picker en het oppervlak erachter in de achtergrond-picker — of plak hex-codes direct. De live preview repaint in real time, en de pass/fail-badges werken bij naarmate je waarden wijzigt. Klik op Wisselen om voor- en achtergrond om te draaien — handig om beide kanten van een hover-state te checken.

Best practices

Mik op AA Normaal (4.5:1) op body-tekst als absoluut minimum, en richt op AAA Normaal (7:1) wanneer toegankelijkheid een merkwaarde is. Jaag niet op het minimum — borderline-passes vallen door bij heldere zonlicht, op vergrijzende schermen of voor lezers met milde visus-beperkingen. Voor kritieke UI (CTA's, foutmeldingen) zit je beter ruim boven de drempel.

De wiskunde achter de verhouding

WCAG berekent contrast uit relatieve luminantie, niet uit ruwe RGB-waarden. Elk kanaal wordt eerst van sRGB gelineariseerd — waarden onder 0.03928 worden door 12.92 gedeeld, de rest gaat door ((c + 0.055) / 1.055)^2.4. De drie lineaire kanalen worden gewogen 0.2126·R + 0.7152·G + 0.0722·B (gewogen naar oog-gevoeligheid voor groen). Dat geeft de luminantie L. De contrastverhouding is dan (L1 + 0.05) / (L2 + 0.05), waarbij L1 de lichtste van de twee is.

WCAG-conformiteitsniveaus in één oogopslag

AA Normaal: 4.5:1 minimum voor body-tekst onder 18pt (of 14pt vet). AA Groot: 3:1 voor tekst 18pt+ (of 14pt+ vet). AAA Normaal: 7:1 — het verhoogde niveau voor body-tekst. AAA Groot: 4.5:1 voor grote tekst. UI-componenten en grafische objecten (icoon-strokes, focus-rings) hebben hun eigen 3:1-minimum onder WCAG 2.1 SC 1.4.11.

Veelgestelde vragen

Wat betekent "grote tekst" in WCAG?

Grote tekst is alles 18pt en groter, of 14pt en groter als het vet is — ongeveer 24px en 18,66px in CSS-pixels. De redenering: grotere letters hebben dikkere streken en meer perceptueel contrast, dus ze blijven leesbaar bij een lagere wiskundige verhouding.

Stuurt deze tool mijn kleuren naar een server?

Nee. Elke contrastberekening draait in je browser via standaard JavaScript-wiskunde — geen netwerkrequest tijdens het wijzigen van invoer. Bevestig met DevTools → Network en sleep de pickers.

Waarom falen mijn kleuren bij 4,49:1 maar slagen ze bij 4,50:1?

WCAG definieert zijn drempels als inclusieve minima — 4,5:1 betekent minstens 4,5, niet strikt groter. We ronden af op twee decimalen voor weergave, maar vergelijken intern met volledige precisie, dus een 4,4998-verhouding faalt terecht 4,5:1.

Hoe zit het met niet-tekst-elementen als iconen of formulierranden?

WCAG 2.1 SC 1.4.11 vereist 3:1 minimaal contrast voor grafische UI-componenten — icoon-streken, invoerkaders, focus-indicatoren, knopomrandingen. Gebruik deze checker op de voorgrond-streek van het icoon vs zijn achtergrond.

Maakt AAA echt uit voor typische sites?

AA is de wettelijke vloer in de meeste rechtsgebieden. AAA is een streefdoel en niet altijd haalbaar zonder merkidentiteit op te offeren. Haal AAA op body-tekst waar je kunt en gebruik AA als baseline overal anders.

Worden kleurnamen als "red" of "blue" ondersteund?

De pickers en hex-invoer behandelen 6- en 3-cijferige hex-codes. Voor benoemde CSS-kleuren gebruik je onze Named Colors-tool om eerst de equivalente hex op te zoeken en die hier te plakken.

Contrast-checker