Bepaal met deze 9 richtlijnen de juiste kleuren voor je website

Kleur is een bijzonder natuurlijk fenomeen. Ieder mens dat kan zien heeft ermee te maken. Zo ook op het web, en dus ook op jouw website. De perceptie van jouw merk, producten en klantenervaring wordt voor een groot deel bepaald door hoe kleuren worden toegepast. In dit artikel vind je negen richtlijnen om de juiste kleuren voor je website te bepalen, zodat bezoekers de beste gebruikerservaring krijgen en jij jouw merkwaarden kan communiceren.

Terminologie

Voordat we de diepte in gaan is het belangrijk om wat basiskennis van kleurentheorie te hebben. Kleuren zijn golflengtes waaruit licht is opgebouwd. Mensen kunnen enkel een deel van het kleurenspectrum waarnemen. Het brein van de mens neemt de golflengtes waar, daaruit ontstaat een interpretatie.

Elke kleur bestaat uit drie parameters:

De kleurenparameters volgens het kleurensysteem van Munsell.

1. Tint. De tint op het kleurenspectrum
2. Verzadiging. Hoe vol de kleur is. Hoe lager de verzadiging, des te minder tint is er zichtbaar.
3. Intensiteit. Hoe helder de kleur is. Bij een lage intensiteit is de kleur donker.

Methodes

1. Begrijp de betekenis van de kleuren

Voordat je kleuren uitkiest is het belangrijk om de betekenis van de verschillende kleuren te begrijpen.

Rood: Passie, kracht, liefde en gevaar

Oranje: Actie, vooruitgang, waarschuwing en werk

Geel: Positiviteit, vrolijkheid, energie en geluk

Groen: Groei, leven, nieuw en potentie

Blauw: Betrouwbaarheid, rust, schoon en zakelijkheid

Paars: Creativiteit, luxe, mystiek en diversiteit

Als je een uitstraling voor je website kiest is het belangrijk dat de kleuren overeenkomen met de waarden van je merk en met je zakelijke doelen. Daarnaast kun je de kleuren rood, oranje en geel goed gebruiken om de gebruiker in actie te brengen. Zo kan een contrasterende call-to-actionknop bijdragen aan de conversieratio.

2. Gebruik een kleurenpalet

Voordat je kleuren selecteert voor je website is het belangrijk om na te gaan of je merk al een kleurenpalet heeft. Als dat zo is, dan is het belangrijk deze aan te houden. Bekijk goed welke kleuren van dit merk voor welke elementen gebruikt kunnen worden. Het is belangrijk dat het overgrote deel van je website er rustig uit ziet. Gebruik je belangrijkste merkkleuren op de meest strategische plekken.

Als je nog geen kleurenpalet hebt bepaald is het belangrijk om dat alsnog te doen. Bedenk wat je met je website wilt communiceren en kies daarvoor geschikte kleuren uit. Een kleurenpalet kun je op verschillende manieren opbouwen:

1. Analoog. De kleuren sluiten bij elkaar aan omdat de tint per kleur ietwat verschilt. Dit is een mooi palet als je een centraal gevoel wilt creëren rondom één kleur.

2. Monochromatisch. De kleuren hebben allemaal dezelfde tint, maar de verzadiging en intensiteit bouwen geleidelijk af. Dit zorgt voor een rustige uitstraling, maar kan er nogal eentonig uitzien.

3. Complementair. Dit palet bestaat uit twee kleuren die lijnrecht tegenover elkaar staan in de kleurencirkel.

4. Split-complementair. Lijkt op complementaire palet, maar splitst aan één zijde af om een directe tegenpool te voorkomen.

5. Triadisch. De gekozen kleuren in dit palet staan in een driehoekverhouding tot elkaar binnen de kleurencirkel.

6. Tetradisch. Lijkt op het triadische palet, enkel bestaat dit palet uit vier hoofdkleuren en staan ze in een vierkante vorm tot elkaar. Bij dit palet is het aan te raden één kleur als hoofdkleur te hanteren en de andere kleuren een ondersteunende rol te geven.

3. Kies een contrastmodus

De twee contrastmodi waarover je een beslissing moet maken.

Denk goed na over de context waarin je website wordt vertoond. Als je website veel overdag wordt bezocht, dan is zwarte tekst op een lichte achtergrond beter leesbaar. Als de omgeving donker is kan een overweldigend lichtgekleurde achtergrond als vervelend worden ervaren. Je kunt er natuurlijk ook voor kiezen om dit door de gebruiker instelbaar te maken. Een wisseling van contrastmodus kan aandacht brengen naar een specifiek element.

Let op dat een licht-op-donker contrastmodus luxe of exclusiviteit kan communiceren naar de eindgebruiker. Een donker-op-licht contrastmodus kan daarentegen eenvoud en rust communiceren.

4. Zorg ervoor dat de fotografie goed past bij het kleurenpalet

