Contrast

Heel Brabant staat op zijn kop, want het is 11/11, oftewel de start van het Carnavalsseizoen. De boerenkiel wordt afgestofd, de sjaals worden er weer bijgezocht en iedereen maakt zich klaar voor een seizoen vol vreugde en feest.

Met Carnaval krijgt iedere stad tijdelijk een andere naam. En bij die andere identiteit hoort natuurlijk een uniek kleurenpallet. Maar kan iedereen die kleuren eigenlijk wel goed onderscheiden?

Laten we de kleuren van de Carnavalssteden eens onder de loep nemen aan de hand van WCAG-succescriteria 1.4.3 Contrast (minimum) en 1.4.11 Contrast van niet-tekstuele content.

Richtlijn 1.4 Onderscheidbaar

Succescriterium 1.4.3 en 1.4.11 zijn onderdeel van WCAG-richtlijn 1.4 Onderscheidbaar. Deze richtlijn draait erom de weergave zo gemakkelijk mogelijk waarneembaar te maken voor mensen met een beperking. Voor de visuele weergave gaat dit onder andere over dat informatie met voldoende contrast ten opzichte van de achtergrond wordt gepresenteerd. Dit geldt zowel voor tekst, als voor informatieve niet-tekstuele content.

Hoe meet je het contrast?

Er zijn verschillende tools die kunnen helpen om contrast te meten. Een voorbeeld daarvan is de Colour Contrast Analyser. Dit is een gratis tool die je op je computer kunt installeren. Met behulp van een pipetje of vanuit de kleurwaarde uit de code kun je dan twee kleuren invullen, en de tool geeft dan het resultaat voor het contrast. Het contrast wordt getoond als een ratio, zoals 7,2:1, die wordt berekend met behulp van een complexe formule die we voor nu achterwege laten. Die ratio moet aan een bepaalde minimale waarde voldoen. Die minimumwaarde is binnen de verschillende succescriteria vastgesteld.

WCAG 1.4.3 – Contrast (minimum)

Succescriterium 1.4.3 gaat over het contrast van tekst. Het is belangrijk dat tekst zoals die gepresenteerd wordt voldoende contrast heeft ten opzichte van de achtergrond, zodat het goed te lezen is voor mensen die slechtziend zijn of moeite hebben met het zien en onderscheiden van kleuren.

Contrasteisen

Voor teksten gelden de volgende contrasteisen:

• Tekst groter dan 18pt (24px): minimaal 3,0:1

• Tekst groter dan 14pt (18,66px) én vetgedrukt (bold of font-weight 700): minimaal 3,0:1

• Tekst die niet aan de twee bovengenoemde voorwaarden voldoet: minimaal 4,5:1.

Dit geldt voor alle tekst; ook in informatieve afbeeldingen van tekst (m.u.v. logo’s), placeholderteksten die belangrijke instructies geven, en voor bijvoorbeeld links en knoppen in de normale staat maar ook bij hover en focus.

WCAG 1.4.11 – Contrast van niet-tekstuele content

Om dezelfde reden als bij tekst, moet ook informatieve niet-tekstuele content van voldoende contrast zijn voorzien. Dit wordt beschreven in succescriterium 1.4.11. Het gaat hier bijvoorbeeld om betekenisvolle grafische afbeeldingen (zoals grafieken) en actieve componenten van de gebruikersinterface (zoals een icoon op een knop). Maar bijvoorbeeld ook de randen van invoervelden en de focusindicator wanneer deze door de bouwer is aangepast.

Contrasteisen

Voor informatieve niet-tekstuele content is een contrast van minimaal 3,0:1 nodig.

Het contrast van Carnaval

Genoeg theorie. Het is tenslotte 11/11. Tijd om te kijken hoe onze Brabantse carnavalskleuren het ervan afbrengen.

Kruikenstad

Met Carnaval staat Tilburg bekend als Kruikenstad, waarbij de hele stad groen met oranje kleurt. Vanaf de website van Kruikenstad:

• Oranje: rgb(255, 102, 0)

• Groen: rgb(58, 196, 48)

Onderling hebben deze kleuren een contrast van 1,3:1, wat dus erg laag is. Dat is op zich nog niet per se een probleem. Het wordt pas relevant als je deze kleuren gebruikt om tekst of belangrijke visuele informatie van elkaar te onderscheiden. Dat kun je dus beter niet doen.

Dat geldt ook voor het gebruiken van deze kleuren op een witte achtergrond (rgb(255, 255, 255)), zoals bij de tekst op de website:

• De oranje kleur heeft een contrast van 2,9:1 ten opzichte van de witte achtergrond

• De groene kleur heeft een contrast van 2,3:1 ten opzichte van de witte achtergrond.

In beide gevallen is het contrast onvoldoende. Niet het meest makkelijke kleurenpakket dus om toegankelijk te maken.

Oeteldonk

De traditionele kleuren van Oeteldonk (Den Bosch) zijn rood, wit en geel:

• Rood: rgb(220, 38, 38)

• Wit: rgb(255, 255, 255)

• Geel: rgb(250, 204, 21)

De rode kleur heeft een contrast van 4,8:1 ten opzichte van de witte kleur, en een contrast van 3,2:1 ten opzichte van de gele kleur. Dat zou in veel gevallen nog wel onderscheidbaar zijn.

De contrastratio tussen de witte en gele kleur is maar 1,5:1, dus dat wordt al lastiger.

De rode kleur gebruiken voor tekst op een witte achtergrond zou dus voldoen voor 1.4.3, en op een gele achtergrond zou dat ook voldoende kunnen zijn voor grote tekst of voor niet-tekstuele content. Maar gele tekst of iconen op een witte achtergrond, blijf daar maar van weg!

Lampegat

Nog ééntje dan. Lampegat (Eindhoven) wordt met carnaval omgetoverd tot een blauw met oranje oase. Vanaf de website van Lampegat:

• Blauw: rgb(0, 80, 160)

• Oranje: rgb(247, 166, 0)

Blauwe tekst op een oranje achtergrond of andersom, zou ik niet zo snel doen. Het contrast tussen deze twee kleuren is 3,9:1. Voor grote tekst zou dat voldoende zijn, maar voor kleine tekst niet.

Blauwe tekst zou ik mooi op een witte achtergrond plaatsen. Dat geeft een contrast van 7,9:1 dus dat is sowieso voldoende. Oranje tekst of symbolen op een witte achtergrond? Doe dat ook maar niet. Dat contrast is met 2,1:1 te laag.

Alaaf

Betekent dit nu dat ze in Kruikenstad, Oeteldonk en Lampegat op zoek moeten naar nieuwe carnavalskleuren? Nee hoor. Je kunt prima vasthouden aan je vertrouwde huisstijlkleuren, maar kijk wel goed naar hoe je ze gebruikt. Zet tekst bijvoorbeeld op een achtergrond waarmee voldoende contrast ontstaat en zorg dat belangrijke onderdelen van een afbeelding of gebruikersinterface goed te onderscheiden zijn.

Groen met oranje, rood-wit-geel of blauw met oranje? Met een beetje aandacht voor contrast kan iedereen gewoon meedoen met het feest. Alaaf!