🎨
← Terug naar handleidingen

Toegankelijk kleurcontrast: WCAG-richtlijnen uitgelegd voor ontwerpers

· Tags: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

Toegankelijk kleurcontrast: WCAG-richtlijnen uitgelegd

Kleurcontrast is een van de belangrijkste aspecten van webtoegankelijkheid. Het heeft direct invloed op of gebruikers uw inhoud kunnen lezen, door uw interface kunnen navigeren en hun taken kunnen voltooien. Toch blijven contrastproblemen een van de meest voorkomende toegankelijkheidsproblemen op het web — vaak omdat ontwerpers kleuren kiezen die er op hun eigen schermen goed uitzien zonder de verhoudingen te verifiëren.

Deze gids legt alles uit wat u moet weten over de WCAG-eisen voor kleurcontrast, hoe u eraan voldoet en hoe u toegankelijke interfaces ontwerpt zonder in te leveren op visuele kwaliteit.

Wat is de kleurcontrastverhouding?

Kleurcontrast is een maat voor het verschil in waargenomen luminantie tussen twee kleuren — doorgaans voorgrond (tekst) en achtergrond. Contrast wordt uitgedrukt als een verhouding die varieert van 1:1 (identieke kleuren, onzichtbare tekst) tot 21:1 (zwarte tekst op een witte achtergrond, het maximale).

De contrastverhouding wordt berekend met relatieve luminantie, die rekening houdt met hoe menselijke ogen verschillende golflengtes van licht waarnemen. De formule is:

Contrastverhouding = (L1 + 0.05) / (L2 + 0.05)

Waarbij L1 de relatieve luminantie is van de lichtere kleur en L2 de relatieve luminantie van de donkerdere kleur. Het menselijk oog is gevoeliger voor groen licht dan voor rood of blauw, dus de luminantieberekening weegt kanalen anders.

U hoeft dit niet handmatig te berekenen. Elke contrastcontroletool, inclusief onze kleurenconverter, doet dit direct.

WCAG-contrasteisen

De Web Content Accessibility Guidelines (WCAG) definiëren drie niveaus van conformiteit: A, AA en AAA. De eisen voor kleurcontrast zijn van toepassing op de niveaus AA en AAA.

WCAG AA-niveau (aanbevolen minimum)

AA is de minimale norm voor de meeste websites en is in veel rechtsgebieden wettelijk verplicht (waaronder de European Accessibility Act en toegankelijkheidsvoorschriften in de VS, Canada en Australië).

| Tekstcategorie | Minimale verhouding | Voorbeeld van conform grijs op wit | |---------------|--------------|-------------------------------------| | Normale tekst (onder 18px / 14px vet) | 4,5:1 | #767676 op wit | | Grote tekst (18px+ vet of 24px+ normaal) | 3:1 | #9A9A9A op wit | | UI-componenten (randen, pictogrammen, formuliervelden) | 3:1 | Componentranden, focusindicatoren | | Niet-decoratieve afbeeldingen | 3:1 | Diagrammen, infographics, pictogrammen |

WCAG AAA-niveau (verbeterd)

AAA is een hogere norm die betere leesbaarheid biedt, vooral voor gebruikers met slechtziendheid of problemen met contrastgevoeligheid.

| Tekstcategorie | Minimale verhouding | Voorbeeld van conform grijs op wit | |---------------|--------------|-------------------------------------| | Normale tekst | 7:1 | #595959 op wit | | Grote tekst | 4,5:1 | #777777 op wit |

AAA is niet vereist voor naleving van de meeste regelgeving, maar wordt aanbevolen voor sites die ouderen of gebruikers met visuele beperkingen bedienen.

Waar deze eisen betrekking op hebben

De WCAG-contrasteisen zijn van toepassing op:

  • Tekst — Alle hoofdtekst, koppen, labels, bijschriften en linktekst
  • Tekst in afbeeldingen — Tekst die deel uitmaakt van een afbeelding (behalve decoratieve tekst)
  • UI-componenten — Knoppen, formuliervelden, schuifregelaars, schakelaars en hun randen
  • Pictogrammen — Essentiële pictogrammen die informatie overbrengen (niet-decoratief)
  • Focusindicatoren — De contouren van de toetsenbordfocus moeten 3:1 contrast hebben tegen de aangrenzende achtergrond

