Sluit

Wat zijn de eisen aan het kleurcontrast voor interactieve elementen?

Main content

Het kleurcontrast van interactieve elementen moet aan verschillende eisen voldoen. Het gaat om het contrast tussen de grenzen van het interactieve element en de achtergrondkleur waar dit element op staat.

Wat zijn de eisen vanuit WCAG?

Voor het kleurcontrast gelden de volgende eisen:

  • De contrasteis voor niet-tekstuele elementen is 3,0:1.
  • Voor een knop met normale tekst moet het contrast tussen tekst en de achtergrond van de knop minimaal 4,5:1 zijn.
  • Voor een knop met grote tekst moet het contrast tussen tekst en de achtergrond van de knop minimaal 3,0:1 zijn.

Staat er op de knop een icoon én tekst? Dan wordt het icoon als decoratief beschouwd en wordt alleen het kleurcontrast van de tekst gemeten. Staat er alleen een icoon op een knop en heeft de knop een rand met te weinig contrast? Dan wordt het contrast van het icoon gemeten met de achtergrond van de knop.

Voor welke elementen gelden deze eisen?

Deze kleurcontrasteis geldt voor de volgende elementen:

  • Informatieve iconen die zonder tekst op een knop staan, bijvoorbeeld een icoon van een vergrootglas dat als knop dient.
  • Randen of achtergronden van invoervelden.
  • Iconen van sociale media in huisstijlkleur. Dit geldt niet voor je eigen logo.
  • De focusindicator als je deze zelf hebt aangepast. De standaard focusindicator voldoet aan WCAG. Een aangepaste focusrand heeft een minimaal contrast van 3,0:1 tussen de focusrand en de achtergrond van de pagina.
  • Lijnen in grafieken en schema’s tenzij deze informatie niet als tekst op de pagina staat.
  • Knoppen in videoplayers die geen achtergrond hebben en slecht zichtbaar worden op beelden uit de video.

Waarom is het belangrijk?

De grenzen van interactieve elementen moeten goed zichtbaar zijn voor bezoekers met een visuele beperking. Zo is het lastig om een formulier in te vullen als je niet goed ziet waar de invoervelden staan. Dat gebeurt als er te weinig contrast is tussen de randen van de invoervelden en de achtergrond.

voorbeeld van formulier waarvan de randen te weinig contrast hebben

Wat zijn onze tips?

Gebruik de Colour Contrast Analyser en check het kleurcontrast van de interactieve elementen op je website of app.

Ook interessant

Officiële documentatie