Onvoldoende contrast tussen tekst en achtergrond is een van de knelpunten die het meest terugkomt in toegankelijkheidsscans, en tegelijk een van de makkelijkst te voorkomen fouten. Het gaat mis wanneer lichtgrijze tekst op een witte achtergrond staat, wanneer knoppen alleen zichtbaar zijn door een subtiele kleurverandering, of wanneer placeholdertekst in een formulierveld dienst doet als enige aanwijzing voor wat er ingevuld moet worden. Voor mensen met een visuele beperking, maar ook voor iedereen die een scherm in fel zonlicht gebruikt, wordt de tekst dan letterlijk onleesbaar.
WCAG 2.1, de norm waar EN 301 549 naar verwijst, schrijft voor niveau AA een minimale contrastverhouding voor tussen tekst en de achtergrond waarop die staat: doorgaans 4,5 tegen 1 voor gewone tekst en 3 tegen 1 voor grote tekst en voor bedienbare elementen zoals knoppen en formulierranden. Dat klinkt technisch, maar de achterliggende gedachte is eenvoudig: contrast is geen esthetische keuze, het is een voorwaarde om informatie over te kunnen brengen.
Waar het in de praktijk misgaat
Contrastproblemen ontstaan zelden opzettelijk. Ze sluipen erin via huisstijlkeuzes die op een groot, scherp beeldscherm in een ontwerpstudio er prima uitzien, maar op een gemiddeld scherm bij een gemiddelde gebruiker net onder de norm uitkomen. Een lichtgrijze knoptekst op een pastelkleurige achtergrond is een klassiek voorbeeld. Hetzelfde geldt voor links die alleen door een kleurverschil te herkennen zijn, zonder onderstreping of ander visueel signaal, waardoor mensen met kleurenblindheid ze simpelweg niet zien als klikbaar.
Een ander terugkerend patroon is de hover-status: een knop die in rust prima voldoet, maar bij het bewegen van de muis verandert naar een kleurcombinatie die niet is getoetst. Ook foutmeldingen in formulieren zijn een veelgemaakte fout: rode tekst op een lichtrode achtergrond oogt consistent met de huisstijl, maar haalt de vereiste verhouding vaak niet. Wie benieuwd is hoe dit soort knelpunten er in de eigen omgeving uitzien, kan dat in een paar vragen zien waar uw site staat zonder daar eerst een account voor aan te maken.
Waarom een automatische scan dit deels, maar niet volledig oplost
Contrastverhoudingen zijn goed automatisch te meten: een scanner leest de kleurwaarden van tekst en achtergrond af en berekent de verhouding. Daarmee is dit een van de weinige WCAG-criteria die een tool betrouwbaar kan toetsen. Wat een scan niet ziet, is contrast dat pas ontstaat na een interactie, zoals een uitklapmenu, een tooltip die verschijnt bij focus, of een status die alleen zichtbaar wordt na een handeling van de gebruiker. Dat is precies waarom elk rapport vermeldt welk deel automatisch is getoetst en welk deel handmatige beoordeling vraagt; contrast is een sterk punt van automatische toetsing, maar niet het hele plaatje.
Hoe u het structureel voorkomt
De meest voorkomende manier om dit probleem blijvend te voorkomen, is contrast vastleggen op het niveau van het ontwerpsysteem in plaats van per pagina. Wanneer de basiskleuren van een huisstijl al bij de vaststelling worden getoetst aan de norm, hoeft een redacteur of ontwikkelaar dat niet telkens opnieuw te controleren. Dat voorkomt ook dat een nieuwe pagina, een tijdelijke actiebanner of een extern ingekocht widget de contrastverhouding onopgemerkt onderuithaalt.
Het is daarnaast verstandig om contrast expliciet mee te nemen bij elke visuele wijziging aan de site, niet alleen bij de eerste oplevering. Een huisstijlvernieuwing, een nieuw seizoensthema of een aangepaste knopstijl kan een probleem introduceren dat er bij de vorige versie niet was. Toegankelijkheid is in die zin geen vinkje dat u eenmalig zet, maar een aandachtspunt dat meeloopt bij onderhoud. Meer over hoe zo'n doorlopende controle in de praktijk werkt, leest u een uitleg van waar de beoordeling vandaan komt.
Tot slot loont het om niet alleen naar de minimale norm te kijken, maar naar de bedoeling erachter: kan iedereen, ook bij minder ideale lichtomstandigheden of op een ouder scherm, de tekst en de knoppen daadwerkelijk onderscheiden. Veelgestelde twijfelgevallen, zoals of een logo of een decoratieve afbeelding ook aan de contrasteis moet voldoen, staan uitgewerkt op de pagina met antwoorden op vragen die vaker terugkomen.
Wilt u weten of contrast, en de andere terugkerende knelpunten, ook in uw eigen omgeving spelen? De gratis quick-scan geeft daar een eerste indicatie van, en de kennisbank met onderwerpen per situatie uitgezocht laat zien hoe dit vraagstuk samenhangt met de rest van de verplichtingen rond de Europese toegankelijkheidsrichtlijn.