Contrast van niet-tekstuele content

Gebruik een contrastverhouding van minimaal 3:1 voor componenten van de gebruikersinterface en grafische objecten. Onder componenten van de gebruikersinterface vallen formulierelementen maar ook afbeeldingen en iconen die een link of knop zijn. De contrasteis geldt ook voor de statussen van deze bedieningselementen (zoals hover of focus). Onder grafische objecten vallen complexe afbeeldingen zoals diagrammen, grafieken en informatieve iconen.

Mensen met een visuele beperking kunnen elementen met weinig contrast niet (of niet goed) zien. Gebruik daarom genoeg contrast tussen de niet-tekstuele content en de aangrenzende kleur.

Toepassen

  • Gebruik een contrastverhouding van minimaal 3:1 voor niet-tekstuele bedieningselementen en voor de statussen van deze bedieningselementen.
  • Gebruik een contrastverhouding van minimaal 3:1 voor grafische onderdelen.

Voorbeelden

Niet-tekstuele bedieningselementen

Dit invoerveld heeft niet genoeg contrast:

De rand van dit invoerveld heeft een contrastverhouding van 1,3:1.

Beter zou zijn:

De rand van dit invoerveld heeft een contrastverhouding van 3,5:1.

De rand van dit invoerveld heeft een contrastverhouding van 21,0:1.

Grafische objecten

Dit (informatieve) icoon heeft niet genoeg contrast:

Deze iconen hebben een contrastverhouding van 1,6:1.

Beter zou zijn:

Deze iconen hebben een contrastverhouding van 3,5:1.

Deze iconen hebben een contrastverhouding van 21,0:1.

Impact

  • Mensen die slechtziend of kleurenblind zijn.

Verantwoordelijkheid

  • Vormgever