Home > Aan de slag > Kleurgebruik en kleurenblindheid

Kleurgebruik is naast esthetisch ook functioneel: het helpt bezoekers informatie te begrijpen en het ondersteunt de navigatie door een site. Er moet daarom voldoende onderscheid gemaakt worden tussen voor- en achtergrondkleuren. Hierbij moet rekeninge gehouden worden met het verminderd kleurzien van kleurenblinden.

Inhoudsopgave

Aandachtspunten

Er zijn twee belangrijke punten van aandacht met betrekking tot het gebruik van kleur op websites.

  • Betekenis. Communicatieve elementen op een pagina moeten niet uitsluitend afhankelijk zijn van kleur.
  • Leesbaarheid. Alle communicatieve teksten en elementen op een pagina moeten leesbaar zijn voor alle bezoekers.

Het kleurgebruik bij links wordt in dit hoofdstuk niet behandeld. Informatie over dit onderwerp is te vinden bij Links en navigatie.

Naar boven


Kleurenblindheid

Volledige kleurenblindheid, waarbij men geen kleuren ziet, komt zeer zelden voor. De wereld wordt dan als een zwart-witfoto ervaren. Ruim 8 procent van de mannen en 0,4 procent van de vrouwen, samen ongeveer 700.000 Nederlanders, lijdt aan deze handicap.

Met betrekking tot kleurenblinde bezoekers, is het belangrijk dat webontwikkelaars voldoende aandacht besteden aan het gebruik van kleur op webpagina's. Naast de inhoud van de informatie op een webpagina, is ook de leesbaarheid van die informatie een aandachtspunt.

Enkele vuistregels voor kleurgebruik voor kleurenblinden

De volgende kleurencombinaties kunnen beter worden vermeden.

  • Groen, rood, oranje, bruin en geel;
  • Paars en blauw;
  • Rood op zwart of zwart op rood, of vlak tegen elkaar aan;
  • Pastelkleuren

Uitzonderingen

  • Als bovengenoemde kleuren als achtergrond worden gebruikt met een witte tekst erover, waarbij er voldoende grijscontrast is;
  • Als vlakken van bovengenoemde kleuren naast elkaar worden gebruikt (bijvoorbeeld bij navigatieknoppen), waarbij deze vlakken van elkaar te onderscheiden zijn (bijvoorbeeld door middel van witruimte);
  • Als er voldoende verschil in helderheid is (bijvoorbeeld lichtgele tekst op een donkergroene knop).

Het testen van websites in grijswaarden

De meeste computers beschikken over toegankelijkheidsopties voor slechtzienden, die voor webontwikkelaars heel bruikbaar zijn om tests om tests mee uit te voeren. Zo geeft de instelling van het beeldscherm op grijswaarden een indruk van de toegankelijkheid van de desbetreffende webpagina’s voor normaal-zienden, slechtzienden en kleurenblinden. Hiermee kan de webontwikkelaar het contrast in de helderheid van kleuren goed nagaan.

Naar boven


De betekenis van kleur op webpagina’s

Kleur wordt vaak gebruikt als zowel decoratief als communicatief vormgevingselement op een webpagina.

Decoratieve vormgevingselementen fungeren letterlijk alleen als decor. Het ontbreken van dergelijke elementen heeft geen enkele consequentie voor het begrip van de bezoeker. Denk hierbij bijvoorbeeld aan achtergrondillustraties.

Met communicatieve elementen worden elementen bedoeld, die betekenis kunnen hebben voor de bezoeker. Via deze elementen wordt informatie overgedragen aan de bezoeker. Tekst (in HTML of afbeeldingen), links, navigatie, symbolen/iconen en (formulier)knoppen zijn hier voorbeelden van.

Decoratieve elementen worden hier niet behandeld, omdat het kleurgebruik bij deze elementen vrijwel geen invloed heeft op duurzame toegankelijkheid van websites. Ten aanzien van het kleurgebruik bij communicatieve elementen bestaan er richtlijnen binnen de WCAG (Web Content Accessibility Guidelines).

Gerelateerde richtlijnen

  • R-pd.10.1: Zorg ervoor dat communicatieve elementen hun betekenis niet uitsluitend door kleur overbrengen.
  • R-pd.10.2: Wees consistent met kleurgebruik bij het geven van betekenis.

Naar boven


Kleurgebruik en leesbaarheid

Het volgen van de richtlijnen zal grotendeels ook de leesbaarheid van de pagina’s verbeteren voor bezoekers zonder oogafwijkingen en voor slechtzienden. Hier volgen enkele aandachtspunten.

  • Positieve tekst (donkere tekst op een lichte achtergrond) wordt beschouwd als beter leesbaar dan diapositieve tekst (licht op donker). Er zijn uitzonderingen: programmeurs en mensen die erg veel tijd achter het beeldscherm doorbrengen kunnen last krijgen van een fel witte achtergrond. Zij geven soms voorkeur aan een donkere achtergrond. Over het algemeen zal een lichte achtergrond als prettiger worden ervaren, ook al kan puur wit erg fel overkomen. Dit is geen harde richtlijn, maar een overweging.
  • Het gebruik van felle kleuren, zowel voor tekst als achtergrond (achter tekst) wordt afgeraden. Het is vermoeiend voor de ogen en komt de leesbaarheid niet ten goede.De achtergrond vloeit over in dunne lettervormen. Dit is met name het geval bij beeldbuizen, omdat dit lichtprojectoren zijn, en minder bij TFT-schermen.
  • Rood op zwart en zwart op rood wordt afgeraden.
  • Groen, oranje, bruin en geel worden afgeraden.
  • Zorg voor voldoende helderheidcontrast tussen tekst- en achtergrondkleur.Naast het belang voor kleurenblinde bezoekers, geldt dit vanwege de beperking van sommige beeldschermen om subtiele kleurverschillen goed weer te geven.

Gerelateerde richtlijnen

  • R-pd.10.3: Zorg voor voldoende helderheidscontrast tussen tekst- en achtergrondkleur.

Naar boven