Kleurcontrastchecker
Voer een voorgrond- en achtergrondkleur in om de WCAG-contrastverhouding met AA- en AAA-pass/fail-badges voor normale en grote tekst te controleren.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Hoe het werkt
Kies een voorgrond- en achtergrondkleur via de kleurkiezers of typ hex-waarden direct. De tool berekent de relatieve luminantie van elke kleur volgens de WCAG 2.1-formule — een gewogen som van de sRGB-kanalen na gamma-decodering — en deelt de helderste luminantie door de donkerste (plus 0,05 in teller en noemer om deling door nul bij puur zwart te voorkomen). De resulterende contrastverhouding loopt van 1:1 (identieke kleuren) tot 21:1 (puur zwart op puur wit). Vier WCAG-badges tonen pass of fail: AA normale tekst (≥ 4,5:1), AA grote tekst (≥ 3:1), AAA normale tekst (≥ 7:1) en AAA grote tekst (≥ 4,5:1). Een live voorbeeldpaneel toont voorbeeldzinnen in normale en grote tekst voor visuele controle. De berekening gebeurt volledig in de browser zonder serveroproepen.
Gebruiksscenario's
- Een merkkleurenpalet controleren op toegankelijkheidsconformiteit vóór de lancering van een website-redesign
- Knop- en linkkleuren kiezen die leesbaar blijven op een donker of licht thema
- WCAG 2.1 AA- of AAA-vereisten halen voor Section 508, EN 301 549 of ADA-conformiteit
- Een ontwerp-mockup controleren om onleesbare tekst te signaleren voor de ontwikkeling begint
- Toegankelijkheid onderwijzen door te tonen hoe kleine luminantieverschillen grote contrastfouten veroorzaken