Waar gaat het over?
Teksten moeten genoeg contrast hebben: de tekst en de achtergrond moeten in kleur en helderheid voldoende van elkaar verschillen. Dit kun je meten. De richtlijn noemt specifieke contrastverhoudingen.
Waarom is dit belangrijk?
Mensen met een visuele beperking of oudere bezoekers hebben vaak moeite om tekst te lezen als er te weinig contrast is tussen tekst en achtergrond. Bijvoorbeeld lichtgrijze letters op een witte achtergrond: mooi, maar voor veel mensen bijna onleesbaar. Door minimale contrastverhoudingen aan te houden, zorg je dat teksten voor iedereen leesbaar zijn.
Wat moet je doen?
Zorg dat de teksten op je website aan de volgende punten voldoen:
Normale tekst heeft een contrastverhouding van minimaal 4,5:1.
Grote tekst (groter dan 18pt normaal of 14pt vetgedrukt) mag iets minder contrast hebben: minimaal 3:1.
Dit geldt voor gewone tekst, tekst in afbeeldingen (grafieken en schema’s), tekst in tabellen, tekst op knoppen, de tekst van links, en andere vormen van tekst die informatie overbrengen.
Wat is niet verplicht?
Het hoeft niet bij tekst die puur decoratief is. Denk bijvoorbeeld tekst in een achtergrondafbeelding zonder betekenis.
Logo’s hoeven niet aangepast te worden. Ook merklogo’s met slecht contrast zijn toegestaan.
Puur grafische elementen zonder tekst vallen niet onder deze eis (maar wel onder andere toegankelijkheidsregels).
Veelgemaakte fouten
Bij onze audits zien we dat het bij dit succescriterium vaak fout gaat op een van de volgende punten:
Er is lichtgrijze tekst op een witte achtergrond (vaak bij invoervelden zoals de zoekbalk of een formulier).
Witte tekst staat op oranje, geel, lichtgroen, lichtblauw of andere pastelkleuren.
Bij knoppen steekt de tekst amper af tegen de kleur van de knop.
Links in de lopende tekst zijn alleen herkenbaar door kleur, en ook nog slecht leesbaar door een laag contrast.
Het contrast wordt minder bij hover (als je met je muis over een knop of link beweegt), doordat de kleur van de knop of link verandert.
Wat kun je doen als webredacteur of manager?
Ook als je geen programmeur bent, heb je invloed op het voldoen aan dit succescriterium. Dit kun je doen:
Test zelf: Gebruik een gratis online tool om het contrast te checken, zoals www.tpgi.com/color-contrast-checker.
Gebruik geen lichte tekstkleur op een lichte achtergrond.
Vraag je designer of normale tekst minimaal een contrast van 4,5:1 heeft.
