Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Welk contrast hebben knoppen en invoervelden op websites nodig?
Knoppen, invoervelden en informatieve afbeeldingen hebben een contrastratio van minstens 3:1 tot hun omgeving nodig. Deze drempel komt uit de standaard WCAG. Dit zorgt ervoor dat een bezoekermet zwakker zicht ziet waar hij kan klikken en waar hij kan typen — een wit invoerveld met lichtgrijze rand op witte achtergrond is praktisch onzichtbaar.
Bedieningselementen moeten zich afzetten
Terwijl de bekende contrastregel de tekst betreft, gaat het hier om alles anders zichtbaars dat een functie draagt: de rand van het invoerveld, het oppervlak van de knop, het vergrootglasembleem van de zoekopdracht, het vinkje in het selectievakje. Moderne, zeer gereduceerde vormgeving is hier de meest voorkomende valkuil — lichtgrijze veldkanten op witte grond zien er elegant uit, maar liggen vaak ver onder 3:1. Een bezoeker met verzwakkend zicht ziet dan een formulier zonder erkende velden: hij weet niet waar de cursor moet. Ook emblemen zonder tekstlabel — bijvoorbeeld het hamburgermenu — moeten zich met minstens 3:1 van de achtergrond onderscheiden, anders bestaat de navigatie voor hem niet.
Zo meet onze messkern het contrast van de bedienelementen
Onze messkern kiest een steekproef van de bedienelementen op uw pagina — invoervelden, knoppen, vormgegeven linkknopen — en fotografeert elk met omgeving in de browser. Uit de beeldpunten berekent hij de helderheid van rand, vulling en omgeving en daaruit de werkelijke contrastratio van de elementgrens. Liggen gemeten grenzen onder 3:1, meldt het verslag dat doelbewust als vastgestelde controlecase en niet onmiddellijk als schending: een ogenschijnlijk zwak veld kan visueel door een omringende container worden gedragen — dat beoordeelt bij de goudstandaard iemand aan de hand van de meegeleverde schermafbeelding. Als geslaagd telt het criterium alleen bij voldoende grote, volledig onopvallende steekproef; zuiver grafische objecten als diagrammen blijven menselijke controle.
Beispiele
Eingabefeld mit blassem Rahmen
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Rahmen, Symbole und Fokusrahmen brauchen 3:1 zum Hintergrund, sonst ist das Feld nicht als Feld erkennbar.
- Controleer uw formulieren: elk invoerveld heeft een rand of vulling nodig die zich duidelijk van de achtergrond onderscheidt.
- Vraag uw bureau de randkleuren van de velden tegen de 3:1-drempel te controleren en donkerder te stellen waar nodig.
- Controleer emblemen zonder tekst — zoeken, menu, winkelwagen — op voldoende contrast met de achtergrond.
- Let op toestanden: ook de markering van een geselecteerd tabblad of een actief selectievakje heeft 3:1 nodig.
- Bekijk uw formulieren van twee meter afstand — verdwijnen de velden optisch, dan is het contrast te zwak.