Kleurcontrastmatrix-checker

Waarom controleer je alle kleurcombinaties in één keer, in plaats van één voor één?

WCAG-toegankelijkheidsrichtlijnen vereisen een minimale contrastverhouding tussen tekst- en achtergrondkleuren, anders kunnen gebruikers met een visuele beperking of kleurenblindheid de tekst mogelijk niet lezen. In de praktijk combineren de meeste websites meerdere merkkleuren, achtergrondkleuren en statuskleuren —een titel in de hoofdkleur op een lichtgrijze kaart, een waarschuwingskleur op wit, donkere tekst op een gekleurde achtergrond— en elke combinatie handmatig controleren leidt gemakkelijk tot fouten of vergissingen. Met deze tool plak je gewoon alle kleuren die je daadwerkelijk gebruikt, en direct wordt de contrastverhouding voor elk mogelijk paar berekend, weergegeven in één matrix —niet meer combinaties één voor één controleren.

Hoe de verhouding wordt berekend — een concreet voorbeeld

WCAG 2.1 definieert de contrastverhouding als (L1 + 0,05) / (L2 + 0,05), waarbij L1 en L2 de relatieve lichtsterkte van de twee kleuren zijn (hoger betekent dichter bij wit). Puur zwart #000000 tegenover puur wit #FFFFFF scoort een perfecte 21:1, maar lichtgrijs #999999 tegenover wit scoort maar 2,85:1 —ver onder de minimale 4,5:1 die vereist is voor normale tekst. Normale tekst (onder 18px, of onder 14px vet) heeft AA ≥ 4,5:1 nodig, of AAA ≥ 7:1 voor een strengere norm; grote tekst (18px+ vet of 24px+) heeft een soepelere grens van AA ≥ 3:1.

Hoe lees je de resultatenmatrix

Elke cel in de matrix toont de contrastverhouding tussen de kleur van die rij en de kleur van die kolom, met kleurcodering: groen (slaagt voor AAA), geel (slaagt alleen voor AA) of rood (mislukt) —zo zie je in één oogopslag welke combinaties problematisch zijn, zonder alles handmatig te berekenen.

Het contrast wordt puur berekend op basis van de RGB-waarde van elke kleur —factoren zoals lettergewicht, anti-aliasing of semi-transparante overlays in de werkelijke weergave worden niet meegenomen. Controleer altijd nog een keer op een echt apparaat voordat je live gaat.