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.
21.00:1
AA
Normale tekst
AA
Grote tekst
AAA
Normale tekst
AAA
Grote tekst
Voorbeeld
Pa's wijze lynx bezag vroom het fikse aquaduct.
Pa's wijze lynx bezag vroom het fikse aquaduct.
Hoe het werkt
Dit hulpmiddel berekent de contrastverhouding tussen twee kleuren volgens de WCAG 2.1-richtlijnen en geeft aan of uw kleurencombinatie toegankelijk is.
Hoe te gebruiken:
- Voer de tekstkleur en de achtergrondkleur in als hexadecimaal, RGB of via de kleurenkiezer.
- Het hulpmiddel toont onmiddellijk de contrastverhouding.
- Controleer of het resultaat voldoet aan niveau AA (4,5:1 voor normale tekst) of AAA (7:1).
Voorbeeld: Zwarte tekst (#000000) op witte achtergrond (#FFFFFF) → contrastverhouding 21:1 (AAA).
Beperkingen: Het hulpmiddel evalueert alleen het tekst-/achtergrondcontrast. Het dekt niet alle WCAG-toegankelijkheidscriteria.
Privacy: Er worden geen gegevens verzonden — alles wordt lokaal berekend.
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
Veelgestelde vragen
- Wat is de WCAG-contrastverhouding?
- Een verhouding berekend op basis van de relatieve luminantie van de twee kleuren, variërend van 1:1 (geen contrast) tot 21:1 (maximaal contrast).
- Wat is de minimumwaarde voor toegankelijkheid?
- 4,5:1 voor normale tekst (niveau AA) en 3:1 voor grote tekst.
- Wat betekent niveau AAA?
- Een verhouding van 7:1, aanbevolen voor maximale toegankelijkheid.
- Kan ik meerdere combinaties testen?
- Ja, wijzig de kleuren en het resultaat wordt in realtime bijgewerkt.
- Ondersteunt het hulpmiddel het HSL-formaat?
- De invoer accepteert hexadecimale en RGB-indelingen.