Kleurcontrastcontrole
Voorgrondkleur (tekstkleur)
Achtergrondkleur
Voorbeeld
Normale tekst (18px)
Grote tekst (24px vetgedrukt)
Laat het ons weten
Deel uw ervaring.
Vergelijkbare tools
Over Kleurcontrastcontrole
Controleer of de tekst- en achtergrondkleuren voldoen aan de WCAG AA/AAA-richtlijnen. Gratis toegankelijkheidstool.
Hoe te gebruiken
Stap 1
Voer een voorgrondkleur (tekstkleur) in of selecteer deze met behulp van een hexadecimale code of de kleurenkiezer.
Stap 2
Voer een achtergrondkleur in of kies deze met behulp van een hexadecimale code of de kleurenkiezer.
Stap 3
Bekijk de realtime berekende contrastverhouding.
Stap 4
Controleer of de tekst voldoet aan de WCAG AA- en AAA-richtlijnen voor normale en grote tekst.
Stap 5
Bekijk een visuele preview van de tekst op de achtergrond.
Stap 6
Als het contrast onvoldoende is, gebruik dan de voorgestelde kleuren voor een betere toegankelijkheid.
Stap 7
Gebruik 'Kleuren wisselen' om de voorgrond en achtergrond om te wisselen.
Kenmerken en voordelen
- ✅Realtime berekening van de contrastverhouding
- ✅WCAG 2.1 AA- en AAA-conformiteitscontrole
- ✅Aparte controles voor normale tekst en grote tekst.
- ✅Visuele preview van tekst op een achtergrond
- ✅Kleurenkiezers voor eenvoudige kleurselectie
- ✅HEX-kleurinvoer met validatie
- ✅Wissel van kleuren-knop voor snelle tests
- ✅Willekeurige kleurgeneratoren
- ✅Automatische suggesties voor mislukte contrasten
- ✅Toont de vereiste verhoudingen (4,5:1, 3:1, 7:1, 4,5:1)
- ✅Geslaagd/niet geslaagd-indicatoren met vinkjes
- ✅100% browsergebaseerd - geen serverupload nodig
- ✅100% gratis - geen watermerken, geen registratie vereist
Veelgestelde vragen
Wat is de kleurcontrastverhouding?
De kleurcontrastverhouding meet het verschil in helderheid tussen twee kleuren, uitgedrukt als een verhouding zoals 4,5:1. Een hogere verhouding betekent een beter contrast. Deze wordt berekend met behulp van de WCAG 2.1-formule, gebaseerd op de relatieve helderheid van elke kleur.
Wat zijn de WCAG AA- en AAA-normen?
WCAG (Web Content Accessibility Guidelines) definieert twee conformiteitsniveaus: AA (minimum) vereist een verhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA (verbeterd) vereist een verhouding van 7:1 voor normale tekst en 4,5:1 voor grote tekst. De meeste websites streven naar AA-conformiteit.
Wat wordt beschouwd als grote tekst?
Grote tekst wordt gedefinieerd als 18pt (24px) of groter, of 14pt (18,66px) of groter als deze vetgedrukt is. Grote tekst heeft lagere contrastvereisten (3:1 voor AA, 4,5:1 voor AAA) omdat deze gemakkelijker te lezen is.
Waarom slaagt mijn ontwerp niet voor de contrastcontrole?
Veelvoorkomende oorzaken zijn: lichte tekst op een lichte achtergrond, donkere tekst op een donkere achtergrond of kleuren met een vergelijkbare helderheid. Zelfs kleuren die er voor jou anders uitzien, kunnen een slecht contrast hebben. Test het altijd met een contrastchecker.
Moet ik streven naar een AA- of een AAA-certificering?
WCAG AA is de wettelijke vereiste voor de meeste websites en wordt beschouwd als de minimumnorm. AAA wordt aanbevolen voor verbeterde toegankelijkheid, met name voor websites die zich richten op oudere gebruikers of mensen met een visuele beperking. Begin met AA en streef waar mogelijk naar AAA.
Mag ik alle kleuren gebruiken als het contrast maar goed is?
Een goed contrast is essentieel, maar niet voldoende. Houd ook rekening met kleurenblindheid (gebruik onze kleurenblindheidssimulator), vermijd het uitsluitend gebruiken van kleur om informatie over te brengen en zorg ervoor dat kleuren goed bij elkaar passen in uw algehele ontwerp.
Wat als ik geen goed contrast kan bereiken met mijn merkkleuren?
Probeer de tint aan te passen (lichter of donkerder), gebruik je merkkleur voor accenten in plaats van tekst, voeg randen of achtergronden toe, of gebruik de suggesties om het meest geschikte alternatief te vinden. Merkkleuren kunnen vaak subtiel worden aangepast zonder de identiteit te verliezen.
Moet ik elke kleurencombinatie controleren?
Controleer alle combinaties van tekst op een achtergrond, met name de hoofdtekst, koppen, links, knoppen en formuliervelden. Controleer ook de hover- en focusstatus. Pictogrammen en afbeeldingen die informatie overbrengen, moeten ook aan de contrastvereisten voldoen.
Is 21:1 de maximale contrastverhouding?
Ja, 21:1 is de maximaal mogelijke contrastverhouding, bereikt door puur zwart (#000000) op puur wit (#FFFFFF) of omgekeerd. Dit vertegenwoordigt het hoogst mogelijke contrast.