Controleer de contrastverhouding tussen twee kleuren tegen de WCAG AA- en AAA-toegankelijkheidsniveaus.
Hoe gebruik je Contrastchecker
Kies een tekstkleur en een achtergrondkleur.
Lees de contrastverhouding en de WCAG-geslaagd-of-mislukt-badges.
Pas de kleuren aan tot ze slagen voor het niveau dat je nodig hebt.
Dit is een WCAG-contrastchecker die de exacte contrastverhouding tussen een tekstkleur en een achtergrondkleur laat zien, plus of die voldoet aan de toegankelijkheidsniveaus AA en AAA. Kies kleuren met het staal of via een hex-code en zie een live voorbeeld.
Pas de twee kleuren aan tot de badges voldoen aan het niveau dat je nodig hebt. Het resultaat werkt direct bij terwijl je bezig bent.
Tekst die qua lichtheid te dicht bij de achtergrond ligt, is lastig of onmogelijk te lezen, vooral voor mensen met slechtziendheid of kleurenblindheid, of voor iedereen die op een telefoon in fel zonlicht kijkt. Voldoende contrast houdt je content leesbaar voor iedereen.
De Web Content Accessibility Guidelines (WCAG) bepalen de norm. AA, het niveau waar de meeste sites naar streven en waar veel toegankelijkheidswetten naar verwijzen, vereist een verhouding van 4.5:1 voor normale tekst en 3:1 voor grote tekst. AAA is strenger met 7:1 en 4.5:1.
Grote tekst krijgt een lagere drempel omdat grotere letters leesbaar blijven bij minder contrast. Tekst telt als groot bij ongeveer 24px (18pt), of 18.66px (14pt) als hij vet is.
De verhouding komt voort uit de relatieve luminantie van de twee kleuren volgens de officiele WCAG-formule, wat een waarde oplevert van 1:1 (geen contrast, identieke kleuren) tot 21:1 (zwart op wit).
Alles wordt in je browser berekend, dus het is direct en privé. Niets van wat je kiest, wordt ergens geüpload.
Veelgestelde vragen
WCAG AA vereist 4.5:1 voor normale tekst en 3:1 voor grote tekst (18pt of 14pt vet). AAA vereist respectievelijk 7:1 en 4.5:1.
Tekst die minstens 24px (18pt) is, of 18.66px (14pt) wanneer vet. Grote tekst mag een lagere contrastverhouding hebben.
Uit de relatieve luminantie van elke kleur met de officiele WCAG-formule, wat een waarde geeft van 1:1 (geen contrast) tot 21:1 (zwart op wit).
Voldoende contrast houdt tekst leesbaar voor mensen met een visuele beperking of kleurzienafwijkingen, en voor iedereen bij slecht licht. Het is een kernonderdeel van een toegankelijke, bruikbare site.
De Web Content Accessibility Guidelines, de internationale standaard om webcontent toegankelijk te maken. Het AA-niveau wordt breed aangehaald door toegankelijkheidswetten en -beleid.
Deze tool insluiten
Voeg deze tool toe aan je eigen website. Kopieer het fragment hieronder. Het blijft automatisch up-to-date.
<iframe src="https://monu.tools/embed/nl/color-contrast-checker" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>Gerelateerde tools
Formatteer en verfraai SQL-query's met regeleinden per clausule en consistente trefwoordschrijfwijze, of minimaliseer ze tot een enkele regel.
Verfraai XML met correcte inspringing, of minimaliseer hem tot een enkele regel. Commentaren, CDATA en processing instructions blijven behouden.
Verfraai CSS met nette inspringing, of minimaliseer hem om de bestandsgrootte te verkleinen. Verwerkt media queries, calc() en licentiecommentaren.
Verfraai HTML met blokbewuste inspringing, of minimaliseer hem. De inhoud van pre, textarea, script en style blijft behouden.