Ma - Vrij 8:00 - 19:00

contact@properaccess.nl

0031 (0) 85 5055 890

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

Story By Julia Tol

mei 18 — 2025

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.

Deel dit bericht

By Julia Tol

Afgestudeerd webdeveloper in Zweden (2015). Sinds 2019 werkzaam als onderzoeker digitale toegankelijkheid bij Stichting Accessibility. Tussen 2020 en 2024 actief als zelfstandig auditor voor alle grote Nederlandse auditbureaus, gecombineerd met een rol als expert binnen DigiToegankelijk Top (2022–2025). Beschikt over ruim 13 jaar ervaring bij het Ministerie van Justitie en Veiligheid, het Ministerie van Binnenlandse Zaken en Koninkrijksrelaties. Sinds 2022 directeur van Proper Access, gespecialiseerd in digitale toegankelijkheid.

Gerelateerde berichten

In deze checklist voor het toevoegen van toegankelijke content aan een webpagina bespreken we de belangrijkste punten waar je op.

Beginsituatie: er is een element met role=”application” en het heeft geen toegankelijkheidsnaam (accessible name). Hoe kun je dit oplossen? Dit.

Heb je video’s op je website en kreeg je tijdens een WCAG-audit een afkeuring op succescriterium 1.2.3 Media-alternatief of audiodescriptie.

Toegankelijkheid krijgt prioriteit door EAA Het interview is gepubliceerd op 20-06-2025 in het Financieel Dagblad. Toegankelijkheid begint bij het ontwerp.