Kleurcontrastchecker

Advertentie

Controleer of uw kleurcombinaties voldoen aan de WCAG-toegankelijkheidsnormen voor leesbaarheid van tekst.

Voorbeelden:
WCAG 2.2 12.63:1
APCA Score (Lc) Lc 97
Pa's wijze lynx bezag vroom het fikse aquaduct.
Voorbeeld grote tekst
Vette tekst bij 14pt gewicht 700
Knop Link text
WCAG-niveau Normale tekst Grote tekst UI-Componenten
AA (Verplicht)
AAA

APCA Minimale Lettergroottes

Gewicht300400500600700

CSS-code

Simulatie kleurenblindheid

Pa's wijze lynx bezag vroom het fikse aquaduct.
Voorbeeld grote tekst
Advertentie

Over deze tool

Kleurcontrastcontrole is het proces van het meten van het helderheidsverschil tussen voorgrond- en achtergrondkleuren om te bepalen of tekst leesbaar blijft voor alle gebruikers, inclusief mensen met visuele beperkingen. De Web Content Accessibility Guidelines (WCAG), ontwikkeld door het World Wide Web Consortium (W3C), stellen de internationale standaard voor digitale toegankelijkheid vast en definiëren specifieke contrastdrempels waar elke website en applicatie aan moet voldoen. WCAG 2.2 specificeert twee conformiteitsniveaus voor contrast. Niveau AA, de minimumstandaard vereist door de meeste toegankelijkheidswetten, eist een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst (18pt normaal of 14pt vet). Niveau AAA, de verbeterde standaard aanbevolen voor overheids-, gezondheids- en educatieve content, vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. Deze drempels zijn gebaseerd op onderzoek naar hoe mensen met matig verminderd zicht scherminhoud waarnemen. Toegankelijkheid is ook een wettelijke verplichting in veel jurisdicties. De Americans with Disabilities Act (ADA) in de Verenigde Staten, Section 508 van de Rehabilitation Act en de Europese norm EN 301 549 schrijven allemaal voor dat digitale content waarneembaar moet zijn voor mensen met een beperking. Niet-naleving kan leiden tot rechtszaken, boetes en uitsluiting van een aanzienlijk deel van uw publiek. Deze tool berekent contrastverhoudingen door sRGB-kleurwaarden om te zetten naar lineair RGB, de relatieve luminantie te berekenen met de ITU-R BT.709-coefficienten en de WCAG-formule (L1 + 0,05) / (L2 + 0,05) toe te passen. Het biedt ook kleurenblindheidsimulatie voor protanopie, deuteranopie en tritanopie, zodat ontwerpers kunnen verifieren dat hun kleurkeuzes werken voor de geschatte 300 miljoen mensen met een kleurzichtafwijking. Alle berekeningen worden lokaal in uw browser uitgevoerd.

Bronnen: WCAG 2.2 · SC 1.4.3 · SC 1.4.11

Hoe te gebruiken

  1. Voer uw tekst- (voorgrond) en achtergrondkleuren in met de kleurkiezers of door HEX-codes te typen.
  2. Controleer de contrastverhouding en de WCAG-nalevingsresultaten. Groen betekent geslaagd, rood betekent niet geslaagd.
  3. Gebruik de kleurenblindheidsimulatie om te verifieren dat uw kleuren werken voor gebruikers met visuele beperkingen.

Hoe te gebruiken

  1. Voer uw tekst- (voorgrond) en achtergrondkleuren in met de kleurkiezers of door HEX-codes te typen.
  2. Controleer de contrastverhouding en de WCAG-nalevingsresultaten. Groen betekent geslaagd, rood betekent niet geslaagd.
  3. Gebruik de kleurenblindheidsimulatie om te verifieren dat uw kleuren werken voor gebruikers met visuele beperkingen.

Methodologie