Niet elke foto past bij elk kleurenpalet. Bekijk goed de kleuren van je kleurenpalet. Zijn de kleuren verzadigd? Dan dienen de kleuren in de gebruikte fotografie ook verzadigd te zijn. Wil je rust en eenvoud uitstralen? Kies dan voor foto’s waarin veel negatieve ruimte wordt vertoond. Fotografie waarin de kleuren naadloos aansluiten bij het gekozen palet zullen nog beter tot hun recht komen. Gebruik lichtgekleurde fotografie als het kleurenpalet van je site ook lichtgekleurd is. Je kunt altijd de kleuren van afbeeldingen bewerken om ze goed te laten passen binnen de uitstraling van je site.

Deze foto bevat weinig verzadiging. Kleuren met verminderde verzadiging passen hier dus het beste bij.Deze foto bevat een specifieke combinatie van contrast en verzadiging. De scooter springt er uit, en de groene kleur die zich in het onderste palet bevindt is hier complementair aan.

5. Maak associaties

Bezoekers van je website zullen elementen die dezelfde kleur bevatten met elkaar associëren. Het is daarom bijvoorbeeld raadzaam om de meeste knoppen en links dezelfde kleur te geven. Dit zorgt ervoor dat gebruikers weten waar ze op kunnen klikken. Ook kun je informatie met elkaar verbinden door het een bepaalde kleur te geven. Zo kun je de header en footer van je site dezelfde kleur geven om te communiceren dat je daarmee kan navigeren, en dat ze zich buiten de variabele content bevinden.

6. Creëer een gezonde balans

Het is belangrijk een gezonde, duidelijke balans te creëren in het kleurgebruik van je site. Zo is het aan te raden dat 70% uit witruimte bestaat, 20% uit je primaire merkkleur en 10% uit een opvallende, ondersteunende kleur. Hoe minder je de opvallende kleur toepast, des te meer springt het eruit tussen de andere elementen. Bekijk bijvoorbeeld hoe wij bij Emble omgaan met onze huisstijl op de website.

7. Houd rekening met symbolische en culturele context

Weet jij welke smaak bij welke kleur hoort?

Sommige kleuren hebben een symbolische of culturele context. Zo denken wij in Nederland bij de kleur oranje gelijk aan het koningshuis en voetbal. In het Westen associëren we wit met geboorte en trouwen, maar in oosterse culturen wordt wit geassocieerd met de dood en rouwen. Bepaalde kleuren kunnen worden geassocieerd met specifieke producten of diensten. Neem bijvoorbeeld chocolade: je weet waarschijnlijk welke smaak chocolade hoort bij de kleuren blauw, rood, groen en geel. En bij felroze kun je vast ook wel wat associaties bedenken. Controleer of je kleurgebruik niet het verkeerde communiceert naar je eindgebruikers.

8. Toets op toegankelijkheid

Niet iedereen kan alle kleuren zien. 8% van alle mannen in Nederland lijdt aan een vorm van kleurenblindheid, bij vrouwen is dat 0,5%. Een deel van de bezoekers van je website zal dus kleurenblind zijn. Zorg ervoor dat je website ook duidelijk en aantrekkelijk is voor deze bezoekers. Je kunt je website testen met deze kleurenblindheidscheck.

Ook kunnen bezoekers slechtziend zijn. Volgens de WCAG-specificatie moet het contrast van tekst op elke achtergrond genoeg zijn. Met deze website kun je het kleurencontrast controleren.

Als je veel animaties gebruikt met felle kleuren is het van groot belang dat je een epilepsiewaarschuwing toevoegt. Natuurlijk kun je ook overwegen of die felgekleurde animaties überhaupt wel wenselijk zijn, ook voor gebruikers die niet epilepsiegevoelig zijn.

9. Voorkom dat kleuren vloeken

Merk jij ook dat ogen op de vlakken hierboven onrustig reageren?Sommige kleurencombinaties kunnen zeer oncomfortabel voor het oog zijn. Meestal wordt dit veroorzaakt door het gebruik van complementaire kleuren met een maximale verzadiging. Zelfs als je kleurenpalet veel verzadigde, heldere kleuren bevat is het aan te raden om ze verstandig te verdelen.

Aan de slag!

Hopelijk helpen deze richtlijnen je om een mooie en duidelijke website te ontwerpen. Bedenk dat als iets voor jou niet goed voelt, je gebruikers dat ook zo zullen ervaren. Kleuren beïnvloeden gevoel en zijn contextgevoelig, als mens merken wij dit bewust én onbewust. Natuurlijk zijn deze richtlijnen geen wetten: er is bij elke richtlijn wel een uitzondering voor te bedenken. Heb je moeite met het bepalen van de kleuren van je website? Dan kan een ontwerper of ontwerpbureau je helpen. Zo hebben we bij Emble veel passie voor het ontwerpen van toegankelijke, duidelijke en overzichtelijke websites. Wist je dat de oprichters van Emble (Philip en Thomas) allebei hebben gestudeerd aan een Grafisch Lyceum, en dat wij webdesigndiensten aanbieden? Neem gerust contact met ons op als je interesse of vragen hebt.