1-4-11
Invoerveld zonder zichtbare rand
Een wit invoerveld op een witte achtergrond. Met een lichtgrijze rand. Heel lichtgrijs. #D9D9D9.
Informatief icoon dat onzichtbaar is
Drie streepjes. Een hamburgericoon. Dat is je menu. Tenminste, als je het kunt zien.
Native HTML-componenten en kleurcontrast volgens WCAG 2.1
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?
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?
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.
Instructie: hoe test ik kleurcontrast?
Kleurcontrast is een van de meest voorkomende toegankelijkheidsproblemen die we tegenkomen in audits. Lichtgrijze tekst op een witte achtergrond, pastelkleurige knoppen, subtiele placeholdertekst – het ziet er misschien strak uit, maar voor honderdduizenden mensen met een visuele beperking is het simpelweg niet te lezen.
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.