De meeste huisstijlen bevatten genoeg kleur. Wat ontbreekt is de rangorde: welke kleur mag hoeveel van de pagina bezitten. Zonder die afspraak wordt elke sectie een onderhandeling en gaat de site er na een half jaar uitzien als een kleurenwaaier.
Een kleurhiërarchie lost dat op met drie rollen: een leidende kleur, een of twee ondersteunende kleuren en een accent dat u schaars houdt.
De drie rollen
De leider
De kleur die u het vaakst gebruikt: links, iconen, labels, de eerste kaart in een rij. Kies hier de kleur met het beste contrast op uw achtergrond, want dit is de kleur die ook tekst moet kunnen dragen.
De ondersteuning
Eén of twee kleuren tussen de leider en het accent in. Ze hebben geen eigen betekenis; ze zorgen ervoor dat een rij van vier kaarten een logische reis maakt in plaats van vier keer hetzelfde te zijn.
Het accent
De kleur die het hardst schreeuwt, bewaard voor het eindpunt: de laatste stap, de belangrijkste knop, de afsluitende oproep. Werkt alleen zolang hij zeldzaam blijft — twee accenten in beeld is geen accent meer.
Zo ziet dat er bij ons uit
Onze eigen huisstijl loopt van blauw via indigo en paars naar magenta. Blauw leidt: het is de enige merkkleur die op onze donkere achtergrond genoeg contrast heeft voor gewone tekst. Magenta sluit af — de laatste kaart in een rij, de laatste processtap, de gloed achter de slot-oproep.
Daardoor vertelt de kleur zelf waar u bent: staat er magenta, dan bent u aan het einde van iets. Dat is geen decoratie, dat is navigatie.
Een kleur zonder rol wordt vroeg of laat willekeurig gebruikt. Leg per kleur vast waar hij mag staan, niet alleen welke hexcode het is.
Contrast is geen bijzaak
Voordat u een kleur tot leider benoemt: reken het contrast met uw achtergrond uit. Voor gewone tekst is 4,5:1 het minimum, voor grote koppen 3:1. Veel merkkleuren halen dat niet, en dat is geen ramp — het betekent alleen dat die kleur een vlak mag zijn met witte tekst erop, in plaats van tekst op een donkere achtergrond.
- Bepaal per kleur of hij tekst mag dragen of alleen vlak mag zijn
- Leg naast de hexcode ook de rol vast in uw huisstijldocument
- Test de kleuren op de achtergrond waarop ze echt komen te staan
- Houd één kleur buiten de hiërarchie voor statusmeldingen
Houd merkkleur en statuskleur uit elkaar
Rood voor een fout, groen voor gelukt: dat zijn functionele kleuren, geen merkkleuren. Gebruikt u uw accent voor foutmeldingen, dan leert de bezoeker dat uw merkkleur ‘er is iets mis’ betekent. Reserveer daar een aparte set voor, ook als die niet in uw huisstijldocument staat.
