## Het toepassen van kleuren in interfaces

Bij het ontwerpen van een interface voor een systeem moet je als ontwerper in de huid van de gebruiker kunnen kruipen. In een aantal opzichten zal die gebruiker anders reageren dan de ontwerper, maar een aantal dingen zullen ze gemeen hebben.
Mensen reageren over het algemeen op dezelfde manier op bepaalde kleuren, bijvoorbeeld. Dat komt voor een deel omdat kleuren in onze maatschappij een bepaalde betekenis hebben gekregen.

De betekenis van kleur / Welke kleur(en) wil jij?

Opdracht yes / no

Waarom zou dit scherm nare gevolgen kunnen hebben?

Klik hier

Het HSB-model

Kleuren worden weergegeven in 3 componenten: rood, groen en blauw. Dit wordt het RGB-model genoemd. Daarbij worden kleuren ook nog weergegeven in 3 andere begrippen: het HSB-model. HSB-kleuren worden ook gemaakt met behulp van drie getallen. Het eerste getal (en de H) staat voor de Hue, de tint. Dit is een kleur op de regenboog. De plaats op de regenboog wordt aangegeven door een getal tussen 0 en 1.

De S van HSB staat voor Saturation, ofwel verzadiging. Dit geeft aan hoe fel de kleur is. Een minimale waarde voor de verzadiging betekent dat er geen enkele kleur meer is, het is grijs; een maximale waarde geeft aan dat de kleur op z'n felst is.
De B van HSB staat voor Brightness, ofwel helderheid. Dit geeft aan hoe licht de kleur is. Een minimale waarde betekent geen enkel licht: zwart; een maximale waarde wil zeggen dat de kleur voluit getoond wordt.

Je kunt dit verschil in helderheid zien als je in Word een kleur kiest:

De helderheid van de kleur groen kun je veranderen door het driehoekje op de balk te verschuiven.

Er zijn drie regels om ervoor te zorgen dat je tekst niet wegvalt tegen de achtergrond, en ook leesbaar is voor mensen die kleurenblind zijn:

- Overdrijf het verschil in helderheid tussen de voorgrond en de achtergrond en vermijd kleuren die dichtbij elkaar liggen, en een vergelijkbare mate van helderheid hebben, zelfs als ze verschillen in verzadiging of tint.
- Kies donkere kleuren uit de rechterhelft van de kleurencirkel tegen lichte kleuren van de linkerhelft.
- Vermijd kleuren die dicht naast elkaar liggen in de kleurencirkel.

Opdracht leesbaarheid tekst

Zou de combinatie van rood en oranje een leesbare tekst opleveren?

Klik hier

Er zijn formules die berekenen of de mate van helderheid en de kleuren zelf voldoende van elkaar verschillen. De formules worden hier niet behandeld. Je kunt wel uittesten welke combinatie van kleuren een leesbaar resultaat oplevert. Klik in onderstaande applet op een toets uit de linkerkolom om een kleur voor de tekst te kiezen. Klik op een kleur uit de rechterkolom om een achtergrond te kiezen. Je ziet vervolgens of het verschil tussen de kleuren en hun mate van helderheid voldoende is.

Kleuren hebben niet alleen een bepaalde betekenis omdat er afspraken over zijn gemaakt. Rood wordt vaak gebruikt voor gevaar of stoppen/niet doen. Kleuren hebben ook een emotionele waarde. Zo staat rood niet alleen voor gevaar of stoppen, maar ook voor warm bijvoorbeeld. Voor veel mensen uit eenzelfde cultuur hebben kleuren dezelfde emotionele waarden. Per cultuur kunnen die waarden echter wel verschillen.
Bekijk het filmpje over kleuren op de website Color in Motion. Dat doe je door op de voorstelling te klikken. Denk erom: het duurt even voordat het filmpje is geladen.

Het filmpje laat zien welke gevoelens bepaalde kleuren oproepen.

Klik hier voor website.