Voldoet een contrastknop aan de WCAG?

Een vriend van mij bij het bureau Taken by Storm stelde me onlangs een vraag die vaker opduikt in de praktijk: We hebben een ontwerp gemaakt dat visueel precies is wat de klant wil, maar het kleurcontrast van de tekst is net te laag. Als we een knop toevoegen waarmee gebruikers naar een hoog-contrastweergave kunnen schakelen, voldoen we dan aan WCAG 1.4.3 Contrast (Minimum) en 1.4.11 Contrast van niet-tekstuele content?

Het is een verleidelijke gedachte. Een knopje dat de gebruiker zelf kan bedienen, lijkt een mooie oplossing voor het spanningsveld tussen huisstijl en toegankelijkheid. Maar het antwoord is complexer dan je zou denken, en er lijkt licht te zitten tussen hoe we dit in Nederland interpreteren en wat de internationale richtlijnen zeggen.

Wat zien we in de Nederlandse praktijk?

Wie de openbare toegankelijkheidsverklaringen op toegankelijkheidsverklaring.nl doorzoekt, komt regelmatig rapporten tegen waarin contrastproblemen worden gemeld. Daarin valt iets opvallends op.

In meerdere rapporten lezen we dat organisaties ervoor kiezen om contrastproblemen niet in de standaardweergave op te lossen, maar verwijzen naar de “hoog contrast functie” die op de site beschikbaar is. Zo lezen we bijvoorbeeld: Onvoldoende tekstcontrast. Hier gaan we niks aan doen, omdat er een aantal contrast problemen zijn vanuit cookiebot en de andere contrast problemen zijn (zeer waarschijnlijk) op te lossen door de hoog contrast functie te gebruiken.

Dit suggereert dat in de Nederlandse auditpraktijk een contrastknop soms wordt geaccepteerd als voldoende oplossing, zelfs als de standaardweergave niet aan de ratio 4,5:1 voldoet. Het lijkt erop dat auditors hier ruimte laten voor een pragmatische benadering, vooral als het aanpassen van de huisstijlkleuren als onredelijk wordt gezien.

Wat zegt de WCAG zelf?

Als we echter naar de bronnen van de WCAG zelf kijken, bij de W3C, is de toon toch wat strenger. De intentie van 1.4.3 Contrast (Minimum) wordt als volgt beschreven:

The intent of this success criterion is to provide enough contrast between text and its background, so that it can be read by people with moderately low vision or impaired contrast perception, without the use of contrast-enhancing assistive technology.

Met andere woorden: de standaardweergave moet direct leesbaar zijn, zonder dat de gebruiker eerst een knop moet vinden en bedienen. Een contrastknop wordt in deze visie gezien als een vorm van assistive technology, en de richtlijn is juist bedoeld om gebruikers daar niet van afhankelijk te maken.

De nuance van techniek G174

Toch is er een techniek in de WCAG die specifiek gaat over contrastknoppen: G174. Deze techniek beschrijft hoe je een knop kunt aanbieden die gebruikers naar een alternatieve versie van de pagina brengt met voldoende contrast. Maar hier zit een belangrijke voorwaarde aan verbonden.

G174 valt onder de “Conforming Alternate Version”-clausule uit de WCAG. Dit betekent dat de alternatieve versie niet alleen aan de contrasteisen moet voldoen, maar aan àlle succescriteria voor het gewenste conformiteiteniveau. De W3C formuleert het zo:

For this technique to be used successfully, three things must be true:

1. The link or control on the original page must itself meet the contrast requirement of the desired SC.
2. The new page must contain all the same information and functionality as the original page.
3. The new page must conform to all of the SC for the desired level of conformance. (i.e., the new page cannot just have the desired level of contrast but otherwise not conform).

Dit is een hoge lat. Het betekent niet alleen dat je contrastknop zelf goed zichtbaar moet zijn, maar dat de alternatieve weergave op elk punt toegankelijk moet zijn. Veel implementaties die ik in de praktijk zie, voldoen hier niet aan. Ze bieden wel een hoog-contrast kleurenschema, maar vergeten bijvoorbeeld dat ook de focus-styles, de toetsenbordbediening of de alt-teksten in die modus óók moeten voldoen.

Waar zit de discussie?

In Nederland lijkt er een spanningsveld te bestaan tussen de internationale, strikte interpretatie van de WCAG en een meer pragmatische aanpak in de lokale auditpraktijk. Aan de ene kant heb je organisaties als het NL Design System die impliciet uitdragen dat de standaardtoestand moet voldoen. Aan de andere kant zie je op toegankelijkheidsverklaringen rapporten waar een contrastknop als oplossing wordt geaccepteerd.

Deze discussie is relevant voor iedereen die met toegankelijkheid werkt. Moeten we ons houden aan de letter van de internationale richtlijnen, of is er ruimte voor een Nederlandse interpretatie die meer rekening houdt met de realiteit van huisstijlen en bestaande codebases?

Wat is dan de praktische aanpak?

Mijn advies, gebaseerd op meer dan twintig jaar ervaring met toegankelijkheid, is als volgt:

Begin bij je standaardontwerp

Zorg dat tekst en belangrijke UI-elementen direct voldoen aan de ratio 4,5:1 voor normale tekst en 3:1 voor grote tekst en UI-componenten. Dit is het veiligste uitgangspunt en voorkomt dat je afhankelijk bent van een extra feature die niet door iedereen wordt gevonden of begrepen.

Gebruik een contrastknop als extra service, niet als oplossing

Een hoog-contrast modus kan waardevol zijn voor gebruikers met specifieke behoeften, zoals lichtgevoeligheid of bepaalde cognitieve beperkingen. Maar zie het als de kers op de taart, niet als het fundament. En test dit samen met je eindgebruikers om zeker te weten dat je niet een overbodig component toevoegt.

Als je toch kiest voor een alternatieve versie

Zorg er dan voor dat deze echt aan alle WCAG-criteria voldoet, niet alleen aan het contrast. En maak de knop zelf prominent en goed zichtbaar en bedienbaar. Een contrast dat ruimschoots voldoet, een toegankelijke focusstijl en een juiste toegankelijke naam voor schermlezers.

Samenvattend

De vraag of een contrastknop voldoende is, heeft geen eenduidig antwoord. De internationale richtlijnen zijn streng: de standaardweergave moet voldoen. De Nederlandse praktijk laat soms meer ruimte zien. Maar onthoud: wat de ene auditor accepteert, kan door een gebruiker met een visuele beperking alsnog als een barrière worden ervaren.

Kies voor de veilige route: een goed ontwerp dat direct voldoet. Precies dit heeft Taken by Storm dan ook gedaan. Voeg als bonus eventueel een contrastknop voor extra hoog contrast toe – als ik dat zo mag formuleren – als een stukje service naar de eindgebruiker toe.

Meer weten?

Neem contact op via LinkedIn als je advies wilt, ten aanzien van je ontwerp of voor een correcte implementatie van een contrastknop.