WCAG voor vormgevers

Ontwerp toegankelijke interfaces die iedereen kan gebruiken. Deze praktische gids helpt je WCAG 2.2 AA compliant ontwerpen maken.

Waarom is dit belangrijk voor jou?

Als vormgever bepaal jij hoe een website eruitziet en voelt. Jouw ontwerpkeuzes maken het verschil tussen een interface die voor iedereen werkt en een interface die niet werkt.

Goede toegankelijkheid begint bij een goed ontwerp.

Je belangrijkste taken

1. Zorg voor genoeg contrast

Gebruik genoeg contrast tussen voorgrond- en achtergrondkleuren. Daarmee zorg je dat onderdelen goed van elkaar te onderscheiden zijn.

De regels:

  • Normale tekst: minimaal 4,5:1 contrastverhouding
  • Grote tekst: minimaal 3:1 contrastverhouding
  • UI-elementen (knoppen, iconen): minimaal 3:1 contrastverhouding
  • Focusindicators: minimaal 3:1 contrastverhouding

Tip: Maak een kleurenpalet met combinaties die genoeg contrast hebben.

De 5-minuten check
  1. Inventariseer alle tekstkleuren op je pagina:
    • Gewone tekst
    • Links
    • Knoppen
  2. Meet het contrast:
    • Open je contrast checker
    • Selecteer voorgrondkleur (tekst)
    • Selecteer achtergrondkleur
    • Controleer de contrastverhouding
  3. Beoordeel de resultaten:
    • Normale tekst: minimaal 4,5:1
    • Grote tekst (24px+ of 18,7px+ vetgedrukt): minimaal 3:1

Lees meer over contrast (minimum)

Meet hier gelijk je contrast

Voorgrond
Voer een hex-waarde in zoals #FF0000 of een RGB-waarde zoals rgb(255,0,0) 100 is volledig ondoorzichtig, 0 is volledig transparant

Luminantie: 0.00

Achtergrond
Voer een hex-waarde in zoals #FFFFFF of een RGB-waarde zoals rgb(255,255,255)

Luminantie: 1.00

2. Ontwerp voor herschalen

Zorg dat je ontwerp goed werkt op smalle schermen van 320 pixels breed.

De regels:

  • Tekst blijft leesbaar bij 400% inzoomen
  • Tekst loopt niet over elkaar heen
  • Alle functionaliteit blijft beschikbaar
  • Knoppen en links blijven klikbaar
  • Horizontaal scrollen is niet nodig bij schermen van 320 pixels breed
De 5-minuten check
  • Open je ontwerp op 1280×1024 resolutie
  • Zoom in naar 400% in je browser of design tool
  • Controleer deze punten:
    • Is alle tekst nog leesbaar?
    • Overlappen elementen met elkaar?
    • Zijn alle bedieningselementen nog klikbaar?
    • Moet je horizontaal scrollen om content te zien?

Lees meer over reflow

Hulpmiddelen voor jou

Contrast controleren:

Lees meer over hulpmiddelen bij het toetsen

Praktische tips

Ontwerp

  • Zorg voor minimaal 4,5:1 contrast tussen tekst en achtergrond.
  • Gebruik je grote tekst (minstens 24px of 18.7px vetgedrukt)? Zorg dan voor minimaal 3:1 contrast.
  • Zorg dat bedieningselementen (zoals knoppen of invoervelden) minimaal 3:1 contrast hebben met de achtergrond.
  • Zorg dat iconen en pictogrammen die belangrijk zijn voor de inhoud ook minimaal 3:1 contrast hebben.

Weergave

  • Zorg dat de hele content zichtbaar en bedienbaar blijft bij 400% zoom.
  • Voorkom dat iemand moet scrollen in twee richtingen (horizontaal én verticaal) na het inzoomen.

Succescriteria

Alle succescriteria waar een vormgever bij betrokken is:

Meer hulp nodig?

WCAG.nl

Heb je vragen over toegankelijkheid, behoefte aan advies of wil je een onderzoek laten uitvoeren? Stuur me dan gerust een bericht via niek@wcag.nl of bezoek WCAG.nl voor meer informatie.

Ik maak WCAG-richtlijnen begrijpelijk en help je praktische oplossingen vinden.