Color
Contrast
Controleer direct het kleurcontrast volgens WCAG AA- en AAA-normen — voor tekst, knoppen en UI-componenten.
① Voer de voorgrondkleur in ② Voer de achtergrondkleur in ③ Controleer het WCAG-contrast
Voorgrond (tekst)
Achtergrond
Presets:
WCAG AA
4.5:1 normal · 3:1 large
WCAG AAA
7:1 normal · 4.5:1 large
Non-text
3:1 UI components (1.4.11)
Wat is WCAG-kleurcontrast en waarom is het belangrijk?
De WCAG (Web Content Accessibility Guidelines) definiëren minimale contrastverhoudingen tussen tekst en achtergrond voor leesbaarheid voor gebruikers met visuele beperkingen, inclusief kleurenblindheid en slechtziendheid. WCAG 2.1 AA vereist minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA vereist 7:1 en 4,5:1. De verhouding wordt berekend met relatieve luminantie. Vroeg contrast controleren waarborgt wettelijke toegankelijkheid (ADA, EN 301 549).
Veelgestelde vragen
WCAG-kleurcontrast is een norm die de minimale contrastverhouding definieert tussen tekst en achtergrond voor leesbaarheid voor gebruikers met visuele beperkingen. Het wordt gepubliceerd door het W3C als onderdeel van WCAG 2.1.
Het wordt berekend met relatieve luminantiewaarden afgeleid van de RGB-componenten van elke kleur. De formule is (L1 + 0,05) / (L2 + 0,05) waarbij L1 de lichtere en L2 de donkerdere kleur is.
WCAG AA is het standaard wettelijk vereiste niveau: 4,5:1 voor normale tekst en 3:1 voor grote tekst. WCAG AAA is het geavanceerde niveau: 7:1 voor normale tekst en 4,5:1 voor grote tekst.
Grote tekst is minstens 18 punten (ca. 24px) normaal of 14 punten (ca. 18,67px) vet. Bij deze afmetingen worden iets lagere verhoudingen geaccepteerd.
Niet noodzakelijk. Contrast gaat over leesbaarheid, maar toegankelijk ontwerp omvat ook lettergrootte, typografische leesbaarheid, spatiëring en context.
Plak de HEX-codes van je merk- of UI-kleuren in beide velden. Streef naar minimaal niveau AA voor alle bodytekst. Gebruik de wisselknop om snel omgekeerde combinaties te testen.
WCAG 2.1 criterium 1.4.11 (Niet-tekstueel contrast) vereist minstens 3:1 voor UI-componenten ten opzichte van aangrenzende kleuren. De tekst op de knop volgt de standaardregel van 4,5:1.