Contrast (minimum)

Wat het vereist

Tekst en tekstafbeeldingen moeten een contrastverhouding hebben van minimaal 4,5:1 ten opzichte van hun achtergrond. Grote tekst — gedefinieerd als 18pt (24 px) normaal gewicht of 14pt (18,66 px) vet — vereist slechts 3:1. De verhouding wordt berekend op basis van de relatieve luminantie van voor- en achtergrond. Logo’s, merknamen en puur decoratieve tekst zijn uitgezonderd. Inactieve besturingselementen zijn ook uitgezonderd, maar let op: die uitzondering is smaller dan ontwerpers doorgaans denken.

Hoe er aan te voldoen

• Controleer elke tekst-op-achtergrond-combinatie met een contrastcontrole (axe DevTools, WebAIM, Stark, Figma-plug-ins). Haal minimaal 4,5:1.
• Verhoog lichtgrijze placeholdertekst in formuliervelden naar minimaal 4,5:1 ten opzichte van de veldachtergrond — placeholder is tekst.
• Controleer herogedeelten met tekst over afbeeldingen. De achtergrondkleur varieert per pixel, dus controleer het slechtste gebied of voeg een donker overlay toe.
• Herbereken bij donkere modus elke verhouding — kleurTokens die slagen op wit falen vaak op bijna-zwart.
• Donker voor merkkleuren die falen op wit uitsluitend de merkkleur voor tekst; gebruik het origineel voor grafische elementen.
• Voor knoppen telt het contrast van label ten opzichte van knopachtergrond — niet het contrast van de knop ten opzichte van de pagina.

Veelvoorkomende fouten

• Lichtgrijze helptekst (#999 op #fff = 2,85:1) bij formuliervelden — faalt sterk.
• Witte tekst op een merkkleurknop waarbij de merkkleur middelhoog verzadigd is (oranje, geelgroen, teal).
• Herokoppen geplaatst over foto’s zonder overlay — het contrast varieert over de afbeelding en daalt vaak onder 3:1.
• Placeholdertekst met dezelfde kleur als het label maar lichter gewicht, waardoor het het laagst contrasterende element op de pagina is.
• „Inactieve“ of „uitgeschakelde“ knoppen gestyled bij 2:1, wat aanvaardbaar is als ze werkelijk niet-interactief zijn — maar vaak zijn ze nog steeds te tabben, waardoor de uitzondering vervalt.
• Donkeremodus-tokens die de lichte modus spiegelen zonder herberekening van verhoudingen — #bbb op #222 zit dicht bij conformiteit maar haalt het niet.

Waarom het ertoe doet

1.4.3 is de meest genoemde afzonderlijke fout in WCAG-audits, zonder meer. Lighthouse, axe, Stark en elk geautomatiseerd hulpmiddel markeren het betrouwbaar, dus het is ook het goedkoopst om op te sporen. Het herstel is doorgaans één ontwerptokenwijziging die door het hele systeem doorwerktt — één keer doorvoeren, één keer testen, uitleveren. Het overslaan is bijna altijd een afweging tussen merk en toegankelijkheid die eindigt in een klacht.