ToegankeliJk Logo ToegankeliJk Contact Ons
Contact Ons
Scherm met hoog contrast-modus ingeschakeld, witte tekst op zwarte achtergrond, geoptimaliseerde weergave voor gebruikers met visuele beperkingen
15 min All Levels April 2026

Visuele toegankelijkheid: contrast, lettergrootte en hoog-contrast modus

Hoe je websites ontwerpt die comfortabel zijn voor iedereen, ongeacht hun zichtbaarheid. We behandelen contrastverhouding, flexibele lettergroottes en high contrast-ondersteuning.

Visuele toegankelijkheid gaat verder dan alleen iets op het scherm zetten. Het gaat erom dat iedereen wat je hebt gemaakt daadwerkelijk kan lezen en begrijpen. Of iemand nu ouder is, last heeft van rode ogen na een lange werkdag, of een blijvende visuele beperking heeft — de basisprincipes blijven hetzelfde.

In dit artikel behandelen we de drie pijlers van visuele toegankelijkheid: hoe je contrast gebruikt zodat tekst leesbaar is, waarom lettergrootte flexibel moet zijn, en hoe je high contrast-modus ondersteunt voor gebruikers die dat nodig hebben. Je zult zien dat dit geen moeilijke technische zaken zijn — het zijn eerder kwesties van goed nadenken over je ontwerp.

Contrastverhouding: het fundament van leesbaarheid

Je hebt waarschijnlijk al gehoord van WCAG 2.1 AA-norm voor contrast. Die norm zegt: zwarte tekst op witte achtergrond moet een verhouding van minstens 4.5:1 hebben. Dat klinkt abstract, maar het gaat om iets simpels: kan iemand de tekst eigenlijk zien?

Stel je voor dat je grijs-op-grijs ontwerpt. Ziet er misschien elegant uit, maar voor veel mensen is het gewoon onleesbaar. Het gaat niet alleen om mensen met slechtziendheid — mensen met dyslexie, ouderen, of iemand die buiten in het zonlicht zit: zij allemaal profiteren van beter contrast.

Praktische regel: Als je de contrastverhouding niet kunt meten (gebruik een tool zoals WebAIM Contrast Checker), is het waarschijnlijk niet goed genoeg. Test op je telefoon, test in fel zonlicht, en vraag collega’s om naar je ontwerp te kijken.

Het gaat niet alleen om zwart en wit. Pastelkleuren op witte achtergrond, licht grijs op wit, zelfs bepaalde blauwtinten — veel ontwerpen falen op contrast. Je hoeft niet in vol zwart-wit te werken, maar je moet voorzichtig zijn.

Twee vergelijkingen van tekstweergave: links slecht contrast (lichtgrijs op wit), rechts goed contrast (donkergrijs op wit), beide gelijk duidelijk zichtbaar
Smartphonescherm toont dezelfde website met verschillende lettergroottes: een versie met standaard grootte en een versie met 200% zoom, beide volledig leesbaar

Lettergrootte: flexibiliteit is essentieel

Veel websites hebben lettergroottes die veel te klein zijn. En het erge is: niet iedereen kan of wil dat probleem zelf oplossen door in te zoomen. Sommige mensen hebben hun browser al ingesteld om alles groter weer te geven, en dan krijgen ze toch kleine tekst? Dat voelt raar.

WCAG zegt dat gebruikers minstens tot 200% kunnen zoomen zonder dat horizontale scrolling nodig is. Maar eigenlijk moet je al voorzichtig zijn met lettergroottes onder de 14px voor body-tekst. Ja, kleine lettertypes zien er modern en schoon uit — maar als niemand het kan lezen, is het niet modern, het is ontoegankelijk.

Gebruik ook relatieve eenheden zoals rem of em in plaats van vaste pixels. Dat klinkt technisch, maar het betekent gewoon: wanneer iemand hun browser-instellingen aanpast, past jouw site zich automatisch aan. Dat is elegant.

