Gratis Kleurcontrastchecker
Test kleurcontrastverhoudingen tegen WCAG 2.1-toegankelijkheidsstandaarden. Controleer AA- en AAA-conformiteit voor tekstleesbaarheid. Gratis, direct en privé.
Kleurcontrast-checker test elk voorgrond/achtergrond-paar tegen de WCAG 2.1 AA- en AAA-normen met de formule voor relatieve luminantie. Toont contrastverhouding, geslaagd/niet-geslaagd per tekstgrootte en UI-componenten, live-preview en kleurenblindheidssimulatie voor protanopie, deuteranopie en tritanopie. Stelt geslaagde alternatieven voor als een paar faalt. Volledig in je browser. Gemaakt door FreeToolHub.
| Normale tekst | Grote tekst | |
|---|---|---|
| WCAG AA | ✓ Geslaagd Vereist 4,5:1 verhouding | ✓ Geslaagd Vereist 3:1 verhouding |
| WCAG AAA | ✓ Geslaagd Vereist 7:1 verhouding | ✓ Geslaagd Vereist 4,5:1 verhouding |
| UI-componenten | ✓ Geslaagd Vereist 3:1 verhouding (WCAG 2.1) | |
Veelgestelde Vragen
Wat is een kleurcontrastverhouding?
Een contrastverhouding meet het verschil in waargenomen helderheid tussen twee kleuren, uitgedrukt als een verhouding van 1:1 (geen contrast) tot 21:1 (maximaal contrast, zwart op wit). Het wordt berekend met de WCAG-formule voor relatieve luminantie.
Welke contrastverhouding heb ik nodig voor WCAG-conformiteit?
WCAG AA vereist een minimale contrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst (18pt of 14pt vet). WCAG AAA vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. UI-componenten vereisen minimaal 3:1 onder WCAG 2.1.
Wat telt als "grote tekst" in WCAG?
Grote tekst is gedefinieerd als 18 punten (24px) of groter bij normaal gewicht, of 14 punten (ongeveer 18,66px) of groter bij vet. Grote tekst heeft lagere contrastvereisten omdat het inherent gemakkelijker te lezen is.
Waarom is kleurcontrast belangrijk voor toegankelijkheid?
Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen heeft een vorm van kleurzichtafwijking. Tekst met laag contrast is moeilijk of onmogelijk te lezen voor mensen met slechtziendheid of kleurenblindheid. Voldoende contrast zorgt ervoor dat uw content door iedereen leesbaar is.
Slaat deze tool mijn kleurselecties op?
Nee. Alles draait lokaal in uw browser. Er worden geen kleuren, resultaten of gegevens naar een server verzonden of opgeslagen. Uw privacy is volledig beschermd.
Hoe werkt de kleursuggestiefunctie?
Wanneer een kleurenpaar een WCAG-niveau niet haalt, berekent de tool automatisch de dichtstbijzijnde kleur die wel zou slagen door de lichtheid in de HSL-kleurruimte aan te passen, terwijl de oorspronkelijke tint en verzadiging behouden blijven. Het suggereert zowel een donkerdere voorgrond als een lichtere achtergrond.