Waar deze eisen GEEN betrekking op hebben

  • Logo's — Tekst die deel uitmaakt van een merklogo of bedrijfsnaam
  • Decoratieve elementen — Puur decoratieve afbeeldingen zonder functioneel doel
  • Inactieve UI — Uitgeschakelde knoppen of formulierbesturingselementen (hoewel ze nog steeds waarneembaar moeten zijn)
  • Sensorische tekst — Tekst die deel uitmaakt van een achtergrondafbeelding waar de tekst niet essentieel is

Veelvoorkomende contrastproblemen en hoe u ze oplost

1. Lichtgrijze tekst

Lichtgrijze tekst op witte achtergronden is veruit het meest voorkomende contrastprobleem. Een tint zoals #CCCCCC op wit heeft een contrastverhouding van slechts 1,6:1 — ver onder het minimum van 4,5:1.

Oplossing: Maak uw grijze tekst donkerder. Voor hoofdtekst op wit streeft u naar minimaal #595959 (conform AAA). Zelfs #767676 (het AA-minimum voor tekst van 14px) is merkbaar donkerder dan de meeste "subtiele" grijstinten.

2. Merkkleuren gebruikt voor hoofdtekst

Merkkleuren zijn vaak te licht wanneer ze als tekst worden toegepast. Een medium blauw zoals #3366CC op wit heeft een verhouding van ongeveer 3,5:1 — onder de norm van 4,5:1.

