Het verhaal achter de kleurcontrastchecker

Te weinig contrast is een van de meest voorkomende toegankelijkheidsproblemen op het web. De regels lijken magische getallen, maar elk heeft een reden, die te maken heeft met hoe ogen met de jaren gevoeligheid verliezen en hoe schermen licht maken.

Twee overlappende kleurstalen naast een gloeiende contrastschaal
Twee overlappende kleurstalen naast een gloeiende contrastschaal

Waar 4,5 en 7 vandaan komen

WCAG 2.0 werd in december 2008 een W3C-aanbeveling. De auteurs gingen uit van een minimum van 3:1 uit de norm ISO 9241-3 en verhoogden dat om het verlies aan contrastgevoeligheid bij een gezichtsscherpte van ongeveer 20/40 te compenseren, wat rond de 80 jaar vaak voorkomt. Zo ontstond 4,5:1 voor niveau AA. Niveau AAA, 7:1, doet hetzelfde voor een gezichtsscherpte van ongeveer 20/80.

Relatieve luminantie

De formule zet elk sRGB-kanaal eerst terug naar lineair licht en weegt rood, groen en blauw met 0,2126, 0,7152 en 0,0722, dezelfde gewichten als de televisienorm ITU-R BT.709, omdat het oog het gevoeligst is voor groen. De verhouding is de lichtste luminantie plus 0,05 gedeeld door de donkerste plus 0,05. Die 0,05 staat voor licht dat het scherm weerkaatst en beperkt de schaal tot 1:1 tot en met 21:1, zwart op wit.

Meer dan tekst

Grote tekst, minstens 24 px of 18,66 px vet, blijft leesbaar bij minder contrast en heeft voor AA maar 3:1 nodig. WCAG 2.1 uit juni 2018 voegde succescriterium 1.4.11 Contrast van niet-tekstuele content toe: randen van invoervelden, focusringen, pictogrammen en de delen van een grafiek die nodig zijn om hem te begrijpen moeten 3:1 halen ten opzichte van hun omgeving.

Kleurenblindheid en wat komt

Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen heeft een afwijking in het kleurenzien, meestal bij rood en groen. Contrast wordt gemeten op luminantie, dus een paar dat slaagt blijft leesbaar, maar kleuren die alleen in tint verschillen kunnen op elkaar lijken. De simulatie gebruikt het model van Machado, Oliveira en Fernandes uit 2009. Concepten van WCAG 3 onderzoeken APCA, een nieuwere methode die ook rekening houdt met lettergrootte en met donker op licht of licht op donker.

Veelgestelde vragen

Is goed contrast genoeg voor toegankelijkheid?

Nee. Het is één eis van vele. WCAG vraagt ook dat kleur niet de enige manier is om betekenis over te brengen, bijvoorbeeld door een pictogram of onderstreping toe te voegen aan een link of foutmelding.

Laat de simulatie precies zien wat iemand ziet?

Het is een goede benadering van volledige dichromasie. Veel mensen hebben een mildere vorm en iedereen ziet net iets anders, dus gebruik het als richtlijn.

Moet ik APCA gebruiken in plaats van de WCAG 2-verhouding?

Voor conformiteit nu gebruik je de WCAG 2-verhouding. WCAG 2.2 uit oktober 2023 houdt dezelfde formule aan, en wetten en normen zoals EN 301 549 verwijzen ernaar. APCA is nog in ontwikkeling.

Klaar om het te proberen?

Open PictorX in uw browser - geen installatie, geen creditcard vereist om te starten.

Open de kleurcontrastchecker