Voor een bedrijfswebsite heb je aan drie kleuren genoeg: een rustige basis (meestal wit of gebroken wit), een donkere kleur voor je tekst, en één accentkleur die je logo oppakt en die je alleen gebruikt voor knoppen en links. Alles daarboven maakt je site onrustiger, niet mooier. Leesbaarheid gaat altijd vóór smaak: donkere letters op een lichte achtergrond wint het van elke stijlvolle lichtgrijze tekst.
Begin bij je logo en houd het klein
De makkelijkste route naar een kloppend kleurenpalet loopt via je logo. Daar zit meestal al één duidelijke kleur in. Die neem je mee naar je website, en daarmee is de belangrijkste keuze gemaakt. Heb je geen logo of een logo dat alleen uit zwarte letters bestaat, kies dan één kleur die bij je werk past en houd die consequent vast.
Een werkbare verdeling: ongeveer tweederde van je pagina is rustige achtergrond (wit of gebroken wit), een flink deel is tekst in een donkere kleur, en een klein deel is je accentkleur. Dat laatste beetje valt op juist omdat het weinig is. Zodra je accentkleur overal zit, in koppen, in lijntjes, in vlakken én in knoppen, valt niets meer op.
Een accentkleur werkt alleen zolang hij uitzondering blijft.
Hoeveel kleuren is te veel?
Bij meer dan drie kleuren plus wit en grijs wordt het snel rommelig. Branches die met kleur werken (een bloemist, een schilder, een kinderopvang) kunnen er wel een vierde bij hebben, maar zet die dan in op foto's en beeld in plaats van op knoppen en vlakken.
Geef je knoppen één vaste kleur
Dit is het punt waarop kleur geld oplevert of geld kost. Als iedere knop op je site dezelfde kleur heeft, leert een bezoeker binnen twee schermen dat die kleur betekent: hier kun je klikken. Dat scheelt zoekwerk bij 'offerte aanvragen' of 'bel ons'. Heeft je ene knop groen, de andere oranje en de derde alleen een randje, dan moet de bezoeker elke keer opnieuw uitzoeken waar hij moet zijn.
Gebruik je accentkleur dus niet voor sfeervlakken of koppen, maar reserveer hem voor de actie die je wilt dat iemand onderneemt. Links in lopende tekst mogen dezelfde kleur hebben, met een onderstreping erbij zodat ook iemand die kleuren slecht onderscheidt ziet dat het een link is.
En let op de omgekeerde fout: een knop die precies dezelfde kleur heeft als de achtergrond van dat blok, met alleen een dun lijntje eromheen. Mooi op een ontwerp, slecht in de praktijk.
Contrast is geen detail
De meest voorkomende kleurfout op mkb-websites is te weinig verschil tussen tekst en achtergrond. Lichtgrijze letters op wit lezen prima op een goed scherm in een donkere kamer, en zijn onleesbaar op een telefoon in de zon, wat precies de situatie is waarin veel klanten je site openen.
De richtlijn voor toegankelijkheid (WCAG AA) vraagt om duidelijk verschil in helderheid tussen tekst en achtergrond. Je hoeft daar geen meetinstrument voor te kopen: zet je site op je telefoon, loop naar buiten en lees je eigen tekst. Moet je turen, dan is het contrast te laag.
Tekst over een foto
Witte tekst over een foto is populair en gaat vaak mis, want een foto heeft lichte en donkere plekken. Leg er een donker doorschijnend laagje overheen, of zet de tekst naast de foto in plaats van erop. Dat laatste is bijna altijd de rustigste oplossing.
Wat je verder beter laat
Een paar dingen die zelden goed uitpakken: hele pagina's in een felle kleur, witte tekst op fel geel of fel groen, en kleur als enige manier om iets duidelijk te maken ("de rode velden zijn verplicht"). Zet er een woord of een icoontje bij, dan snapt iedereen het, ook wie kleurenblind is. Ongeveer één op de twaalf mannen ziet rood en groen anders dan jij.
Donkere achtergronden met lichte tekst kunnen prima werken, maar dan voor de hele site of voor duidelijk afgebakende blokken, niet per pagina wisselend. En kijk voor de zekerheid of je kleur in je branche niet iets anders uitstraalt dan je bedoelt: klinisch wit en blauw voelt vertrouwd bij een praktijk, maar koel bij een kapper.
Samengevat
- Eén hoofdkleur uit je logo, een rustige basis en een donkere tekstkleur zijn genoeg.
- Gebruik je accentkleur alleen voor knoppen en links, zodat die herkenbaar blijven.
- Donkere tekst op een lichte achtergrond; test het op je telefoon buiten.
- Leg tekst nooit zomaar over een foto zonder donker laagje.
- Kleur mag nooit de enige drager van informatie zijn.
Bij een website van joepa zijn deze keuzes al gemaakt voordat je site live gaat: één accentkleur, voldoende contrast, en knoppen die er overal hetzelfde uitzien.