Oplossing: Reserveer merkkleuren voor koppen en accenten. Gebruik bijna-zwart (#1A1A1A tot #333333) voor hoofdtekst. Controleer dat elke gekleurde tekst aan de verhouding voldoet.

3. Alleen-kleur-linkindicatoren

Links die alleen qua kleur verschillen van hoofdtekst, voldoen niet aan WCAG-succescriterium 1.4.1 (Gebruik van kleur). Gebruikers met kleurenblindheid nemen het verschil mogelijk niet waar.

Oplossing: Bied altijd een niet-kleurindicator voor links aan. Veelvoorkomende benaderingen:

  • Links onderstrepen (de meest robuuste oplossing)
  • Een pictogram toevoegen (pijl of symbool voor externe link)
  • Vetgewicht gebruiken voor inline links
  • Een achtergrondmarkering bieden

4. Tekst over achtergrondafbeeldingen

Tekst op foto's of verlopen heeft zelden voldoende contrast over de hele afbeelding.

Oplossing:

  • Voeg een semi-transparante overlay toe tussen de afbeelding en de tekst
  • Gebruik text-shadow voor een subtiel contoureffect
  • Plaats tekst in een overlay met een effen gekleurde doos
  • Zorg ervoor dat elk deel van de afbeelding dat achter tekst kan verschijnen, aan de minimale verhouding voldoet

5. Placeholdertekst met laag contrast

Formulier-placeholders zoals #BDBDBD op wit (1,9:1) komen vaak voor, maar voldoen niet aan de contrasteisen.

Oplossing: Maak placeholders donkerder tot ten minste #757575 (4,6:1). Beter nog: gebruik labels in plaats van placeholders — labels zijn altijd zichtbaar en verdwijnen nooit wanneer gebruikers beginnen te typen.

Kleurcontrast testen

Geautomatiseerde hulpmiddelen

  • Browser DevTools — De DevTools van Chrome en Firefox hebben ingebouwde contrastcontrole. Inspecteer een element en zoek de contrastverhouding op in het paneel "Styles" of "Accessibility".
  • Online contrastcheckers — Voer twee kleuren in en krijg direct een geslaagd/niet-geslaagd status voor AA en AAA.
  • Design-tool-plugins — Stark, A11y en Contrast zijn beschikbaar voor Figma, Sketch en Adobe XD. Deze controleren contrast rechtstreeks in uw ontwerpbestanden.
  • Lighthouse — Google's Lighthouse-audit rapporteert automatisch contrastproblemen.

Handmatig testen

Geautomatiseerde hulpmiddelen kunnen alleen tekstcontrast controleren. Voor een volledige toegankelijkheidsreview:

  1. Zet uw monitor uit — Kunt u alle interface-elementen onderscheiden?
  2. Gebruik een grijstintenfilter — Wordt informatie nog steeds correct overgebracht zonder kleur?
  3. Test met een simulator voor kleurenblindheid — Hulpmiddelen zoals Colorblindly (Chrome-extensie) tonen hoe uw site eruitziet voor gebruikers met verschillende soorten kleurenziendeficiënties.
  4. Test in direct zonlicht — Hoog omgevingslicht vermindert het waargenomen contrast.

Ontwerpen voor kleurenblindheid

Ongeveer 1 op de 12 mannen (8%) en 1 op de 200 vrouwen (0,5%) heeft een vorm van kleurenziendeficiëntie. De meest voorkomende typen zijn:

  • Deuteranopie (groenblind, 6% van de mannen) — Moeite met het onderscheiden van rood en groen
  • Protanopie (roodblind, 2% van de mannen) — Rood lijkt donkerder, verwarring met groen
  • Tritanopie (blauwblind, zeldzaam) — Moeite met het onderscheiden van blauw en geel

Ontwerpstrategieën

  1. Vertrouw nooit alleen op kleur — Elke informatie die via kleur wordt overgebracht (foutstatussen, statusindicatoren, diagramcategorieën) moet ook worden overgebracht via tekst, pictogrammen, patronen of positie.

  2. Vermijd problematische combinaties — Rood/groen, blauw/paars, groen/bruin en groen/blauw zijn de meest verwarde paren.

  3. Gebruik patronen en texturen — Gebruik in diagrammen en grafieken stippellijnen, gearceerde vullingen en verschillende vormen naast kleur.

  4. Voeg labels direct toe — Label gegevenspunten in datavisualisaties direct in plaats van te vertrouwen op een kleurgecodeerde legenda.

  5. Test met simulatoren — Elk ontwerp moet vóór publicatie worden getest via deuteranopie- en protanopie-simulatoren.

Een toegankelijk kleursysteem opbouwen

Stap 1: kies toegankelijke basiskleuren

Begin met kleuren die van nature goed contrast bieden. Diepe blauwtinten, donkergroenen en rijke roodtinten kunnen allemaal toegankelijke basiskleuren zijn wanneer ze op de juiste manier worden gecombineerd.

Stap 2: genereer een conforme schaal

Maak een lichtheidsschaal waarin elke stap voldoende contrast behoudt met zowel lichtere als donkerdere buren. OKLCH is hiervoor ideaal omdat het lichtheidskanaal perceptueel uniform is:

--text-primary: oklch(10% 0.01 0);    /* Bijna-zwart, ~19:1 op wit */
--text-secondary: oklch(35% 0.02 0);  /* Donkergrijs, ~9:1 op wit */
--text-muted: oklch(45% 0.02 0);      /* Middengrijs, ~5.5:1 op wit */
--text-disabled: oklch(60% 0.02 0);   /* Lichtgrijs, ~3:1 op wit */

Stap 3: controleer elke combinatie

Elk voorgrond-achtergrondpaar in uw designsysteem moet worden gecontroleerd:

  • Primaire tekst op oppervlak — minimaal 4,5:1 (7:1 aanbevolen)
  • Secundaire tekst op oppervlak — minimaal 4,5:1
  • Gedempte tekst op oppervlak — minimaal 3:1 (alleen voor niet-essentiële tekst)
  • Interactieve elementen — minimaal 3:1 voor statussen
  • Focusindicatoren — minimaal 3:1

Praktische checklist voor ontwikkelaars

  • [ ] Alle hoofdtekst voldoet aan of overschrijdt een contrastverhouding van 4,5:1
  • [ ] Alle grote tekst voldoet aan of overschrijdt een contrastverhouding van 3:1
  • [ ] Links hebben een niet-kleurindicator (onderstreping, pictogram of gewichtswijziging)
  • [ ] Formulierinvoervelden hebben zichtbare randen of achtergronden (niet alleen placeholdertekst)
  • [ ] Focusindicatoren hebben 3:1 contrast tegen aangrenzende achtergronden
  • [ ] Foutstatussen combineren kleur met tekst of pictogrammen
  • [ ] Diagrammen en grafieken gebruiken patronen of directe labels naast kleur
  • [ ] Placeholdertekst voldoet aan het minimum van 4,5:1
  • [ ] Uitgeschakelde elementen zijn visueel te onderscheiden maar nog steeds waarneembaar
  • [ ] Het ontwerp is getest met simulatoren voor kleurenblindheid

Conclusie

Toegankelijk kleurcontrast is geen optie — het is een fundamentele vereiste van inclusief webdesign. Het voldoen aan de WCAG AA-normen maakt uw inhoud toegankelijk voor gebruikers met visuele beperkingen, verbetert de leesbaarheid voor iedereen en leidt vaak tot schonere, meer doordachte ontwerpen. Begin met contrastcontrole in uw workflow, gebruik kleur als aanvulling op — niet als vervanging van — andere visuele indicatoren, en test uw ontwerpen altijd door de lens van toegankelijkheid.

Gebruik onze gratis online kleurenconverter met ingebouwde contrastcontrole om uw kleurencombinaties te verifiëren tegen de WCAG AA- en AAA-normen.