Contrastchecker – WCAG-contrastverhouding
Voer een voorgrond- en achtergrondkleur in om de contrastverhouding te controleren en te zien of je combinatie voldoet aan de WCAG AA- en AAA-toegankelijkheidsnormen.
Voer twee kleuren in om het contrast te controleren
Ondersteunt HEX-, RGB-, HSL- en OKLCH-formaten
Voorbeeld proberen
Kleurcontrast controleren voor toegankelijkheid
Kleurcontrast is essentieel voor leesbaarheid. Wanneer voorgrondtekst onvoldoende contrast heeft met de achtergrond, wordt deze moeilijk leesbaar — vooral voor mensen met slechtziendheid of kleurenblindheid.
Deze contrastchecker berekent de contrastverhouding tussen twee willekeurige kleuren en beoordeelt deze aan de hand van de WCAG 2.1-succescriteria. Voer kleuren in HEX-, RGB- of HSL-formaat in en krijg direct resultaat.
WCAG-contrastniveaus begrijpen
De Web Content Accessibility Guidelines (WCAG) definiëren minimale contrastverhoudingen voor de leesbaarheid van tekst. Er zijn twee conformiteitsniveaus:
- WCAG AA Normale tekst — vereist een contrastverhouding van minimaal 4,5:1
- WCAG AA Grote tekst — vereist een contrastverhouding van minimaal 3:1 (grote tekst is 18pt+ of 14pt+ vet)
- WCAG AAA Normale tekst — vereist een contrastverhouding van minimaal 7:1
- WCAG AAA Grote tekst — vereist een contrastverhouding van minimaal 4,5:1
AA is het standaardniveau waar de meeste websites en apps naar streven. AAA is het verhoogde niveau, aanbevolen wanneer maximale leesbaarheid belangrijk is.
Hoe de contrastchecker te gebruiken
- Voer een voorgrondkleur (tekstkleur) in — HEX, RGB of HSL
- Voer een achtergrondkleur in in een ondersteund formaat
- Bekijk de contrastverhouding en een live voorbeeld van tekst op de achtergrond
- Controleer de geslaagd/niet-geslaagd resultaten voor WCAG AA en AAA
- Gebruik de wisselknop om snel de voorgrond- en achtergrondkleur om te draaien
Wanneer kleurcontrast controleren
- Bij het kiezen van tekst- en achtergrondkleuren voor een website of app
- Om te verifiëren dat een designsysteem aan toegankelijkheidseisen voldoet
- Bij het testen van knop-, link- of icoonkleuren tegen hun achtergronden
- Bij het controleren van kleurcombinaties in dark mode
- Om te voldoen aan wettelijke toegankelijkheidsnormen (ADA, EAA, Section 508)
Nauwkeurig, direct en gratis
Dit hulpmiddel berekent de WCAG 2.1-contrastverhouding met de standaardformule voor relatieve luminantie. Resultaten worden direct in je browser berekend — er worden geen gegevens naar een server gestuurd.
Moet je eerst een kleur vinden of omzetten? Gebruik de Kleurkiezer om kleuren uit een afbeelding te halen, of de Kleuromzetter om te wisselen tussen HEX, RGB en HSL.
Veelgestelde vragen
- Wat is een goede contrastverhouding voor tekst?
- Voor normale lopende tekst is een contrastverhouding van minimaal 4,5:1 vereist om aan WCAG AA te voldoen. Voor grote tekst (18pt of 14pt vet en groter) is het minimum 3:1. Voor het hoogste toegankelijkheidsniveau (WCAG AAA) heeft normale tekst minimaal 7:1 nodig.
- Wat is het verschil tussen WCAG AA en AAA?
- AA is het standaard conformiteitsniveau waaraan de meeste websites en apps zouden moeten voldoen. AAA is het verhoogde niveau met strengere contrasteisen, aanbevolen voor inhoud waar maximale leesbaarheid cruciaal is, zoals overheids- of zorgwebsites.
- Wat telt als grote tekst in WCAG?
- Grote tekst wordt gedefinieerd als 18 punt (24px) of groter bij normaal gewicht, of 14 punt (ongeveer 18,66px) of groter bij vet. Grote tekst heeft lagere contrasteisen omdat de grootte het inherent makkelijker leesbaar maakt.
- Welke kleurformaten ondersteunt deze checker?
- Je kunt kleuren invoeren in HEX (bijv. #1E293B), RGB (bijv. rgb(30, 41, 59)) of HSL (bijv. hsl(222, 33%, 17%)). Het hulpmiddel detecteert automatisch het formaat.
- Hoe wordt de contrastverhouding berekend?
- De contrastverhouding wordt berekend met de WCAG 2.1-formule: (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtere kleur is en L2 de relatieve luminantie van de donkerdere kleur. Het resultaat loopt van 1:1 (geen contrast) tot 21:1 (maximaal contrast, zwart op wit).
- Werkt dit hulpmiddel op mobiel?
- Ja. De contrastchecker werkt op elk apparaat met een moderne browser — desktop, tablet of telefoon.
- Is dit hulpmiddel gratis?
- Ja. ColourPicker.app is volledig gratis te gebruiken, zonder registratie.
- Kan ik het contrast controleren voor UI-componenten, niet alleen tekst?
- WCAG 2.1 vereist ook een minimale contrastverhouding van 3:1 voor betekenisvolle UI-componenten en grafische objecten (Succescriterium 1.4.11). Je kunt deze checker gebruiken om ook die combinaties te controleren — de berekening van de verhouding is identiek.