WCAG-kleurcontrast voor ontwerpers
De 4.5:1-regel, contrastratio wiskunde en gratis hulpmiddelen om elk kleurpaar te controleren.
Als je tekst niet voldoet aan WCAG AA-contrast, kunnen naar schatting 285 miljoen visueel beperkte mensen het niet lezen. Bovendien sta je juridisch steeds wankeler in de EU en VS. Het goede nieuws: de regel is eenvoudig.
De 4.5:1-regel
Lichaamstekst moet een contrastratio hebben van ten minste 4.5:1 ten opzichte van de achtergrond om WCAG AA te halen. Grote tekst (24px+ normaal of 18px+ vet) heeft een lagere drempel van 3:1.
Voor AAA-conformiteit: 7:1 voor lichaam, 4.5:1 voor grote tekst.
Hoe contrastratio wordt berekend
WCAG gebruikt relatieve luminantie — converteer elke kleur naar een luminantiewaarde (0 = zwart, 1 = wit) met een specifieke formule, bereken dan (L1 + 0.05) / (L2 + 0.05), waarbij L1 de lichtere kleur is.
Je hoeft de wiskunde niet te doen — gebruik onze gratis contrast checker om twee willekeurige kleuren in te voeren en de ratio te zien.
Veelvoorkomende faalgevallen
- Lichtgrijs op wit — #999 op #fff = 2,85 (faalt). #767676 op #fff = 4,54 (slaagt).
- Wit op geel — faalt bijna altijd. Gebruik donkere tekst op geel.
- Gekleurde links in lichaamstekst — de meeste blauwe links slagen op wit maar falen op lichtgrijs. Test de daadwerkelijke omliggende achtergrond.
- Merkkleuren die er geweldig uitzien — ze falen vaak. Voeg een gebroken witte achtergrond toe of maak de tekst donkerder.
Toegankelijke kleurparen kiezen
Drie betrouwbare patronen:
- Donker op licht — #1f2937 op #fff = 14:1 (perfect).
- Wit op donker — #fff op #1f2937 = 14:1 (perfect).
- Donker op accent — #1f2937 op #fbbf24 = 9:1 (perfect voor knoppen).
Naast tekst
WCAG 2.1 vereist ook 3:1 voor niet-tekstelementen (knoppen, focusringen, formulierranden). De checker behandelt beide.
Wallpapers die niet vechten met je widgets
Als je een ontwerper bent die wallpapers instelt achter klokwidgets en meldingen, kies dan wallpapers met contrast onder 5:1 in de widgetzones. Onze Gaussian blur-tool kan drukke gebieden van elke wallpaper verzachten voor betere widgetleesbaarheid.
Probeer onze gratis hulpmiddelen
De meeste van deze handleidingen gaan samen met een praktische tool die je nu kunt gebruiken — geen registratie vereist voor de eerste keer:
- Image resizer — pixel-perfect verkleinen + vergroten.
- Convert to WebP — 30-50% kleinere bestanden dan JPG.
- Background remover — eenklikuitsnijding, transparante PNG.
- Favicon generator — elke browsergrootte uit één bron.
- Social-media resizer — exacte afmetingen van elk platform.
- Bulk processing — pas elke tool toe op maximaal 200 afbeeldingen tegelijk.
Blader door de volledige toolcatalogus.