De contrastverhouding-berekening volgt het WCAG 2.2 algoritme nauwkeurig. Eerst wordt de hexcode van elke kleur ontleed in de rode, groene en blauwe componenten, die vervolgens worden genormaliseerd naar waarden tussen 0 en 1 door te delen door 255. Deze lineaire waarden ondergaan gammacorrectie met de sRGB-transferfunctie: waarden gelijk aan of onder 0,03928 worden gedeeld door 12,92, terwijl grotere waarden de formule ((waarde + 0,055) / 1,055) tot de macht 2,4 gebruiken. Deze gammacorrectie houdt rekening met de niet-lineaire manier waarop beeldschermen licht uitzenden. Vervolgens wordt de relatieve luminantie berekend met de ITU-R BT.709-coefficienten: L = 0,2126R + 0,7152G + 0,0722B. Deze gewichten weerspiegelen de verschillende gevoeligheid van het menselijk oog voor elke primaire kleur, waarbij groen het meest bijdraagt aan de waargenomen helderheid. De uiteindelijke contrastverhouding wordt berekend als (L1 + 0,05) / (L2 + 0,05), waarbij L1 de luminantie van de lichtere kleur is. De resultaten varieren van 1:1 (identieke kleuren) tot 21:1 (puur zwart op puur wit). De tool beoordeelt deze verhouding vervolgens tegen zowel de AA- als AAA-drempels voor normale tekst en grote tekst, en geeft een duidelijk geslaagd- of niet-geslaagd-resultaat voor elk conformiteitsniveau.

Bronnen: WCAG 2.2 Luminance · SC 1.4.3

Je resultaten begrijpen

Een contrastverhouding van 4,5:1 of hoger voldoet aan WCAG AA voor normale tekst, de standaard die de meeste websites moeten nastreven. Een verhouding van 3:1 voldoet aan AA voor grote tekst (18pt normaal of 14pt vet en groter) en is ook voldoende voor UI-componenten zoals formulierranden, iconen en focusindicatoren. Voor het verbeterde AAA-niveau hebt u 7:1 nodig voor normale tekst en 4,5:1 voor grote tekst. Wanneer de tool "Niet geslaagd" toont, betekent dit dat gebruikers met matige visuele beperkingen moeite kunnen hebben om te lezen. Om het contrast te verbeteren met behoud van merkesthetiek, probeer een kleur geleidelijk donkerder of lichter te maken in plaats van deze volledig te vervangen. Vaak is een verschuiving van slechts 10-15% in lichtheid genoeg om de drempel te overschrijden. Veelvoorkomende valkuilen zijn lichtgrijze placeholder-tekst, het gebruik van dunne lettertypes die het waargenomen contrast verminderen en het over het hoofd zien van het contrast van uitgeschakelde elementen. De resultaten van de kleurenblindheidsimulatie zijn even belangrijk. Zelfs als uw kleuren de contrastcontrole doorstaan, kunnen ze ononderscheidbaar worden voor gebruikers met een kleurzichtafwijking. Een rode knop op een groene achtergrond heeft misschien voldoende contrast voor normaal zicht, maar kan bijna identiek lijken voor iemand met deuteranopie. Controleer altijd uw ontwerp over alle gesimuleerde zichttypen en gebruik aanvullende aanwijzingen zoals iconen, patronen of tekstlabels.

Praktische voorbeelden

