WCAG-contrastchecker
Controleer de contrastverhouding van een tekst-/achtergrondkleurenpaar tegen WCAG AA en AAA — met live voorbeeld bij normale en grote tekstgrootte.
794 weergaven
Pa's wijze lynx bezag vroom het fikse aquaduct
Voorbeeld grote tekst 24px
Wat de verhouding betekent
De contrastverhouding vergelijkt de relatieve helderheid van twee kleuren, van 1:1 (identiek) tot 21:1 (zwart op wit). WCAG vereist 4,5:1 voor normale tekst (AA) en 3:1 voor grote tekst (≥24 px, of ≥18,7 px vet); het strengere AAA-niveau vraagt 7:1 en 4,5:1. UI-componenten en afbeeldingen hebben 3:1 nodig ten opzichte van aangrenzende kleuren.
De berekening lineariseert elk sRGB-kanaal, weegt ze (L = 0,2126R + 0,7152G + 0,0722B) en berekent (L₁+0,05)/(L₂+0,05). Intuïtie faalt hier vaak — middengrijs #777 op wit oogt voor veel mensen prima leesbaar maar scoort 4,48:1, net onder AA. De marges zijn er voor slechtziende gebruikers, zonlicht en goedkope schermen.
Veelgestelde vragen
Verandert het verwisselen van tekst en achtergrond de verhouding?
Nee — de formule zet altijd de lichtere kleur in de teller, dus de verhouding is symmetrisch. De leesbaarheid kan subjectief nog verschillen (lichte tekst op donker kan gloeien), maar de WCAG-score is identiek.
Wat geldt als grote tekst?
24 px (18 pt) normaal of ongeveer 18,7 px (14 pt) vet en groter. Grote tekst heeft bij AA maar 3:1 nodig omdat grotere letters ook bij lager contrast leesbaar blijven.
Mijn merkkleur slaagt niet — wat nu?
Gebruik hem voor decoratie en maak het tekstgebruik donkerder of lichter totdat het slaagt; een tint-/schaduwschaal helpt daarbij. Placeholdertekst en uitgeschakelde staten zijn vrijgesteld van de eis, maar houd ze redelijk.
Vergelijkbare tools
Probleem melden
WCAG-contrastchecker