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.
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.
Praktijkvoorbeeld
Controleer grijze tekst #767676 op een witte achtergrond: de contrastverhouding is precies 4,54:1 — geslaagd voor WCAG AA voor normale tekst (vereist 4,5:1) maar gezakt voor AAA (7:1), en de resultaatkaarten tonen elke drempel apart, inclusief de soepelere regels voor grote tekst. De logaritmische schaalbalk toont waar het paar zit tussen 1:1 en de 21:1 van puur zwart op wit. De APCA-kaart blikt vooruit op de WCAG 3-metriek, en de wisselknop beantwoordt meteen of het omdraaien van voor- en achtergrond helpt. Het live voorbeeld toont echte tekst zodat je met eigen ogen oordeelt.
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.