Contrast Checker: kleurcontrast volgens WCAG controleren

Je kunt de Contrast Checker gratis en zonder account gebruiken. De contrastverhouding wordt rechtstreeks in je browser berekend; je kleuren worden niet naar een server verzonden.

De tool berekent met de WCAG 2.x-formule eerst de relatieve luminantie (L) van beide kleuren. Daarna deelt hij L van de lichtere kleur plus 0.05 door L van de donkerdere kleur plus 0.05. Het resultaat ligt tussen 1:1 (identieke kleuren) en 21:1 (zwart op wit). De volgorde van de kleuren maakt niet uit. Hoe hoger de waarde, hoe makkelijker de tekst tegen de achtergrond te lezen is.

Voor niveau AA heeft normale tekst een contrast van minimaal 4.5:1 nodig en grote tekst 3:1. Het strengere niveau AAA vereist 7:1 voor normale en 4.5:1 voor grote tekst. UI-componenten en afbeeldingen, zoals randen van invoervelden en pictogrammen, hebben 3:1 nodig. De meeste wettelijke eisen verwijzen naar AA; AAA is een vrijwillig, strenger niveau.

Tekst geldt als groot vanaf 18pt (24px), of vanaf 14pt (18.66px) als deze ook vetgedrukt is. Voor grote tekst gelden lagere minimale contrastverhoudingen (3:1 in plaats van 4.5:1 voor AA), omdat grotere letters ook bij minder contrast goed leesbaar blijven.

Hexwaarden met of zonder #, met drie of zes tekens (#fff of #ffffff), rgb() en rgba(), en losse waarden zoals 34, 34, 34. Je kunt elke kleur ook met de kleurkiezer selecteren. Bij rgba() wordt de alfawaarde genegeerd: de tool rekent met de ondoorzichtige kleur. Een ongeldige invoer wordt in het veld gemarkeerd totdat de waarde weer geldig is.

Als je combinatie niet voldoet aan AA voor normale tekst (4.5:1), stelt de tool met één klik de dichtstbijzijnde kleur voor die deze waarde haalt. Daarbij verandert alleen de helderheid van de tekst- of achtergrondkleur, afhankelijk van welke de kleinste aanpassing nodig heeft. Met ‘Toepassen’ neem je het voorstel over. Voorbeeld: #777777 op #ffffff haalt 4.48:1; het voorstel #767676 haalt 4.54:1.

Ja. De Contrast Checker zet de huidige voorgrond- en achtergrondkleur automatisch in de URL. Als je de link uit de adresbalk kopieert, opent die dezelfde combinatie. Via de links onder het voorbeeld kun je de voorgrondkleur ook doorgeven aan de kleurenblindheidssimulator of de kleurenschemagenerator.

Wetgeving zoals de European Accessibility Act (EAA) en de nationale uitwerking daarvan, of de ADA in de VS, verplicht veel websites en apps tot een minimum aan toegankelijkheid en verwijst daarbij meestal naar de WCAG. Voldoende tekstcontrast is een van de meest gecontroleerde punten. Deze tool vervangt geen juridisch advies, maar helpt je de technische WCAG-contrastwaarden zelf te controleren.