In dit artikel
Wat is kleurcontrast en waarom het ertoe doet
Kleurcontrast is het verschil in luminantie tussen twee kleuren, meestal voorgrondtekst en de achtergrond. Voldoende contrast zorgt ervoor dat tekst leesbaar is voor iedereen, inclusief mensen met slechtziendheid of kleurenblindheid. Onvoldoende contrast maakt inhoud moeilijk of onmogelijk te lezen, waardoor miljoenen gebruikers worden uitgesloten.
De Web Content Accessibility Guidelines (WCAG) definiëren minimale contrastverhoudingen die leesbaarheid garanderen voor een breed scala aan visuele mogelijkheden. Het voldoen aan deze normen is niet alleen goede praktijk — het is in veel jurisdicties een wettelijke vereiste onder toegankelijkheidswetten zoals de ADA, EAA en EN 301 549.
Hoe WCAG-contrastverhoudingen werken
WCAG gebruikt relatieve luminantie om contrastverhoudingen tussen twee kleuren te berekenen. De formule produceert een verhouding van 1:1 (geen contrast, identieke kleuren) tot 21:1 (maximaal contrast, zwart op wit).
- Relatieve luminantie wordt berekend uit gelineariseerde sRGB-waarden met de formule: L = 0.2126R + 0.7152G + 0.0722B
- De contrastverhouding is (L1 + 0.05) / (L2 + 0.05) waarbij L1 de lichtere kleur is en L2 de donkerdere
- Normale tekst (onder 18pt of 14pt vet) vereist minstens 4.5:1 voor AA en 7:1 voor AAA
Probeer gratis — geen aanmelding vereist
Contrast controleren →WCAG AA vs AAA-conformiteitsniveaus begrijpen
WCAG definieert twee conformiteitsniveaus voor kleurcontrast. Niveau AA is de minimale standaard die door de meeste toegankelijkheidsregelgeving wordt vereist, terwijl AAA verbeterde toegankelijkheid biedt voor gebruikers met ernstigere visuele beperkingen.
- AA normale tekst — vereist een contrastverhouding van minstens 4.5:1 voor tekst kleiner dan 18pt (of 14pt vet)
- AA grote tekst — vereist minstens 3:1 voor tekst van 18pt en groter (of 14pt vet en groter)
- AAA normale tekst — vereist minstens 7:1 voor het hoogste leesbaarheidsniveau
- AAA grote tekst — vereist minstens 4.5:1 voor grote tekst op het verbeterde niveau
- Niet-tekstcontrast — UI-componenten en grafische objecten vereisen minstens 3:1 tegen aangrenzende kleuren
Tips voor toegankelijk kleurdesign
Ontwerpen met toegankelijkheid in gedachten betekent niet dat je esthetiek moet opofferen. Deze praktische tips helpen je mooie ontwerpen te maken die iedereen kan gebruiken.
- Begin met contrast — kies eerst je tekst- en achtergrondkleuren en bouw dan je palet daaromheen
- Vertrouw nooit alleen op kleur — gebruik iconen, patronen of labels naast kleur om betekenis over te brengen
- Test met echte inhoud — tijdelijke tekst kan er goed uitzien, maar echte inhoud kan contrastproblemen aan het licht brengen
- Overweeg de donkere modus apart — kleuren die slagen in de lichte modus kunnen falen in de donkere modus en omgekeerd
- Gebruik een contrastcontrole-tool — geautomatiseerde tools vangen problemen sneller op dan handmatige inspectie
Veelgestelde vragen
Wat is de minimale contrastverhouding voor WCAG-conformiteit?
Voor WCAG 2.1 Niveau AA vereist normale tekst een contrastverhouding van minstens 4.5:1, en grote tekst (18pt of 14pt vet) vereist minstens 3:1. Niveau AAA verhoogt deze naar respectievelijk 7:1 en 4.5:1. De meeste toegankelijkheidswetten verwijzen naar niveau AA als minimale standaard.
Is kleurcontrast belangrijk voor afbeeldingen en iconen?
Ja. WCAG 2.1 Succescriterium 1.4.11 vereist dat UI-componenten en grafische objecten minstens 3:1 contrast hebben met aangrenzende kleuren. Dit omvat iconen, veldranden, focusindicatoren en grafiekelementen. Decoratieve afbeeldingen zijn vrijgesteld.
Hoe verbeter ik het contrast zonder mijn merkkleuren te veranderen?
U kunt de lichtheid van uw merkkleuren aanpassen terwijl u dezelfde tint en verzadiging behoudt. Verdonker bijvoorbeeld een lichtblauw voor tekst of verlicht een donkere achtergrond. Een andere aanpak is om uw merkkleuren te gebruiken voor grote decoratieve elementen en neutrale kleuren met hoog contrast voor broodtekst.