Kleurcontrast: WCAG-richtlijnen voor toegankelijk design

Kleurcontrast is een van de meest geschonden toegankelijkheidseisen op het web — en een van de makkelijkst te verhelpen. Slecht contrast tussen tekst en achtergrond maakt inhoud onleesbaar voor gebruikers met slechtziendheid, kleurenblindheid of bij fel zonlicht. WCAG 2.1 definieert precieze numerieke drempels voor acceptabele contrastverhoudingen.

Deze gids legt uit hoe contrastverhoudingen worden berekend, wat de WCAG-niveaus in de praktijk betekenen, waar contrast het vaakst faalt in echte ontwerpen en hoe die fouten systematisch te verhelpen.

Wat is kleurcontrastverhouding

De kleurcontrastverhouding is een numerieke maat voor het verschil in waargenomen luminantie tussen twee kleuren — typisch tekst en achtergrond. De verhouding loopt van 1:1 (identieke kleuren, geen contrast) tot 21:1 (puur zwart op puur wit, maximaal contrast). De formule vergelijkt de relatieve luminantie van de lichtere kleur (L1) met de donkerdere (L2): contrast = (L1 + 0,05) / (L2 + 0,05). Een verhouding van 4,5:1 betekent dat de lichtere kleur 4,5 keer luminanter is dan de donkerdere.

WCAG 2.1 niveaus (A/AA/AAA)

WCAG 2.1 definieert drie conformiteitsniveaus. Niveau A is het minimum. Niveau AA is de wettelijke en industriestandaard in de meeste landen. Niveau AAA is het hoogste. Voor tekstcontrast: normale tekst (onder 18pt of 14pt vet) vereist 4,5:1 voor AA en 7:1 voor AAA. Grote tekst (18pt+ of 14pt+ vet) vereist 3:1 voor AA en 4,5:1 voor AAA. UI-componenten vereisen 3:1 voor AA.

Hoe luminantie te berekenen

Relatieve luminantie wordt berekend uit gelineariseerde RGB-waarden. De formule houdt rekening met de niet-lineaire reactie van het menselijk oog op licht. Er worden perceptuele gewichten toegepast (rood=0,2126, groen=0,7152, blauw=0,0722). Het groene kanaal draagt het meest bij aan de waargenomen helderheid — daarom heeft puur groen (#00FF00) een veel hogere luminantie dan puur blauw (#0000FF).

/* Luminantieberekening (JavaScript) */
function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928
      ? c / 12.92
      : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

Veelvoorkomende contrastfouten

De meest voorkomende contrastfouten in echte ontwerpen: lichtgrijze tekst op witte achtergrond (gedempte tekst faalt vaak met ~2,5:1), merkkleuren met gemiddelde verzadiging als tekst op wit, gekleurde tekstlinks zonder onderstreping op gekleurde achtergronden, uitgeschakelde toestanden met te weinig visueel verschil, icon-only UI-elementen met onvoldoende contrast. Dark mode-ontwerpen introduceren vaak nieuwe fouten.

Contrast corrigeren in donkere/lichte thema's

Bij het bouwen van een dual-thema designsysteem is het essentieel om contrast in beide modi onafhankelijk te testen. Hetzelfde achtergrond-tekst paar dat AA haalt in lichte modus kan falen in donkere modus als je simpelweg de tint omkeert. De praktische aanpak: definieer aparte kleurschalen voor elk thema.

Tools en automatisering

Handmatige controle tijdens het ontwerpen is niet voldoende. Geautomatiseerde toegankelijkheidsaudittools (axe, Lighthouse, Pa11y) kunnen contrastfouten detecteren tijdens de build of in CI-pipelines. De PixCode Color Contrast tool accepteert twee willekeurige kleuren en geeft de verhouding, het WCAG-niveau en suggesties voor conforme alternatieven.

Veelgestelde Vragen