Tip: Test je website op een echte smartphone. Veel ontwerpers werken op grote schermen en realiseren zich niet hoe klein de tekst is op mobiel. En test ook hoe het eruitziet wanneer je de zoompinch gebruikt op je telefoon.

High contrast-modus: wat het is en waarom het belangrijk is

High contrast-modus is een instelling in Windows (en nu ook in veel andere besturingssystemen) waarmee gebruikers kunnen kiezen voor een zwart-wit- of hoog-contrast-thema. Sommige gebruikers zetten dit aan omdat ze beter kunnen zien met maximale contrast. Anderen gebruiken het omdat ze last hebben van migraine en fel licht ongemak veroorzaakt.

Het gekke is: veel websites breken in high contrast-modus. Knoppen verdwijnen. Icoontjes zijn onzichtbaar. Fokus-indicatoren verdwijnen. Dit gebeurt omdat ontwerpers CSS-eigenschappen gebruiken die de operating system-instellingen overschrijven.

Het goede nieuws? Je hoeft hier niet veel voor te doen. Respecteer gewoon de high contrast-voorkeuren van het systeem. Gebruik forced-colors: active in je CSS om te testen, en zorg dat alle belangrijke informatie ook beschikbaar is zonder alleen op kleur te vertrouwen. Een icoon van een vergrootglas? Voeg ook “Zoeken” als tekst toe.

Windows high contrast-modus screenshot: website weergegeven met wit-op-zwart kleuren, alle tekst, knoppen en navigatie-elementen duidelijk zichtbaar

Praktische checklist: hoe je het goed doet

Contrast

  • Minimaal 4.5:1 voor body-tekst (WCAG AA)
  • Test met WebAIM Contrast Checker
  • Vermijd grijstinten naast elkaar
  • Zorg dat links duidelijk onderscheidbaar zijn

Lettergrootte

  • Minimum 14px voor body-tekst
  • Gebruik relatieve eenheden (rem, em)
  • Test tot 200% zoom
  • Zorg voor adequate regelafstand

High Contrast

  • Vermijd alleen-kleur-informatie
  • Test in Windows high contrast-modus
  • Respecteer forced-colors CSS
  • Voeg altijd tekst-alternatieven toe

Het komt neer op respect

Visuele toegankelijkheid is geen complexe technologie. Het is het erkennen dat mensen verschillend zien, en dat jij als ontwerper of developer verantwoordelijk bent voor duidelijke, leesbare interfaces. Goed contrast, flexibele lettergroottes en ondersteuning voor high contrast-modus — dat zijn geen “extra’s”. Het zijn basisbeginselen.

Het fijne is: als je voor deze drie zaken zorgt, maak je niet alleen je site beter voor mensen met visuele beperkingen. Je maakt het beter voor iedereen. Lagere contrast? Slecht voor ouderen en voor iemand buiten in het zonlicht. Te kleine lettertype? Vervelend op mobiel en voor iedereen die hun bril niet heeft. Geen high contrast-ondersteuning? Frustrerend voor mensen met bepaalde neurologische condities.

Dus test, iterate, en vraag feedback. Je hoeft niet alles perfect te krijgen — je hoeft alleen goed genoeg te zijn voor de meeste mensen. En ja, dat is zeker mogelijk.

Marieke van den Berg, Senior Expert Webtoegankelijkheid

Marieke van den Berg

Senior Expert Webtoegankelijkheid

Senior expert webtoegankelijkheid met 14+ jaar ervaring in WCAG 2.1 implementatie en inclusief ontwerp voor Nederlandse organisaties.

Disclaimer

Dit artikel is informatief en bedoeld om je te helpen visuele toegankelijkheid beter te begrijpen. WCAG 2.1 AA-richtlijnen veranderen regelmatig, en je moet altijd de officiële WCAG-documentatie raadplegen voor de meest actuele informatie. Elke website is uniek, en wat voor de ene site werkt, hoeft niet voor de andere site te werken. Raadpleeg altijd juridisch advies of een toegankelijkheids-expert als je twijfelt of je site volledig aan de regelgeving voldoet.