De WCAG-contrastcontrole doorloopt een paar eenvoudige stappen. Niets verlaat je browser.
- Je voert een voorgrond- en een achtergrondkleur in. De tool parseert hex-, rgb()-, hsl()- of benoemde CSS-kleuren naar hun rode, groene en blauwe kanaalwaarden.
- Elk RGB-kanaal wordt gelineariseerd met behulp van de sRGB-overdrachtsfunctie. Dit zet de gammagecodeerde weergavewaarden om in lineaire lichtintensiteiten.
- De lineaire waarden worden gewogen door de gevoeligheid van het menselijk oog voor elk kanaal — 0,2126 voor rood, 0,7152 voor groen, 0,0722 voor blauw. De som is de relatieve luminantie van de kleur.
- De contrastverhouding is (L1 + 0,05) ÷ (L2 + 0,05), waarbij L1 de luminantie van de lichtere kleur is en L2 die van de donkerdere. De extra 0,05 houdt de formule geldig voor zuiver zwart.
- De verhouding wordt vergeleken met de WCAG-drempels: AA normale tekst heeft minstens 4,5:1 nodig, AA grote tekst 3:1, AAA normale tekst 7:1 en AAA grote tekst 4,5:1. Grote tekst betekent minstens 18pt of 14pt vet.
FAQ
Veelgestelde vragen over WCAG-contrastcontrole.
Wat is het verschil tussen AA en AAA?
AA is het minimale conformiteitsniveau voor de meeste webinhoud. Het vereist een contrastverhouding van ten minste 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA is een hogere standaard die 7:1 vereist voor normale tekst en 4,5:1 voor grote tekst. Je kunt AAA nastreven voor belangrijke inhoud zoals bodytekst op een nieuwssite, terwijl je AA gebruikt voor het algemene ontwerp. Overal AAA halen kan moeilijk zijn met merkgebonden kleuren, daarom mikken veel teams op AA over de hele linie en verhogen ze belangrijke tekst naar AAA waar mogelijk.
Wat telt als «grote tekst» onder WCAG?
WCAG 2.x definieert grote tekst als ten minste 18 punt (24px) voor normaal gewicht, of 14 punt (ongeveer 19px) voor vet gewicht. Symbolen en iconen die deel uitmaken van een lettertype volgen dezelfde drempels. Als je niet zeker weet welke drempel van toepassing is op jouw UI, controleer dan beide — AA Groot heeft een lagere drempel (3:1), dus de meeste kleurparen die AA Normaal niet halen, slagen wel voor AA Groot wanneer de tekst groot genoeg is.
Waarom slaagt mijn paar voor AA Groot maar niet voor AA Normaal?
Omdat AA Groot slechts een verhouding van 3:1 vereist terwijl AA Normaal 4,5:1 vereist. WCAG stelt een lagere drempel voor grote tekst omdat grotere letters gemakkelijker te lezen zijn, zelfs met minder contrast. Een kleurpaar dat bijvoorbeeld 4,0:1 scoort, slaagt voor AA Groot (drempel 3:1) maar faalt voor AA Normaal (drempel 4,5:1). Dit is heel gebruikelijk met lichtere merkgebonden kleuren als voorgrond op witte achtergronden.
Kan ik voor toegankelijkheidsaudits alleen op deze tool vertrouwen?
Deze tool controleert één ding — de WCAG 2.x-contrastverhouding tussen twee effen kleuren. Echte toegankelijkheid omvat meer: focusindicatoren, lettergrootte en -gewicht, kleur als enige manier om informatie over te brengen, en compatibiliteit met schermlezers en zoomtools. Gebruik deze contrastcontrole naast andere auditmethoden voor een volledig beeld van de toegankelijkheid van jouw applicatie.
Welke kleurformaten accepteert de invoer?
Je kunt 3-, 4-, 6- of 8-cijferige hex-codes plakken (met of zonder #), rgb()- en rgba()-waarden in traditionele komma-syntaxis of moderne spatiescheiding, hsl() en hsla() met elke standaard tint-eenheid (deg, rad, grad, turn), hsv(), hwb() en elk van de 150 benoemde CSS-kleuren uit de CSS Color Module Level 4-specificatie. De kleur wordt volledig op jouw apparaat geparseerd.