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. Deze content kan toegankelijk worden gemaakt door het een contrastverhouding van minimaal 3:1 te geven.

Toepassen

  • Gebruik een contrastverhouding van minimaal 3:1 voor niet-tekstuele bedieningselementen.
  • Gebruik een contrastverhouding van minimaal 3:1 voor statussen van niet-tekstuele bedieningselementen.
  • Gebruik een contrastverhouding van minimaal 3:1 voor grafische objecten.

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.

Impact

  • Mensen die slechtziend of kleurenblind zijn.

Verantwoordelijkheid

  • Vormgever

Bronnen