Kleurcontrast

Deze WCAG-criteria gaan niet over het verwijderen van alle kleur op een website of document; dan zou de publicatie erg saai worden voor de 92% van de gebruikers die wel kleuren ziet. Maar ze geven wel houvast over het gebruik van kleur en contrast, waardoor je je digitale publicatie toegankelijker kan maklen én nog steeds volledig in kleur.

Contrastverhouding

Bij kleurcontrast gaat het om hoe twee kleuren zich tot elkaar verhouden. Er bestaan dus geen toegankelijke of ontoegankelijke kleuren, maar wel kleurencombinaties die toegankelijk of juist ontoegankelijk zijn. Zo is een witte achtergrond met daarop lichtgrijze letters voor veel mensen, ook zonder visuele beperking, slecht leesbaar. Het gebruik van zwarte letters is veel duidelijker.

Het contrast tussen een voorgrondkleur en een achtergrondkleur wordt aangegeven in een verhouding, dit wordt contrastverhouding of contrastratio genoemd:

• Een contrastverhouding van 1:1 is minimaal contrast. Dit betekent dat er helemaal geen contrast is: de kleuren op de voorgrond en de achtergrond zijn hetzelfde.
• Een verhouding van 21:1 is maximaal contrast: wit op zwart of zwart op wit.

[tekst loopt door onder de afbeelding]

Figuur: schematische weergave van verschillende contrastverhoudingen van gekleurde tekst op gekleurde achtergrond.

WCAG-criteria kleurcontrasten

De WCAG 2.2 bevat twee criteria op niveau A en AA over contrast, namelijk:

Succescriterium: 1.4.3 Contrast (minimum) (niveau AA)

De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:

• Grote tekst: grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1.
• Incidenteel: tekst of afbeeldingen van tekst die deel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrast-eis.
• Woordmerken: tekst die onderdeel is van een logo of merknaam heeft geen contrast-eis.

Succescriterium: 1.4.11 Contrast van niet-tekstuele content (niveau AA)

De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren: 

• Componenten van de gebruikersinterface: visuele informatie die vereist is om componenten van de gebruikersinterface en statussen te identificeren, met uitzondering van inactieve componenten of componenten waarvan de weergave van de component wordt bepaald door de user agent en niet wordt aangepast door de auteur;
• Grafische objecten: delen van afbeeldingen die vereist zijn om de content te begrijpen, behalve wanneer een specifieke weergave van afbeeldingen essentieel is voor de informatie die wordt overgebracht.

Voor wie?

Deze criteria van het WCAG zijn gericht op visuele waarneming van content en dus niet op gebruikers die de inhoud op een andere manier waarnemen, zoals via schermleessoftware. 
Ze zijn vooral gericht op gebruikers met een permanente beperking, zoals slechtzienden en mensen met kleurenblindheid, die kleuren of tinten niet (altijd) goed kunnen onderscheiden. Maar ook mensen in een specifieke situatie, wanneer er bijvoorbeeld licht op je beeldscherm weerkaatst of als je een donkerder scherm hebt door een bijna lege accu.

Informatief kleurgebruik

Doordat kleur niet (goed) waargenomen wordt, kan deze groep bij het gebruik van een te laag contrast informatie en functionaliteiten missen. Denk aan informatieve en functionele content, zoals het contrast tussen tekst en achtergrond, de kleur van (randen van) een formulierveld (tekstveld, radiobutton, checkbox), kleur van een knop(rand) en de wijziging van een status (actieve menu-items), allemaal ten opzichte van de achtergrond. Dit laatste kan echter ook geïnterpreteerd worden als aansluitende onderdelen, ofwel kleuren die elkaar raken.

Er zijn echter ook een aantal uitzonderingen, waaronder:

• Niet-functionele of niet-informatieve informatie, zoals decoratieve onderdelen
• Inactieve elementen, zoals een niet kiesbare checkbox of een inactieve knop
• Logo’s of beeldmerken

Toetsen

Toetsen of er voldaan wordt aan het criterium kan in eerste instantie door visueel door content heen te gaan. Er zijn echter ook tools die je kunt gebruiken om het contrast te meten. Soms lijkt iets op het oog iets voldoende contrast te hebben, maar blijkt dit na meting toch niet zo te zijn. Sommige tools analyseren content automatisch op contrast, bijvoorbeeld in browsers, Microsoft Word of Adobe PDF (pro). Controleer bij het gebruik hiervan wel altijd of de tool alle elementen en tekst meeneemt in de toetsing.

NB: bekijk vooral ook eens de snelstartgids Check dit! met eenvoudige spelregels om je publicaties op toegankelijkheid te controleren.

Verantwoord toepassen van kleur

Kleurgebruik speelt een belangrijke rol in zowel het design als de functionaliteit van digitale content. Om ervoor te zorgen dat deze content toegankelijk is voor iedereen, is het van groot belang dat rekening wordt houden met kleurcontrasten volgens de richtlijnen van de WCAG. Het naleven van de contrastvereisten maakt digitale content toegankelijker, zonder in te hoeven leveren aan de visuele aantrekkelijkheid van een ontwerp. Om ervoor te zorgen dat de juiste normen worden gehaald, zijn tools voor contrastmeting een waardevol hulpmiddel. Kleur blijft dus een krachtige tool in het ontwerpen, mits het op de juiste manier wordt toegepast.

Bronnen: Dedicon, WCAG, Inclusief Publiceren