WCAG-contrast controleren
Controleer kleurcontrastverhoudingen op naleving van de WCAG AA- en AAA-toegankelijkheidseisen
Invoer en opties
Snelle voorinstellingen en voorbeelden
Draait in uw browser. Uw invoer blijft op dit apparaat.
Resultaten
Voer uw waarden in om het resultaat te zien.
Over WCAG-contrast controleren
Met onze gratis online WCAG-contrastchecker controleren ontwerpers, ontwikkelaars en toegankelijkheidsspecialisten of combinaties van tekst- en achtergrondkleur voldoen aan de contrasteisen van de Web Content Accessibility Guidelines (WCAG) 2.1. Toegankelijk kleurcontrast zorgt ervoor dat alle gebruikers, ook mensen met een slecht gezichtsvermogen of kleurenblindheid, uw webinhoud kunnen lezen en gebruiken.
De tool berekent de contrastverhouding tussen twee willekeurige kleuren met de officiële W3C-formule voor relatieve luminantie en meldt direct of de combinatie slaagt of faalt voor de conformiteitsniveaus WCAG AA en WCAG AAA, voor zowel normale als grote tekst. Alle berekeningen worden in realtime rechtstreeks in uw browser uitgevoerd, zonder dat gegevens naar een server worden verzonden.
Of u nu een toegankelijkheidsaudit uitvoert, een nieuwe interface ontwerpt of bestaande inhoud op naleving controleert, deze contrastchecker geeft u nauwkeurige, normconforme resultaten, met live tekstvoorbeelden en bruikbare suggesties om falende kleurcombinaties te herstellen.
WCAG-contrasteisen begrijpen
De Web Content Accessibility Guidelines (WCAG) zijn de internationaal erkende standaard voor webtoegankelijkheid, gepubliceerd door het World Wide Web Consortium (W3C). WCAG bepaalt specifieke drempelwaarden voor de contrastverhouding om de leesbaarheid van tekst te waarborgen voor gebruikers met uiteenlopende visuele mogelijkheden.
- WCAG-niveau AA (normale tekst): Een minimale contrastverhouding van 4.5:1 is vereist. Dit geldt voor lopende tekst, alinea's en alle tekst kleiner dan 18pt (24px) of 14pt vet (18.66px vet).
- WCAG-niveau AA (grote tekst): Een minimale contrastverhouding van 3:1 is vereist. Grote tekst is tekst van minimaal 18pt (24px) of 14pt vet (18.66px vet).
- WCAG-niveau AAA (normale tekst): Een minimale contrastverhouding van 7:1 is vereist. Dit is het hoogste niveau van toegankelijkheidsconformiteit voor tekst van normale grootte.
- WCAG-niveau AAA (grote tekst): Voor grote tekst op conformiteitsniveau AAA is een minimale contrastverhouding van 4.5:1 vereist.
Voldoen aan minstens WCAG AA geldt als de basisnorm voor toegankelijk webontwerp en is in veel wettelijke kaders over de hele wereld verplicht, waaronder de Americans with Disabilities Act (ADA), de Europese toegankelijkheidswet (European Accessibility Act) en Section 508 van de Rehabilitation Act. WCAG AAA biedt een hoger niveau van toegankelijkheid dat wordt aanbevolen waar dat haalbaar is.
Hoe de contrastverhouding wordt berekend
De contrastverhouding tussen twee kleuren wordt bepaald aan de hand van de relatieve luminantie van elke kleur, zoals gedefinieerd in de WCAG 2.1-specificatie. Relatieve luminantie meet de waargenomen helderheid van een kleur op een schaal van 0 (donkerste zwart) tot 1 (lichtste wit).
De berekening bestaat uit drie stappen. Eerst wordt elk kleurkanaal (rood, groen, blauw) omgezet van de 8-bits sRGB-waarde (0-255) naar een genormaliseerde sRGB-waarde (0-1) door te delen door 255. Daarna ondergaat elke genormaliseerde waarde een gammacorrectie: is de waarde 0.04045 of lager, dan wordt ze gedeeld door 12.92; anders wordt ze omgezet met de formule ((value + 0.055) / 1.055) ^ 2.4. Ten slotte worden de gelineariseerde kanaalwaarden gecombineerd met gewogen coëfficiënten: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
De uiteindelijke contrastverhouding wordt berekend als (L1 + 0.05) / (L2 + 0.05), waarbij L1 de relatieve luminantie van de lichtere kleur is en L2 die van de donkerdere kleur. Het resultaat is een waarde van 1:1 (geen contrast, identieke kleuren) tot 21:1 (maximaal contrast, zuiver zwart op zuiver wit).
Belangrijkste functies
- Berekening van de contrastverhouding in realtime met de officiële W3C WCAG 2.1-luminantieformule
- Slaagt/faalt-indicatoren voor WCAG AA- en AAA-conformiteitsniveaus, voor zowel normale als grote tekst
- Interactieve kleurkiezer en hex-invoer voor zowel voorgrond- als achtergrondkleuren
- Kleuren met één klik omwisselen om omgekeerde kleurcombinaties te testen
- Tien snelle voorinstellingen voor kleurcombinaties, waaronder gangbare toegankelijke combinaties
- Live tekstvoorbeeld dat laat zien hoe uw kleuren eruitzien bij normale en grote tekstgroottes
- Automatische suggestie van de dichtstbijzijnde geslaagde voorgrondkleur wanneer de huidige combinatie faalt
- Technische luminantiegegevens voor zowel voorgrond- als achtergrondkleuren
- Volledige ondersteuning voor donkere modus voor comfortabel gebruik in elke omgeving
- Alle verwerking gebeurt lokaal in de browser, zonder dat gegevens naar externe servers worden verzonden
WCAG-contrast controleren gebruiken
- Stel de voorgrondkleur in: Klik op het vierkant van de kleurkiezer of typ een hexwaarde (bijv. #1A1A2E) in het tekstveld om uw tekst- of voorgrondkleur in te stellen.
- Stel de achtergrondkleur in: Gebruik op dezelfde manier de kleurkiezer of hex-invoer om de achtergrondkleur achter de tekst in te stellen.
- Bekijk de resultaten: De contrastverhouding en de slaagt/faalt-resultaten voor alle vier de WCAG-niveaus verschijnen direct terwijl u de kleuren wijzigt.
- Bekijk het livevoorbeeld: Scroll omlaag om echte tekst te zien met uw gekozen kleurcombinatie, in zowel normale als grote tekstgrootte.
- Pas suggesties toe: Als de combinatie niet voldoet aan WCAG AA, wordt een voorgestelde voorgrondkleur getoond. Klik op Toepassen om die te gebruiken.
- Probeer voorinstellingen: Gebruik de snelle voorinstellingen om bekende toegankelijke of ontoegankelijke kleurcombinaties te testen.
- Wissel kleuren om: Klik op de knop Kleuren omwisselen om uw voorgrond- en achtergrondkeuze om te keren.
Waarom kleurcontrast belangrijk is voor toegankelijkheid
Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen wereldwijd heeft een vorm van kleurenblindheid. Daarnaast hebben miljoenen mensen te maken met slechtziendheid, leeftijdsgebonden veranderingen in het zicht of situationele beperkingen zoals schittering op het scherm. Voldoende kleurcontrast is een van de meest effectieve en eenvoudigste manieren om webinhoud toegankelijk te maken voor al deze gebruikers.
Slecht contrast tussen tekst en achtergrond is een van de meest voorkomende toegankelijkheidsproblemen bij webaudits. Door tijdens het ontwerp- en ontwikkelproces een WCAG-contrastchecker te gebruiken, kunnen teams contrastproblemen opsporen en oplossen voordat ze in productie komen, waardoor herstelkosten dalen en de naleving van toegankelijkheidsregels vanaf het begin is geborgd.
Goed kleurcontrast komt ook ten goede aan gebruikers zonder beperking. Het verbetert de leesbaarheid in fel zonlicht, op beeldschermen van lage kwaliteit en in drukke omgevingen met veel afleiding. Toegankelijk ontwerp is inclusief ontwerp en zorgt voor een betere ervaring voor iedereen.
Veelgestelde vragen
Wat is het verschil tussen WCAG AA en AAA?
WCAG AA is het standaardniveau van conformiteit dat voor de meeste websites en toepassingen wordt aanbevolen. Het vereist een minimale contrastverhouding van 4.5:1 voor normale tekst en 3:1 voor grote tekst. WCAG AAA is een strenger niveau dat 7:1 vereist voor normale tekst en 4.5:1 voor grote tekst. Hoewel AAA niet voor alle inhoud haalbaar is, wordt het aanbevolen voor kritieke tekstelementen en waar maximale leesbaarheid nodig is.
Wat telt als grote tekst in WCAG?
Volgens WCAG 2.1 is grote tekst tekst van minimaal 18 punten (ongeveer 24 CSS-pixels) of 14 punten (ongeveer 18.66 CSS-pixels) als de tekst vet is. Grote tekst heeft lagere contrasteisen omdat de grootte zelf het lezen al makkelijker maakt.
Ondersteunt deze tool transparantie of alfakanalen?
Deze tool werkt met dekkende hexkleuren (hexcodes van 6 cijfers). Bij kleuren met transparantie hangt het effectieve contrast af van de achtergrond achter de transparante laag, die over de pagina kan verschillen. Om halftransparante tekst te controleren, berekent u eerst de effectieve effen kleur die ontstaat wanneer de transparante laag op de werkelijke achtergrond ligt, en test u die effen kleur vervolgens hier.
Is naleving van WCAG wettelijk verplicht?
In veel rechtsgebieden wel. De ADA in de Verenigde Staten, de Europese toegankelijkheidswet (European Accessibility Act) in de EU, de Accessibility for Ontarians with Disabilities Act (AODA) in Canada en vergelijkbare wetgeving in andere landen verwijzen naar WCAG 2.1 niveau AA als standaard voor digitale toegankelijkheid, of nemen die op. Organisaties die niet aan deze eisen voldoen, riskeren juridische stappen, boetes en reputatieschade.