Een startup die hun marketingwebsite herontwerpt, test hun merkkleuren (#2563EB blauwe tekst op #F8FAFC lichtgrijze achtergrond) en vindt een contrastverhouding van 5,2:1, die AA doorstaat maar AAA niet. Ze verdonkeren het blauw naar #1D4ED8, bereiken 7,1:1 en voldoen aan beide standaarden zonder hun merkidentiteit significant te wijzigen. Een ontwikkelaar van een gezondheidsapp controleert de styling van foutmeldingen (rode tekst op wit) en ontdekt dat #EF4444 op #FFFFFF slechts 3,9:1 bereikt, wat zelfs AA niet haalt. De kleurenblindheidsimulatie onthult dat het ook zwak lijkt voor protanopie-gebruikers. Ze schakelen over naar #DC2626 en voegen een waarschuwingspictogram toe. Een UI-ontwerper valideert dat alle knoplabels, formulierranden en focusindicatoren in een componentenbibliotheek voldoen aan minimaal de 3:1-vereiste voor niet-tekstelementen, terwijl de broodtekst de volledige AA-drempel van 4,5:1 haalt.

Praktische Tips voor Toegankelijk Ontwerp

Begin met het kiezen van kleurparen met hoog contrast en bouw dan uw palet daaromheen. Streef naar minimaal 7:1 contrast voor broodtekst, zelfs als alleen AA (4,5:1) vereist is, want dit biedt een comfortabele veiligheidsmarge. Vertrouw nooit alleen op kleur om informatie over te brengen. Gebruik iconen, onderstrepingen of tekstlabels als secundaire indicatoren zodat kleurenblinde gebruikers niet worden uitgesloten. Test uw ontwerpen in grijstinten om snel contrastproblemen op te sporen. Als elementen verdwijnen of samensmelten zonder kleur, is het contrast onvoldoende. Controleer altijd zowel de lichte als de donkere modus. Donkere thema's hebben vaak een lager effectief contrast, vooral met gekleurde tekst op donkere achtergronden. Controleer hover- en focustoestanden apart, omdat deze interactieve toestanden soms lichtere kleuren gebruiken die niet aan de vereisten voldoen. Installeer toegankelijkheidsbrowserextensies zoals axe DevTools of WAVE om hele pagina's te auditen, en combineer contrastcontrole met kleurenblindheidsimulatie voor uitgebreide dekking.

Bronnen

Alle berekeningen worden lokaal in je browser uitgevoerd. Er worden geen gegevens naar een server gestuurd.

Was deze tool nuttig?
Wil je ons meer vertellen?
0/500
Wil je dat we contact opnemen?
Bedankt voor je feedback!

Veelgestelde vragen
Wat is de WCAG-contrastverhouding?
De WCAG-contrastverhouding meet het verschil in helderheid (luminantie) tussen twee kleuren op een schaal van 1:1 (geen contrast) tot 21:1 (maximaal contrast, zwart op wit). De Web Content Accessibility Guidelines (WCAG) 2.1 vereisen minimale contrastverhoudingen om ervoor te zorgen dat tekst leesbaar is voor mensen met een visuele beperking.
Wat zijn de WCAG AA- en AAA-vereisten?
WCAG AA vereist 4,5:1 contrast voor normale tekst en 3:1 voor grote tekst (18pt+ of 14pt vet). WCAG AAA (verbeterd) vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. AA is de standaard voor de meeste websites, terwijl AAA betere toegankelijkheid biedt voor gebruikers met ernstigere visuele beperkingen.
Wat wordt als grote tekst beschouwd?
Grote tekst is gedefinieerd als 18 punt (24px) of groter voor normaal gewicht, of 14 punt (18,66px) of groter voor vette tekst. Grote tekst heeft lagere contrastvereisten omdat deze bij lagere contrastverhoudingen gemakkelijker te lezen is.
Hoe wordt de contrastverhouding berekend?
De contrastverhouding wordt berekend aan de hand van de relatieve luminantie van twee kleuren, zoals gedefinieerd in WCAG 2.2 Succescriterium 1.4.3. De formule is (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtere kleur is en L2 die van de donkerdere. Relatieve luminantie houdt rekening met hoe het menselijk oog helderheid anders waarneemt over het kleurenspectrum — groen lijkt veel helderder dan blauw bij dezelfde fysieke intensiteit. De resulterende verhouding loopt van 1:1 (identieke kleuren, geen contrast) tot 21:1 (zwart op wit, maximaal contrast). WCAG AA vereist minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst.
Welke veelvoorkomende kleurcombinaties voldoen niet aan WCAG?
De meest voorkomende fouten betreffen lichte kleuren op witte achtergronden of vergelijkbare combinaties met laag contrast. Rode tekst op groene achtergronden (en omgekeerd) faalt vaak omdat de luminantiewaarden vergelijkbaar zijn ondanks een 'verschillend' uiterlijk in tint. Lichtgrijze tekst op wit (#999 op #fff = 2,85:1, faalt AA) komt extreem veel voor op websites. Gele tekst op wit is bijna altijd onzichtbaar (faalt zwaar). Oranje op wit is grensgevallen. Placeholdertekst in lichtgrijs (#aaa op #fff = 2,32:1) faalt voor WCAG en is een wijdverspreid toegankelijkheidsprobleem. Bij twijfel, controleer elke tekst-achtergrondcombinatie, inclusief hover-states en focusindicatoren.
Heeft de donkere modus andere contrastverhoudingen nodig?
Nee — dezelfde WCAG-contrastverhoudingsvereisten (4,5:1 voor AA normale tekst, 3:1 voor AA grote tekst) gelden ongeacht of het ontwerp de lichte of donkere modus gebruikt. De donkere modus brengt echter unieke uitdagingen met zich mee. Witte tekst op puur zwart (#fff op #000 = 21:1) veroorzaakt feitelijk visueel ongemak bij veel gebruikers door halatie — heldere tekst lijkt uit te vloeien in de donkere achtergrond, vooral voor mensen met astigmatisme. De beste praktijk voor de donkere modus is het gebruik van gebroken wit tekst op een donkergrijze achtergrond (bijv. #e0e0e0 op #1a1a1a = 13,28:1), wat WCAG AAA overtreft en comfortabel leesbaar blijft.
Hoe beïnvloedt sRGB de WCAG-contrastverhouding-berekening?
WCAG 2.2 definieert relatieve luminantie met behulp van de sRGB-kleurruimtestandaard (IEC 61966-2-1). sRGB is de standaard kleurruimte voor het web en de meeste consumentenschermen. Voordat de luminantie wordt berekend, moet elk kleurkanaal (R, G, B) worden gelineariseerd met de sRGB-transferfunctie — een gammacorrectie die de niet-lineaire schermwaarden omzet naar lineaire lichtintensiteit. Specifiek worden genormaliseerde kanaalwaarden (0–1) gelijk aan of onder 0,04045 gedeeld door 12,92, terwijl grotere waarden de formule ((waarde + 0,055) / 1,055) tot de macht 2,4 gebruiken. Deze linearisatie is essentieel omdat de schermhelderheid niet evenredig is met de opgeslagen kleurwaarde. Zonder sRGB-linearisatie zouden contrastverhoudingen onnauwkeurig zijn, met name voor middenbereikkleuren waar de gammacurve het grootste effect heeft.
Wat is het verschil tussen APCA- en WCAG-contrast?
WCAG 2.2 gebruikt een eenvoudige luminantieverhouding-formule die alle tekst gelijk behandelt, ongeacht grootte, gewicht of of de tekst donker op licht of licht op donker is. De formule produceert een verhouding van 1:1 tot 21:1 met vaste drempels. APCA (Accessible Perceptual Contrast Algorithm), voorgesteld voor WCAG 3.0, is een geavanceerder model. Het houdt rekening met het perceptuele verschil tussen donkere tekst op een lichte achtergrond en lichte tekst op een donkere achtergrond (polariteitsgevoeligheid). Het produceert een Lightness Contrast (Lc) waarde die de werkelijke leesbaarheid beter voorspelt. APCA biedt ook lettertypegrootte-specifieke aanbevelingen: voor een bepaalde Lc-waarde beveelt het minimale tekstgroottes aan bij verschillende lettergewichten. Beide standaarden zijn beschikbaar in deze tool ter vergelijking.
Kan ik dit als contrastverhouding-calculator gebruiken voor niet-webontwerpen?
Ja. De contrastverhouding-formule gebruikt universele sRGB-luminantiewaarden die van toepassing zijn op elk medium waar kleuren op een scherm worden weergegeven — inclusief mobiele apps, desktopsoftware, digitale bewegwijzering, kiosken en presentaties. De berekening meet het objectieve luminantieverschil tussen twee kleuren, een fysieke eigenschap onafhankelijk van het medium. De WCAG AA- en AAA-drempels (4,5:1 en 7:1) zijn ontwikkeld voor webcontent, maar de onderliggende contrastverhouding is even nuttig voor het beoordelen van leesbaarheid in elke digitale context. Apple's Human Interface Guidelines en Google's Material Design verwijzen naar dezelfde schaal. Voor printontwerp biedt dezelfde formule een nuttige benadering, hoewel gedrukte kleuren afhangen van inkt, papier en lichtomstandigheden.
Hoe gebruik ik deze kleurcontrastchecker?
Voer uw tekst- (voorgrond-) kleur en achtergrondkleur in met de kleurkiezers, of typ HEX-codes direct in. U kunt ook overschakelen naar RGB- of HSL-invoer via de formaattabs, of de pipetknop gebruiken om kleuren direct van uw scherm te selecteren. De tool toont direct uw WCAG 2.2 contrastverhouding en APCA-score, met geslaagd/niet-geslaagd badges voor elk niveau. Het live voorbeeldgebied toont hoe uw tekst er werkelijk uitziet in verschillende groottes en gewichten. Als uw kleuren niet slagen, stelt de tool de dichtstbijzijnde passende alternatieven voor AA en AAA voor. U kunt ook controleren hoe uw kleurcombinatie eruit ziet voor mensen met verschillende soorten kleurenzicht. Gebruik de deelknop om een link met uw huidige kleurinstellingen te kopiëren.
Zijn mijn kleurgegevens privé bij het gebruik van deze tool?
Ja, volledig. Alle contrastberekeningen worden volledig in uw browser uitgevoerd met JavaScript. Geen kleurgegevens, resultaten of instellingen worden ooit naar een server gestuurd. De tool werkt offline na het laden, en uw kleurkeuzes worden nooit opgeslagen, gevolgd of gedeeld. Wanneer u de deellink-functie gebruikt, worden uw kleuren gecodeerd in de URL zelf — ze worden nergens geüpload.