Kleurcontrastcontrole

Controleer WCAG 2.1-toegankelijkheid

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

Waarom contrast controleren?

Ongeveer 8 % van de mannen en 0,5 % van de vrouwen heeft een vorm van kleurenblindheid. Laag contrast maakt tekst moeilijk leesbaar — vooral bij kleine letters en slechte schermen. WCAG (Web Content Accessibility Guidelines) stelt minimale waarden vast die in veel landen wettelijk verplicht zijn (EU EN 301 549, VS ADA).

WCAG 2.1 drempels

Niveau AA vereist 4,5:1 voor normale tekst (kleiner dan 24 px of 18,66 px vet) en 3:1 voor grote tekst. AAA vereist 7:1 voor normaal en 4,5:1 voor grote tekst. UI-componenten en grafische elementen minimaal 3:1. Deze waarden zijn gebaseerd op de relatieve luminantie volgens de WCAG-formule.