Contrast Checker: kleurcontrast volgens WCAG controleren
De Contrast Checker controleert je kleurcontrast en berekent de WCAG-contrastverhouding tussen tekst- en achtergrondkleur (bijv. 4.48:1 voor #777777 op wit). Je ziet of de combinatie aan AA en AAA voldoet. Zo niet, dan stelt de tool de dichtstbijzijnde kleur voor die AA haalt. Gratis, zonder account en rechtstreeks in je browser.
Gebouwd door Justin Schuessler
Contrast gecontroleerd? Zet je site online met snelle, betrouwbare webhosting.
Contrastverhouding
21.00:1
Normale tekst
De snelle bruine vos springt over de luie hond.
Grote tekst
De snelle vos
Verder met deze kleuren: Voorgrondkleur controleren in de kleurenblindheidssimulator · Kleurenschema maken op basis van de voorgrondkleur
Ontwikkeld met privacy in gedachten. Je invoer wordt in de browser verwerkt en niet naar een server verzonden.
Voorbeeldresultaat
Zo ziet het resultaat in de Contrast Checker eruit
Je voert een tekst- en achtergrondkleur in. De tool berekent de contrastverhouding, controleert alle WCAG-niveaus en stelt bij een onvoldoende resultaat de dichtstbijzijnde kleur voor die aan AA voldoet. De kleuren hieronder zijn een voorbeeld. Je resultaat hangt af van je kleuren.
Voorbeeld · #777777 op #ffffff
AA voor normale tekst niet gehaald- Contrastverhouding
- 4.48:1
- Minimumwaarde voor AA bij normale tekst: 4.5:1.
- Gehaalde niveaus
- 2/5
- Geslaagd: AA â Grote tekst (3:1), UI-componenten en afbeeldingen (3:1)
- Voorgestelde voorgrondkleur
- #767676
- Bereikt 4.54:1 en daarmee AA voor normale tekst, met de kleinste helderheidsaanpassing.
Zo lees je het resultaat
Elk WCAG-niveau heeft een vaste minimumwaarde. Het voorbeeld met 4.48:1 wordt voor elk niveau afzonderlijk gecontroleerd.
| WCAG-niveau | Voorbeeld |
|---|---|
| AA â Normale tekst (4.5:1) | Niet geslaagd |
| AA â Grote tekst (3:1) | Geslaagd |
| AAA â Normale tekst (7:1) | Niet geslaagd |
| AAA â Grote tekst (4.5:1) | Niet geslaagd |
| UI-componenten en afbeeldingen (3:1) | Geslaagd |
Functies
Meer dan een contrastcalculator: dit controleert de Contrast Checker
Voldoende kleurcontrast maakt tekst en bedieningselementen leesbaar voor mensen met een visuele beperking en bij weinig licht. De kleurcontrastchecker laat zien of je combinatie aan de WCAG-grenswaarden voldoet en helpt je het contrast te verbeteren.
Vijf WCAG-controles in Ă©Ă©n oogopslag
Voor elke kleurencombinatie laat de tool zien of deze voldoet aan AA en AAA voor normale en grote tekst, en of het minimumcontrast van 3:1 voor UI-componenten en afbeeldingen wordt gehaald.
Kleurvoorstel met Ă©Ă©n klik
Als het contrast niet voldoet aan AA voor normale tekst, stelt de tool de dichtstbijzijnde kleur voor die 4.5:1 haalt. Daarbij verandert alleen de helderheid van de tekst- of achtergrondkleur, afhankelijk van welke de kleinste aanpassing nodig heeft.
Hex, RGB en kleurkiezer
Voer kleuren in als hexwaarde met of zonder #, met drie of zes tekens, als rgb() of rgba(), of als losse waarden zoals 34, 34, 34. Je kunt ze ook met de kleurkiezer selecteren.
Livevoorbeeld voor normale en grote tekst
Twee voorbeeldkaarten tonen tekst in normale en grote letters, rechtstreeks in jouw kleuren.
Deelbare link
De huidige kleuren staan automatisch in de URL. Als je de link kopieert, opent die dezelfde combinatie. Handig om met je team af te stemmen.
Berekening in de browser
De contrastverhouding wordt rechtstreeks in je browser berekend. Je kleuren worden niet naar een server verzonden.
WCAG-grenswaarden
Welke contrastverhouding heb je volgens WCAG nodig?
De Contrast Checker toetst je kleuren aan deze vijf minimumwaarden. Niveau AA is de gebruikelijke minimumeis; AAA is het strengere niveau voor extra goed leesbare inhoud.
| WCAG-niveau | Minimumcontrast | Geldt voor |
|---|---|---|
| AA â Normale tekst (4.5:1) | 4.5:1 | Lopende tekst en labels die niet voldoen aan de criteria voor grote tekst |
| AA â Grote tekst (3:1) | 3:1 | Tekst vanaf 24 px (18 pt) of vetgedrukte tekst vanaf 18,66 px (14 pt) |
| AAA â Normale tekst (7:1) | 7:1 | Lopende tekst op het strengere, vrijwillige niveau |
| AAA â Grote tekst (4.5:1) | 4.5:1 | Grote tekst op het strengere, vrijwillige niveau |
| UI-componenten en afbeeldingen (3:1) | 3:1 | Randen van invoervelden, pictogrammen en andere grafische elementen (WCAG 1.4.11) |
Wil je controleren of je kleuren ook bij kleurenblindheid te onderscheiden zijn? De kleurenblindheidssimulator laat zien hoe een kleur eruitziet bij verschillende vormen van kleurenblindheid. Naar de kleurenblindheidssimulator
Zo werkt het
Kleurcontrast controleren in 6 stappen
Van tekst- en achtergrondkleur tot een toegankelijke combinatie die je kunt kopiëren of delen.
Stap 1
Tekstkleur invoeren
Voer de tekstkleur in het veld âVoorgrond (tekst)â in als hex- of RGB-waarde, of selecteer deze met de kleurkiezer.
Stap 2
Achtergrondkleur invoeren
Voer de achtergrondkleur op dezelfde manier in het veld âAchtergrondâ in. Met de pijlknop tussen de velden verwissel je de voorgrond- en achtergrondkleur.
Stap 3
Contrastverhouding aflezen
Lees de contrastverhouding af en controleer de vijf badges voor AA en AAA bij normale en grote tekst, en voor UI-componenten en afbeeldingen. Een vinkje betekent dat de combinatie voldoet; een kruisje dat deze niet voldoet.
Stap 4
Voorbeeld controleren
Bekijk in het voorbeeld hoe normale en grote tekst eruitzien in jouw kleurencombinatie.
Stap 5
Kleurvoorstel toepassen
Als de combinatie niet voldoet aan AA voor normale tekst, klik je op âDichtstbijzijnde geschikte kleur voorstellenâ en daarna op âToepassenâ.
Stap 6
Kleuren kopiëren of delen
Kopieer de hexwaarde met de kopieerknop naast het veld, of deel de URL uit de adresbalk. Daarin staan beide kleuren.
Meer ontdekken
Meer kleurtools
Kleurenblindheidssimulator
Simuleer live hoe kleurenpaletten en eigen afbeeldingen worden waargenomen bij protanopie, deuteranopie, tritanopie en achromatopsie â volledig berekend in de browser.
Gebouwd door Justin Schuessler
Kleurenschemagenerator
Genereer live complementaire, analoge, triadische en andere kleurenschema's op basis van Ă©Ă©n kleur â niets wordt opgeslagen of verzonden.
Gebouwd door Justin Schuessler
Kleurkiezer
Kleuren direct omzetten tussen HEX, RGB, HSL, HSV en CMYK, de dichtstbijzijnde CSS-kleurnaam vinden en het WCAG-contrast met zwart/wit controleren â volledig in de browser.
Gebouwd door Justin Schuessler
Kleurkiezer voor afbeeldingen
Lees een kleurcode uit een afbeelding af: kleurenpipet met vergrootglas, HEX, RGB en HSL, het kleurenpalet van de afbeelding en een contrastindicatie. De afbeelding blijft in de browser.
Gebouwd door Dimitri Heissler
FAQ
Veelgestelde vragen over de Contrast Checker
Korte antwoorden over kleurcontrast, WCAG en deze tool.
Je kunt de Contrast Checker gratis en zonder account gebruiken. De contrastverhouding wordt rechtstreeks in je browser berekend; je kleuren worden niet naar een server verzonden.
De tool berekent met de WCAG 2.x-formule eerst de relatieve luminantie (L) van beide kleuren. Daarna deelt hij L van de lichtere kleur plus 0.05 door L van de donkerdere kleur plus 0.05. Het resultaat ligt tussen 1:1 (identieke kleuren) en 21:1 (zwart op wit). De volgorde van de kleuren maakt niet uit. Hoe hoger de waarde, hoe makkelijker de tekst tegen de achtergrond te lezen is.
Voor niveau AA heeft normale tekst een contrast van minimaal 4.5:1 nodig en grote tekst 3:1. Het strengere niveau AAA vereist 7:1 voor normale en 4.5:1 voor grote tekst. UI-componenten en afbeeldingen, zoals randen van invoervelden en pictogrammen, hebben 3:1 nodig. De meeste wettelijke eisen verwijzen naar AA; AAA is een vrijwillig, strenger niveau.
Tekst geldt als groot vanaf 18pt (24px), of vanaf 14pt (18.66px) als deze ook vetgedrukt is. Voor grote tekst gelden lagere minimale contrastverhoudingen (3:1 in plaats van 4.5:1 voor AA), omdat grotere letters ook bij minder contrast goed leesbaar blijven.
Hexwaarden met of zonder #, met drie of zes tekens (#fff of #ffffff), rgb() en rgba(), en losse waarden zoals 34, 34, 34. Je kunt elke kleur ook met de kleurkiezer selecteren. Bij rgba() wordt de alfawaarde genegeerd: de tool rekent met de ondoorzichtige kleur. Een ongeldige invoer wordt in het veld gemarkeerd totdat de waarde weer geldig is.
Als je combinatie niet voldoet aan AA voor normale tekst (4.5:1), stelt de tool met Ă©Ă©n klik de dichtstbijzijnde kleur voor die deze waarde haalt. Daarbij verandert alleen de helderheid van de tekst- of achtergrondkleur, afhankelijk van welke de kleinste aanpassing nodig heeft. Met âToepassenâ neem je het voorstel over. Voorbeeld: #777777 op #ffffff haalt 4.48:1; het voorstel #767676 haalt 4.54:1.
Ja. De Contrast Checker zet de huidige voorgrond- en achtergrondkleur automatisch in de URL. Als je de link uit de adresbalk kopieert, opent die dezelfde combinatie. Via de links onder het voorbeeld kun je de voorgrondkleur ook doorgeven aan de kleurenblindheidssimulator of de kleurenschemagenerator.
Wetgeving zoals de European Accessibility Act (EAA) en de nationale uitwerking daarvan, of de ADA in de VS, verplicht veel websites en apps tot een minimum aan toegankelijkheid en verwijst daarbij meestal naar de WCAG. Voldoende tekstcontrast is een van de meest gecontroleerde punten. Deze tool vervangt geen juridisch advies, maar helpt je de technische WCAG-contrastwaarden zelf te controleren.
Nog vragen?
Contact opnemen met supportJe volgende project heeft een betrouwbare server nodig
Een ZAP-Hosting VPS brengt je website of applicatie betrouwbaar online.
Geen installatie. Geen risico. Binnen enkele seconden online.
Op zoek naar meer tools? Alle beeld- en ontwerptools bekijken