Proper Access

digitale toegankelijkheid

by on

SC 1.4.11 – Wat betekent “Contrast voor niet-tekstuele onderdelen”

Toegankelijkheid gaat niet alleen over leesbare tekst. Ook visuele elementen zoals knoppen, iconen, formuliervelden en focusindicatoren moeten duidelijk zichtbaar zijn. Als deze nauwelijks afsteken tegen de achtergrond, kunnen gebruikers belangrijke functies of informatie missen.

Daarom zegt WCAG: zorg voor voldoende contrast voor alle niet-tekstuele onderdelen van je site.

Dit heet 1.4.11 Non-Text Contrast.

Wat wordt er van websites verwacht?

  • Interactieve elementen (zoals knoppen, sliders, formuliervelden) moeten een contrastverhouding hebben van minimaal 3:1 met hun achtergrond.
  • Informatieve grafische onderdelen (zoals iconen, grafieken en diagrammen) moeten ook minimaal 3:1 contrast hebben.
  • De focus-indicator (bijvoorbeeld een rand om een knop wanneer je navigeert met Tab) moet duidelijk zichtbaar zijn.

Kort: alles wat betekenisvol is en niet puur decoratie, moet goed zichtbaar zijn.

Wat is niet verplicht?

  • Pure decoratieve elementen hoeven geen minimumcontrast te hebben.
  • Tekstelementen zelf vallen onder andere contrastregels (zoals 1.4.3 voor gewone tekst).
  • Logo’s en merknamen zijn vrijgesteld van deze eis.

Veelgemaakte fouten

  • Formuliervelden die nauwelijks zichtbaar zijn tegen een lichte achtergrond.
  • Knoppen zonder duidelijke rand of schaduw, waardoor ze wegvallen.
  • Focusranden die zo licht zijn dat je ze niet ziet bij toetsenbordnavigatie.
  • Iconen die te weinig afsteken tegen hun achtergrond.

Wat kun je als webredacteur of manager doen?

  • Controleer interactieve elementen: Zijn knoppen, velden en andere interactieve onderdelen goed zichtbaar?
  • Test focusnavigatie: Navigeer met Tab door je site en kijk of je altijd ziet waar je bent.
  • Gebruik contrasttools: Laat je design controleren op minimaal 3:1 contrast voor niet-tekstuele elementen.
  • Vraag je webbouwer: Worden alle focusstijlen correct weergegeven, zonder te lichte kleuren?

Samenvatting

Niet alleen tekst moet goed leesbaar zijn. Ook knoppen, velden, iconen en andere visuele onderdelen moeten voldoende contrast hebben om echt bruikbaar te zijn – voor iedereen.