In dit artikel leg ik uit hoe je een website, maar ook drukwerk en video’s, toegankelijker kunt maken voor mensen met een visuele beperking die niet blind zijn. Dit doe je door te letten op de contrastverhouding.
Helaas reageerde de Nederlandse stichting Drempelvrij niet op mijn vragen en blijft de Nederlandse informatievoorziening een beetje achter bij die van België. Het gebrek aan online transparantie is nogal “van vroeger”. Echter geen kwaad woord over Drempelvrij. Men is waarschijnlijk nog gewend om iedere vraag individueel te behandelen en in tijden van een pandemie loopt alles nu eenmaal anders.
Opmerking vooraf
Dit artikel is afkomstig van de Vlaamse website van ComBron. In dit artikel wordt gesproken over AnySurfer en Licht en Liefde, maar als Nederlandse ondernemer moet je bij drempelvrij.nl zijn.
Stichting drempelvrij.nl
Neuweg 44
1214 GV Hilversum
- ComBron heeft zowel met AnySurfer als met Stichting drempelvrij.nl geen overeenkomst.
- De waarmerken van (met het groene mannetje) zijn puur ter decoratie. De website van ComBron wordt steeds toegankelijker, maar voldoet nog niet aan de WCAG 2.1 normen.
Toegankelijkheid. In België heeft ongeveer twee procent van de bevolking een visuele handicap. In België leven ruim 200.000 mensen die slechtziend zijn waarvan zo’n 11.000 mensen blind zijn.
Toegankelijkheid is belangrijk voor inclusiviteit. Huh? Wablief? Als je mensen niet wilt buitensluiten, dan zorg je er niet alleen voor dat je winkel of kantoor toegankelijk is voor klanten in rolstoel, maar zorg je er ook voor dat je website toegankelijk is voor blinden en slechtzienden. In dit artikel draait het niet om het toegankelijk maken van websites voor blinden, maar het beter toegankelijk maken van websites voor visueel gehandicapten die nog wèl kunnen zien. Bij genoeg animo volgt er een artikel over het beter toegankelijk maken van websites voor blinden.
Beter toegankelijk door het verbeteren van de contrastverhouding (maar NIET feilloos)
Met een paar eenvoudige ingrepen/aanpassingen maak je je website beter leesbaar voor slechtzienden. Het zijn aanpassingen die horen bij de richtlijnen voor toegankelijkheid van webcontent (WCAG), maar met deze paar aanpassingen voldoet een website nog niet aan de standaarden van het World Wide Web Consortium. Het is gewoon een eerste stap naar een beter toegankelijk internet.
Het World Wide Web Consortium (W3C)
De richtlijnen voor toegankelijke websites zijn ondergebracht in de Web Content Accessibility Guidelines (WCAG) van het World Wide Web Consortium (W3C).
In de WCAG zijn richtlijnen opgenomen voor beter toegankelijke content. Die richtlijnen zijn niet zomaar uit de lucht komen vallen. Er zijn verschillende generaties van de WCAG en per generatie zijn er verschillende gradaties. Het is niet gek als je al opgeeft vóórdat je begonnen bent, want de WCAG is een goed bedoelde kluwen van mits, maren en technische termen. Als ik de WCAG moet uitleggen, dan roep ik doorgaans zoiets als:
WCAG 1.0
mei 1999
Vooral een technisch verhaal. Het internet was jong en de W3C promootte html omdat html in tegenstelling tot technieken als flash bruikbaar kon worden gemaakt voor schermlezers.
WCAG 2.0
december 2008
Stelde voor het eerst eisen aan de kwaliteit van de content. Twaalf richtlijnen georganiseerd volgens vier principes (websites moeten waarneembaar, bedienbaar, begrijpelijk en robuust zijn).
WCAG 2.1
juni 2018
Vooral een uitbreiding van WCAG 2.0 met als doel de toegankelijkheid voor drie grote groepen te verbeteren:
- gebruikers met cognitieve of leerstoornissen
- gebruikers met slechtziendheid
- gebruikers met een handicap op mobiele apparaten
Als je je website op deze manier wilt verbeteren, dan ben je vast geen minimumlijder en wil je ook iets over WCAG weten. Welnu:
Contrastverhouding. Hoe zorg ik er op eenvoudige wijze voor dat slechtzienden mijn website beter kunnen bekijken?
In de onderstaande uitleg reken ik erop dat je de kleuren van je website en logo paraat hebt en de online tool van Adobe geopend. De tool wordt door Adobe de Contrast Analyser genoemd en is te vinden op: https://color.adobe.com/nl/create/color-contrast-analyzer.
Zo controleer en verbeter je de contrastverhouding van kleuren op je website en/of in je logo.
- Bepaal voor jezelf of de contrastverhouding moet voldoen aan WCAG 2.1-niveau AA of WCAG 2.1-niveau AAA.
Bij WCAG 2.1-niveau AA voldoet een minimaal contrastniveau van ten minste 4,5:1 bij gewone tekst en 3:1 bij grote (18 punt of 14 punt vetgedrukt) ten opzichte van aangrenzende kleuren, terwijl bij WCAG 2.1-niveau AAA het minimale contrastniveau 7:1 bedraagt en 4,5:1 bij grote tekst.
Mijn advies is om direct voor niveau AAA te gaan. De reden is niet alleen omdat je dan een grote groep slechtzienden tegemoet komt, maar ook omdat je website duidelijker wordt voor de (nog veel grotere) groep kleurenblinden. Over de kleurenblinden later meer.
- Stel vast welke kleuren je gebruikt voor tekst en welke kleur ondergrond er bij de respectievelijke tekstkleur gebruikt wordt.
Anders gezegd: Wat is de kleur van de letters en welke kleur heeft de achtergrond?
- Vul de kleurcodes in op de pagina van de Color Analyser.
De link is hierboven genoemd en staat ook helemaal onderaan dit artikel. Als de waarden zijn ingevuld, toont de website van Adobe Color of de contrastverhouding voldoet aan de richtlijnen van WCAG 2.1 AA of AAA. De afbeelding hieronder laat zien dat witte letters op de blauwe ondergrond (zoals ik deze vaak heb toegepast op deze website) problemen oplevert voor slechtzienden.
- Controleer op deze manier alle kleurencombinaties van je website.
Je kunt ook de kleuren van je logo nog controleren, maar volgens de richtlijnen hoeft een logo niet te voldoen. Aangezien ComBron geen eeuwenoude hofleverancier is, heeft het logo van ComBron er desalniettemin aan moeten geloven.
Hieronder is links het oude logo van ComBron afgebeeld en rechts het nieuwe logo. Het nieuwe logo is niet perfect, omdat de oranje rand omwille van het contrast niet aan wit zou moeten grenzen. Overigens zit er in deze afbeelding voor mensen met regulier zicht een klein grapje. Als je ogen “goed” zijn, dan lijkt het donkergrijs tussen het oude en het nieuwe logo lichter dan het donkergrijs van het nieuwe logo. Welnu, het is dezelfde kleur.
(even een zijsprongetje)
Toetsenbord voor slechtzienden
Hip toetsenbord? Alhoewel dit toetsenbord prima door het leven zou kunnen gaan als fashion statement, is het niet als zodanig bedoeld. Deze alinea is niet gesponsord o.i.d. Deze alinea is er om werkgevers te laten zien dat aanpassingen voor slechtzienden weleens zouden kunnen leiden tot jaloezie 😠😠😠 onder de collega’s. Dit toetsenbord is de Alt ClearKeys en is speciaal ontwikkeld voor slechtzienden.
Meer verkopen aan kleurenblinden
Naast alle slechtzienden is er een (nog grotere) groep die profiteert van het verbeteren van de contrastverhoudingen en dat zijn de kleurenblinden. Contact met de heer Jan Dewitte van het nimmer volprezen Licht en Liefde leerde me dat 1 op 12 mannen en 1 op 250 vrouwen kleurenblind is.
Het niet kunnen onderscheiden van tinten en kleuren als een algemeen bekend probleem waar kleurenblinden mee kampen. Ik kan er over meespreken. Ergens aan het einde van de jaren tachtig of aan het begin van de jaren negentig moest ik voor mijn officierskeuring van het Korps Mariniers naar Amsterdam. De keuringsarts liet me een soort groot schoolbord zien met allemaal kaartjes:
- ‘We beginnen met een gemakkelijke. Welk cijfer staat op het kaartje linksboven?’
- ‘Moet u dat kaartje niet eerst omdraaien?’
- ‘Nee, helaas! Je bent bij dezen afgekeurd, maar zou je heel alsjeblieft nog even willen blijven? Ik heb nog nooit iemand meegemaakt die zo enorm kleurenblind is.’
Websites met subtiele kleurverschillen zijn vast mooi, maar ik koop er nooit iets en ik weet dat een aantal van “mijn collega’s” er exact hetzelfde over denkt. Het gaat er niet om dat ik bang ben de verkeerde kleur hemd te kopen. Ik kan er gewoon domweg niet tegen als ik moet zoeken naar de knop om te mogen afrekenen.
Bronnen en lezenswaardigheden
- Color Analyser (adobe.com, in het Nederlands)
- WCAG 2.1 richtlijnen (wcag.org, in het Nederlands)
- Alt-ClearKeys ontwikkelingsproces (altproducts.nl, in het Nederlands)
