Digitale toegankelijkheid - Zo zorg je voor voldoende contrast

Gebrekkig contrast op een website is voor mensen met een visuele beperking een groot struikelblok. Een tekstuele boodschap op een te weinig contrasterende achtergrondkleur of afbeelding, bereikt dus niet iedereen.

Alle nieuwe én bestaande websites van overheidsorganisaties moesten vanaf september 2020 voldoen aan het Tijdelijk Besluit Digitale Toegankelijkheid, waarover we eerder schreven in ons blog 7 vragen over de wet Digitale Toegankelijkheid. Maar ook commerciële organisaties siert het als zij ervoor zorgen dat iedereen hun website goed kan gebruiken. Je bent dan immers veel inclusiever en bedient een groter publiek.

Contrast

Contrast is een van de belangrijkste onderdelen van digitale toegankelijkheid. Bij veel, ook grote, websites is dat lang niet altijd goed geregeld. Zo vielen me laatst op een website twee dingen op: het kleurgebruik in de header en de teksten in foto’s.
Vooral die oranje ‘Media en Cultuur’ in de header is iets wat mensen met een visuele beperking maar slecht kunnen zien.

En ook die witte letters op die witte politieauto kan lang niet iedereen goed lezen.

Maar hoe moet het dan wel?

De overheid legt op de website DigiToegankelijk vrij precies uit wat een goed contrast is en waar je rekening mee moet houden. Zo wil je voor een tekst van normale grootte een contrastverhouding van minimaal 4,5:1 en voor grotere of dik gedrukte tekst een verhouding van 3:1. Uit onderzoek blijkt dat deze verhoudingen geschikt zijn voor zowel de meeste mensen die kleurenblind zijn als voor de meeste mensen die door ouderdom minder goed kunnen zien.

Met de tools Contrast Ratio en TPGi’s Color Contrast Checker kun je de verhouding berekenen van de kleuren die jij wilt gebruiken voor tekst en achtergrond. Een andere fijne basistool voor digitale toegankelijkheid is de Siteimprove Accessibility Checker, een extensie voor Google Chrome.

Daarnaast heb ik nog drie tips voor je:

1. Zet digitale toegankelijkheid, en daarmee dus ook contrast, zo vroeg mogelijk op de agenda van een (nieuwbouw) project. Daarmee zorg je ervoor dat ontwerpers, bouwers en redacteuren op de hoogte zijn van toegankelijkheidseisen zodat je niet achteraf allerlei aanpassingen hoeft te doen. Huisstijlkleuren zijn bijvoorbeeld niet altijd voldoende contrastrijk. Als een ontwerper dan de hele site in die kleuren gaat ontwerpen, komt de toegankelijkheid in het geding.
2. Toets ook de content van derde partijen op hun digitale toegankelijkheid. Jij hebt niet altijd invloed op hoe banners en andere reclame-uitingen en iframes met externe koppelingen eruit zien. Kaart dit dus aan bij de betrokken partijen, zodat zij hun content ook kunnen optimaliseren.
3. Gebruik een contrasterende achtergrondkleur als je tekst over een afbeelding wilt tonen. In het voorbeeld hierboven zag je al dat je anders afhankelijk bent van hoe de afbeelding eruit ziet. Wanneer je ervoor zorgt dat je een tekstbalk met een vaste kleur gebruikt, hoeft een redacteur alleen maar een afbeelding te kiezen en er niet over na te denken of er wel voldoende contrast is.