Hoe kies je websitekleuren die bij je bedrijf passen?

01 / VAN VRAAG NAAR PRAKTIJK

Kies een palet dat iets voor de bezoeker doet.

Een verzameling mooie kleuren is nog geen websiteontwerp. Je hebt tekst, grote vlakken, links, knoppen en meldingen nodig. Begin met die onderdelen en bepaal waar de huisstijl het meeste karakter mag hebben. Een opvallende introductie kan samengaan met een rustige achtergrond bij een langer artikel.

Gebruik je logo als vertrekpunt. Een lichte logokleur hoeft niet de kleur van kleine tekst te worden. Ze kan ook terugkomen in een achtergrond, een lijn of een illustratie. Zo blijft de website herkenbaar zonder iedere toepassing in dezelfde kleur te dwingen.

Neem een fictieve lokale woonwinkel met een donkere basiskleur, mint en een warm accent. Donker kan voor tekst worden gebruikt, mint voor informatieve vlakken en het warme accent voor een belangrijke contactknop. Dit is een ontwerpvoorbeeld. Het zegt niet dat die combinatie voor iedere winkel de beste keuze is.

Bespreek bij het webdesign ook de fotografie. Een productfoto kan al veel kleur bevatten. Zet je daar meerdere felle vlakken naast, dan kan een aanbieding minder opvallen dan bedoeld. Laat daarom een ontwerp met echte beelden zien, in plaats van alleen lege gekleurde blokken.

Wijs één duidelijke actie aan per onderdeel van de pagina. Als alle knoppen dezelfde nadruk krijgen, moet de bezoeker zelf uitzoeken welke stap belangrijk is. Maak bijvoorbeeld een offerteaanvraag opvallender dan een verwijzing naar achtergrondinformatie. De woorden op de knop moeten ook zonder kleur duidelijk zijn.

02 / VAN VRAAG NAAR PRAKTIJK

Contrast controleer je per combinatie.

Volgens W3C’s uitleg van minimaal tekstcontrast vraagt gewone tekst op niveau AA doorgaans een contrastverhouding van ten minste 4,5:1. Voor grote tekst geldt 3:1. Groot betekent hier minstens 18 punt, of 14 punt bij vetgedrukte tekst; dat is ongeveer 24 en 18,7 CSS-pixels. Er zijn uitzonderingen, waaronder logo’s. Dit zijn eisen aan combinaties, geen beoordeling van een kleur op zichzelf.

In ons eigen palet geeft Slate Ocean (#2F4858) op Cloud Mint (#DDFBEF) ongeveer 8,7:1 contrast. Dat is berekend met de relatieve luminantie van beide kleuren. De illustratie gebruikt die combinatie. Wit op het lichte mint biedt juist weinig verschil. Gebruik die lichte kleur daarom niet automatisch als achtergrond voor witte tekst.

Meet de werkelijke tekstkleur en achtergrond. Transparantie, een verloop of een foto kan de uitkomst veranderen. Op een foto moet de tekst overal waar ze staat leesbaar blijven. Een egaal tekstvlak of een zorgvuldig gekozen overlay kan helpen, maar moet eveneens worden gecontroleerd.

Bekijk ook de verschillende toestanden van een link of knop. Is de tekst leesbaar wanneer de muis erop staat? Is een actieve keuze herkenbaar? Laat foutmeldingen niet alleen met een rode rand zien, maar geef uitleg in woorden. Zo wordt de betekenis niet uitsluitend door kleur overgebracht.

Een goede contrastverhouding bewijst niet dat de volledige website toegankelijk is. Grootte, bediening en inhoud tellen ook mee. Gebruik het artikel over toegankelijker webdesign voor de bredere aanpak. Voor de vorm van de letters kun je daarnaast leesbare websitelettertypes kiezen.

03 / VAN VRAAG NAAR PRAKTIJK

Maak van losse kleuren vaste ontwerpafspraken.

Werk één pagina uit met een introductie, een lang tekstblok, een knop, een formulier en een melding. Zo zie je meteen of het palet genoeg mogelijkheden biedt. Een homepage met alleen grote koppen is geen goede proef voor een uitgebreid kennisbankartikel of een productpagina met veel details.

Geef de kleuren namen op basis van hun functie. Bijvoorbeeld tekst, achtergrond, zachte achtergrond en actie. Noteer de kleurcodes én de toegestane combinaties. Een code voor mint is niet genoeg als iedereen vervolgens zelf kiest welke tekstkleur erop komt te staan.

Leg voor een webshop ook toepassingen voor prijzen, aanbiedingen en voorraad vast. Vermeld een korting of status met tekst, niet alleen met een andere kleur. Denk aan “Tijdelijk niet beschikbaar” bij een product. Bespreek deze onderdelen bij een webshop laten maken, zodat de basis voor productbeheer direct duidelijk is.

Gebruik witruimte als onderdeel van het ontwerp. Een pagina hoeft niet helemaal wit te zijn, maar ook niet volledig met kleurvlakken gevuld. Wissel een rustige leeszone af met een gekleurde uitleg of een beeld. Dat geeft ritme zonder dat elk blok om aandacht vraagt. De hoeveelheid kleur beoordeel je het best over een hele pagina.

Test op verschillende schermen en kijk naar een gewone gebruikssituatie. Een ontwerp dat alleen op een fel beeldscherm is beoordeeld kan anders overkomen op een telefoon. Meten blijft nodig; een visuele indruk vervangt geen contrastcontrole. Vraag ook iemand anders de belangrijkste actie aan te wijzen zonder uitleg.

Wil je een bestaande site opfrissen, laat dan eerst een beperkt paletvoorstel uitwerken met een paar representatieve onderdelen. Bij websiteaanpassingen kunnen kleuren vaak op gedeelde stijlen worden toegepast. Controleer daarna uitzonderingen zoals ingebedde formulieren en externe winkelonderdelen. Die nemen de nieuwe kleuren niet altijd automatisch over.