Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond
Voldoende contrast zorgt ervoor dat teksten goed leesbaar zijn. Ook wanneer iemand slechtziend is of als de zon op je smartphone schijnt.
Het W3C is voor WCAG 3.0 aan het kijken naar een algoritme om kleurcontrast accurater te berekenen. Let wel: voorlopig zul je je aan de huidige contrast richtlijnen moeten houden.
De criteria voor kleurcontrast zijn:
- 4,5:1 contrast voor normale tekst.
- 3:1 contrast voor grotere letters (vanaf 24 pixels).
- 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).
Kleurenpalet
Het is handig om een kleurenpalet te hebben waaruit je kan opmaken welke kleurcombinaties voldoende contrast opleveren. Er zijn verschillende tools beschikbaar die je hierbij kunnen helpen. Zo zou je accessiblepalette.com kunnen gebruiken. Deze tool berekend het contrast op basis van de WCAG 2.1 en 3 (concept) richtlijnen.
Het hebben van een uitgebreid kleurenpalet is fijn (ook met het oog op dark-mode). Maar het betekend niet dat je ook veel verschillende kleuren moet gebruiken. Pas de kleuren uit het kleurenpalet toe voor specifieke doeleinden. Het ‘common’ niveau dat we hanteren bij het NL Design System is hier een mooi voorbeeld van.
Tekst over afbeelding
Als je tekst over of in een afbeelding wilt gebruiken, plaats dan een effen vlak achter de tekst of een transparant kleurvlak over de gehele afbeelding.
Gerelateerde WCAG-succescriteria:
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.