Kleuren kiezen voor uw website: één hoofdkleur, één accent en genoeg contrast

Iedereen heeft een mening over kleur. De ene compagnon wil blauw “omdat dat betrouwbaar is”, de andere wil oranje “omdat het opvalt”, en de nieuwe site eindigt met allebei plus nog drie tinten voor de zekerheid. Kleuren kiezen voor uw website hoeft geen smaakdiscussie te zijn. Met een vaste verdeling en een contrastcontrole komt u tot een palet dat rustig oogt, opvalt waar het moet en voor iedereen leesbaar is.

Begin bij wat er al is

Heeft u een logo of huisstijl, dan liggen een of twee kleuren al vast. Daar bouwt u op voort. Een volledig nieuw kleurenschema naast uw bestaande logo maakt het geheel rommelig. Hoe huisstijlkleuren van papier naar scherm gaan, staat in uw huisstijl vertalen naar een website.

Heeft u nog niets, kijk dan naar uw vak en uw klanten. Niet om te doen wat iedereen doet, maar om te weten waartegen u afsteekt. Als elke installateur in uw regio blauw en oranje gebruikt, kan een donkergroen u juist herkenbaar maken.

Kleuren kiezen voor uw website met een vaste verdeling

Een palet dat in de praktijk goed werkt, bestaat uit vier soorten kleuren:

• Een hoofdkleur. De kleur waarmee mensen u herkennen. Die zit in het logo, koppen, de kopbalk of grote vlakken.
• Een accentkleur. Eén kleur die u spaarzaam gebruikt, vooral voor knoppen en de dingen die de bezoeker moet doen. Hoe minder hij elders voorkomt, hoe beter hij werkt.
• Neutrale tinten. Wit of gebroken wit voor de achtergrond, een lichtgrijs voor vlakken die iets moeten scheiden, en een heel donkergrijs voor tekst. Puur zwart op puur wit is voor veel mensen harder dan nodig.
• Signaalkleuren. Rood voor een foutmelding in een formulier, groen voor “verstuurd”. Klein, maar niet vergeten.

Veel ontwerpers houden een verhouding aan waarbij het overgrote deel van de pagina neutraal is, de hoofdkleur een flink deel inneemt en het accent maar een klein stukje. Dat is een vuistregel, geen wet. Het idee is dat het accent alleen opvalt als de rest rustig is.

Stap voor stap een palet samenstellen

1. Leg de hoofdkleur vast met een hexcode, bijvoorbeeld #1F5A3C.
2. Maak er een lichte en een donkere variant van. De lichte voor achtergrondvlakken, de donkere voor tekst of een knop als de hoofdkleur zelf te licht is.
3. Kies een accentkleur die duidelijk verschilt van de hoofdkleur. Kleurenwielen zoals Adobe Color helpen om een complementaire of contrasterende kleur te vinden.
4. Kies de neutrale tinten en de tekstkleur.
5. Test alles op contrast, zie hieronder.
6. Bekijk het op een telefoon, buiten. Wat binnen op een goed scherm mooi is, kan in de zon wegvallen.

Contrast: de controle die vaak vergeten wordt

Lichtgrijze tekst op een witte achtergrond ziet er elegant uit en is voor veel mensen slecht leesbaar. Hetzelfde geldt voor witte tekst op een lichtgroene of gele knop. De internationale richtlijn voor toegankelijke websites, WCAG van het W3C, geeft er een concrete maat voor. Volgens succescriterium 1.4.3 heeft gewone tekst een contrastverhouding van minimaal 4,5 op 1 nodig ten opzichte van de achtergrond. Voor grote tekst, ongeveer 24 pixels of groter, of 18,66 pixels vet, is 3 op 1 genoeg. Logo’s zijn uitgezonderd.

U hoeft dat niet uit te rekenen. Er zijn gratis contrastcheckers, bijvoorbeeld van WebAIM, waar u twee hexcodes invult en meteen ziet of de combinatie voldoet. Doe dat voor elke combinatie die u gebruikt: tekst op achtergrond, tekst op knop, link in lopende tekst.

Wat de richtlijnen verder vragen, leest u in de nieuwe criteria in WCAG 2.2.

Kleur is niet het enige signaal

Een deel van uw bezoekers, vaker mannen dan vrouwen, ziet bepaalde kleuren slecht uit elkaar. Rood en groen zijn de bekendste combinatie. Vertrouw daarom nooit alleen op kleur. Een link in lopende tekst die alleen een andere kleur heeft, valt voor een deel van uw bezoekers niet op. Een onderstreping lost dat op. Een foutmelding in een formulier die alleen het vak rood maakt, zegt niet wat er mis is. Een korte tekst erbij wel.

Wat vaak misgaat

• Elke dienst een eigen kleur. Klinkt overzichtelijk, wordt een regenboog.
• De accentkleur overal. Kopjes, iconen, lijnen en knoppen in dezelfde felle kleur. Dan valt de belangrijkste knop niet meer op.
• Tekst over foto’s zonder donkere laag eronder. Op de ene foto leesbaar, op de volgende niet.
• Kiezen op één scherm. Kijk op minstens een telefoon en een laptop.

Kleur, contrast en de bouw

Een goed palet legt de bouwer vast in het thema, zodat u bij het aanpassen van een pagina alleen uit de afgesproken kleuren kunt kiezen. Dat voorkomt dat er over een jaar een paars kopje opduikt. Wilt u dat uw nieuwe site vanaf het begin rekening houdt met contrast en leesbaarheid, kijk dan bij een toegankelijke website laten maken.