Zoekformulier

Zoeken

Filteren

Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Contrast van niet-tekstuele content

Over contrasten

Kleuren zijn belangrijk voor vormgeving omdat ze de sfeer bepalen en de aandacht van iemand kunnen trekken. Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

Hoe sterk dit verschil is, noemen we de contrastverhouding. Dit laat zien of elementen makkelijk te onderscheiden zijn van de achtergrond, of van elkaar. Een contrastverhouding van 1:1 betekent dat elementen helemaal niet te onderscheiden zijn. Een verhouding van 21:1 is het grootste contrast. Dit is wit op zwart of zwart op wit.

Gebruik genoeg contrast voor niet-tekstuele bedieningselementen

Niet-tekstuele bedieningselementen zijn onder andere:

  • Formulierelementen (zoals invoervelden, keuzerondjes en selectievakjes met de daarbij horende statussen).
  • Afbeeldingen of iconen die ook als link of knop worden gebruikt.
  • De indicator van de toetsenbordfocus.

De contrastverhouding voor niet-tekstuele bedieningselementen moet voldoen aan minimaal 3:1.

Gebruik genoeg contrast voor grafische objecten

Grafische objecten zijn onder andere:

  • Kleuren in een grafiek, staafdiagram of cirkeldiagram
  • Lijnen en iconen op een kaart
  • Informatieve iconen

De contrastverhouding voor grafische objecten moet voldoen aan minimaal 3:1. Voor grafische objecten geldt dit voor zowel de contrastverhouding tussen de voorgrondkleur en de achtergrondkleur én twee aangrenzende kleuren.

Uitzonderingen voor contrast van niet-tekstuele content

Er zijn een paar uitzonderingen waarbij niet-tekstuele content niet aan de contrasteisen hoeven te voldoen. Dit geldt voor:

  • Elementen die inactief zijn.
  • Elementen die puur decoratief zijn.
  • Elementen waarvan de weergave wordt bepaald door de user agent en niet wordt aangepast door de auteur.
  • Elementen waarvan een specifieke weergave essentieel is voor de informatie die wordt overgebracht (zoals een logo of woordmerk).

Over contrastverhouding

De contrastverhouding tussen twee kleuren wordt berekend met een formule die de relatieve lichtheid van de kleuren met elkaar vergelijkt.

De contrastverhoudingen worden niet afgerond. Als een contrastverhouding van minimaal 4,5:1 is vereist, dan is 4,49:1 dus nog niet genoeg.

Er zijn tools die kunnen helpen bij het berekenen van de contrastverhouding.

Colour Contrast Analyser (CCA)

Colour Contrast Analyser (CCA) is een programma dat kan worden gebruikt voor het meten van de contrastverhouding tussen twee kleuren. Vul de HEX- of RGB-kleurcodes in, of bepaal de de kleur met een pipet en het programma berekent de contrastverhouding.

Download Colour Contrast Analyser (CCA) voor Windows of Mac.

WebAIM Contrast Checker

De website WebAIM.org heeft een contrastchecker voor het meten van de contrastverhouding tussen twee kleuren. Vul de HEX-kleurcodes in en de website berekent de contrastverhouding.

Zie ook