Native HTML-componenten en kleurcontrast volgens WCAG 2.1

Table Of Contents

Native HTML-componenten en kleurcontrast volgens WCAG 2.1

Informatieve en interactieve interface-elementen zoals knoppen, selectievakken en schuifregelaars moeten voldoende contrast hebben zodat ze zichtbaar zijn voor alle bezoekers. In de praktijk roept dit vaak vragen op bij audits en code-reviews: moet ik het kleurcontrast van elk zichtbaar UI-element controleren en verbeteren?

Het korte antwoord is: nee, niet altijd.

De contrasteis geldt niet voor grafische elementen die volledig door de user agent worden geleverd, mits ze niet zijn aangepast door de auteur.

See the Pen 1.4.11 exceptions by Julia Tol (@Julia-Tol-wcag) on CodePen.

Voorbeelden waarbij contrast verplicht is:

  • Een checkbox gebouwd met <div> en CSS
  • Een <select> waarbij de pijl is vervangen door een SVG
  • Een slider waarvan de thumb en track custom zijn gestyled
  • Eigen focus-indicator
Tags :
Share :

Related Posts

Submenu dichtklappen

Toetsenbordfocus moet logisch zijn Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren.

Lees meer over Submenu dichtklappen

Hoe toegankelijk zijn de websites van de grootste opticiens?

Een mini-scan met verrassende inzichten De European Accessibility Act (EAA) is van kracht. Voor middel- en grote bedrijven die producten en diensten online aanbieden, betekent dit dat hun websites en apps moeten voldoen aan de toegankelijkheidsrichtlijnen (WCAG). Maar hoe staat het er nu eigenlijk voor met de digitale toegankelijkheid in Nederland?

Lees meer over Hoe toegankelijk zijn de websites van de grootste opticiens?

Tools om contrast te checken

De TPGi Color Contrast Checker is een gratis tool om te controleren of de kleuren op je website genoeg contrast hebben volgens de WCAG-richtlijnen.

Lees meer over Tools om contrast te checken