Hoe elegant een interface er ook uitziet, als de tekst niet leesbaar is, doet het ontwerp zijn werk niet. De regels rond kleurcontrast WCAG maken precies dat meetbaar: ze zetten het helderheidsverschil tussen tekst en achtergrond om in een numerieke verhouding en waarborgen de leesbaarheid voor mensen met een visuele beperking, leeftijdsgebonden zichtverlies, of iedereen die in fel zonlicht naar een scherm tuurt. In dit artikel leg ik uit wat een contrastverhouding precies is, welke drempels verplicht zijn, en hoe je ze praktisch toepast in je dagelijkse ontwerpwerk.
Wat is een contrastverhouding precies?
Een contrastverhouding is de relatie tussen de relatieve luminantie van twee kleuren. WCAG definieert die met deze formule:
contrast = (L1 + 0.05) / (L2 + 0.05)Hierbij is L1 de relatieve luminantie van de lichtere kleur en L2 die van de donkerdere. Luminantie loopt van 0 (puur zwart) tot 1 (puur wit). Het resultaat ligt tussen 1:1 (geen verschil) en 21:1 (zwart op wit, het hoogst mogelijke). Het kernpunt: deze verhouding is gebaseerd op helderheid, niet op tint; een rood en een groen met gelijke luminantie kunnen opvallend lijken maar toch een slechte contrastverhouding hebben.
De WCAG-drempels: 4.5:1 en 3:1
WCAG (Web Content Accessibility Guidelines) kent twee conformiteitsniveaus, en de meeste wettelijke en zakelijke eisen richten zich op AA:
- Normale tekst — AA: minimaal
4.5:1(criterium 1.4.3). - Grote tekst — AA: minimaal
3:1. "Groot" betekent minstens 18pt (≈24px), of vet 14pt (≈18.66px). - Normale tekst — AAA: minimaal
7:1(criterium 1.4.6). - Grote tekst — AAA: minimaal
4.5:1.
De logica: hoe groter en vetter de letters, hoe breder de letterstammen, dus blijft de tekst leesbaar bij lager contrast. Dat geeft je iets meer vrijheid in koppen, maar in de bodytekst zou je nooit onder 4.5:1 mogen zakken.
Niet alleen tekst: UI-elementen en graphics
Een punt dat veel ontwerpers missen: contrast gaat niet alleen over tekst. Het criterium 1.4.11 Contrast van niet-tekstuele content, geïntroduceerd in WCAG 2.1, dekt ook de interactieve en informatiedragende delen van een interface:
- Knopranden, omtrekken van formuliervelden, focusringen;
- De grenzen van besturingselementen zoals selectievakjes en keuzerondjes;
- Lijnen, iconen en kaartkleuren die betekenis dragen in een graphic.
Die moeten allemaal minstens 3:1 contrast houden tegenover hun aangrenzende kleuren. Zet je dus een iets lichtere grijze veldrand op een lichtgrijze achtergrond, dan schend je dit criterium hoogstwaarschijnlijk. Focusindicatoren zijn extra kritiek: een toetsenbordgebruiker weet alleen via een zichtbare focusring waar hij zich bevindt.
Kleuren kiezen in de praktijk
Een paar gewoonten maken het bouwen van een toegankelijk palet veel eenvoudiger:
- Begin bij helderheid, niet bij tint. Behoud de tint van je merk maar pas zo nodig de lichtheid aan. De
L-waarde aanpassen in HSL, of beter nog OKLCH, is de schoonste manier om contrast te verhogen. - Codeer betekenis nooit alleen via kleur. "Groen = succes, rood = fout" volstaat op zichzelf niet; voeg een icoon, label of patroon toe voor kleurenblinde gebruikers. Dat is de kern van criterium 1.4.1 (Gebruik van kleur).
- Test beide uitersten. Een kleur die slaagt in lichte modus ligt in donkere modus op een andere achtergrond. Meet in beide thema's.
- Vertrouw niet op placeholdertekst. Vage grijze placeholders zitten bijna altijd onder 4.5:1; gebruik ze nooit als vervanging voor een blijvend label.
Aan de CSS-kant geeft donkere-modustekst een iets verzachte tint in plaats van puur #000 (of puur wit) rust aan de ogen én behoudt voldoende contrast:
:root {
--text: #1a1a1a; /* licht thema, ~16:1 op wit */
--text-muted: #555; /* nog steeds boven 4.5:1 */
}
[data-theme="dark"] {
--text: #e8e8e8; /* ~13:1 op donker */
--text-muted: #a0a0a0;
}Hoe meet en test je contrast?
Op het oog schatten is onbetrouwbaar; controleer altijd met een tool:
- WebAIM Contrast Checker — voer twee hex-waarden in en zie meteen het AA/AAA-oordeel.
- Chrome/Edge DevTools — selecteer een tekstelement en open de kleurkiezer om de contrastverhouding en AA/AAA-lijnen direct af te lezen.
- Lighthouse en axe DevTools — scannen de hele pagina en lijsten contrastfouten op; ze haken zelfs in op je CI-pijplijn.
- Figma-plugins (zoals Contrast of Stark) — meten direct op het artboard terwijl je nog ontwerpt.
De ideale flow: verifieer het palet in Figma tijdens het ontwerp, voeg in code een geautomatiseerde controle toe met axe of Lighthouse, zodat een regressie wordt opgevangen vóór de livegang.
Veelgestelde vragen
Moet ik overal 4.5:1 halen?
Voor bodytekst en kleine letters wel, het is verplicht als je AA-conformiteit wilt. Er zijn uitzonderingen: puur decoratieve tekst (zonder betekenis), logo's en uitgeschakelde UI-elementen zijn vrijgesteld van de contrasteis. Voor grote koppen daalt de drempel naar 3:1.
Lost donkere modus contrast automatisch op?
Nee. Puur witte tekst op een donkere achtergrond kan een "halo"-effect geven dat het lezen bemoeilijkt, terwijl vage grijze tekst makkelijk onder 4.5:1 valt. Donkere modus moet net zo nauwgezet worden gemeten als lichte modus.
Zijn de contrastregels tussen WCAG-versies veranderd?
De kerndrempels voor contrast (4.5:1, 3:1, 7:1) zijn sinds WCAG 2.0 hetzelfde. WCAG 2.1 voegde niet-tekstueel contrast toe (1.4.11); 2.2 versterkte criteria rond focuszichtbaarheid. De drempels liggen dus vast, terwijl de reikwijdte is verbreed.
Wil je een interface die zowel scherp als voor iedereen leesbaar is? Ik help je een WCAG-conform palet en ontwerpsysteem op te zetten zonder je merkkleuren te breken. Neem contact op en laten we je project samen bekijken.