Accentkleur kiezen: de kleur die het werk doet

Een accentkleur is de kleine, contrasterende kleur in een palet die wijst naar wat ertoe doet: de knop om op te drukken, de prijs, het ene woord in een kop. Om er een te kiezen die het werk doet, begin je bij je basiskleuren en kies je iets dat er duidelijk van verschilt in tint, lichtheid of verzadiging, en gebruik je het spaarzaam. In de bekende 60-30-10-verdeling is het de tien procent. Hoe minder vaak het voorkomt, hoe meer elke verschijning betekent.

Waar een accentkleur voor dient

Het grootste deel van een ontwerp is basis- en ondersteunende kleur: achtergronden, vlakken, tekst. Het accent is de uitzondering die het oog vertelt waar het heen moet. Dat maakt het de meest functionele kleur die je hebt. Op een website markeert het de hoofdactie; op een poster landt het op de datum; in een merk wordt het het detail dat mensen onthouden, een gekleurde punt of één felle streep.

De 60-30-10-regel geeft de verhoudingen: ongeveer zestig procent dominante kleur, dertig procent secundair, tien procent accent. Zie de tien als plafond, niet als doel. Veel van de beste lay-outs gebruiken veel minder.

Hoe je een accentkleur kiest

Contrast is de hele opdracht. Kijk naar je basis- en secundaire kleuren, vraag je af waarin ze op elkaar lijken, en maak het accent er op minstens één sterke manier anders aan.

1. 1

   Contrast in tint

   Kies van de andere kant van het kleurenwiel. Marine- en turkoois-paletten nemen warme accenten als koraal of amber; warme paletten nemen blauw of groen. Complementaire kleuren zijn de klassieke keuze.

2. 2

   Contrast in lichtheid

   Op een donkere basis een licht accent; op een lichte basis een diep accent. Een gedempt palet van grijzen kan net zo goed een zwart accent dragen als een fel.

3. 3

   Contrast in verzadiging

   Tussen zachte, stoffige kleuren leest één verzadigde kleur als het accent, ook als hij dezelfde tint heeft. Een kleipalet met een zuiver vermiljoenen accent is een goed voorbeeld.

4. 4

   Test het op zijn echte grootte

   Een accent is meestal klein. Controleer het als knoplabel of dunne streep, niet als groot staal, want kleine kleurvlakken zien er donkerder en doffer uit.

Waar je het accent wel en niet gebruikt

Felle accenten zoals limoen, geel en munt falen vaak als tekst op wit. Gebruik ze als vulling met donkere tekst erop, en controleer elke combinatie aan de hand van de richtlijnen voor kleurcontrast: minstens 4,5:1 voor lopende tekst en 3:1 voor grote tekst en onderdelen van de interface.

Een snelle controle helpt als het accent overal is binnengeslopen. Maak een screenshot van je homepage of een week aan posts, vervaag die licht en kijk waar het accent verschijnt. Landt je blik op drie of vier plekken tegelijk, degradeer dan alles behalve het belangrijkste tot een secundaire kleur. Landt hij nergens, dan zit het accent waarschijnlijk te dicht bij de basis en heeft het meer contrast in tint of lichtheid nodig.

De CSS-eigenschap accent-color

Op het web kleurt accent-color native formulierelementen in één regel: selectievakjes, keuzerondjes, schuifregelaars en voortgangsbalken. Het wordt ondersteund in de huidige versies van de grote browsers; de referentie van MDN heeft de details.

:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}

Browsers kunnen het vinkje of de knop in een element bijstellen om leesbaar te blijven tegen je accent, dus test zowel lichte als donkere accenten. Voor de rest van de kleuren van een site zie kleurenschema voor websites.

Accenten op kleurverlopen en foto's

Op een rijke achtergrond heeft een accent meer om mee te concurreren. Haal het van buiten de kleurfamilie van de achtergrond: een warm accent op een koel kleurverloop, of bijna wit op een kleurrijk exemplaar. In Gradiently kiest auto-inkt voor elke regel lichte of donkere letters uit het eigen palet van de Mark, zodat de woorden leesbaar blijven terwijl de achtergrond beweegt, en je accent maar één taak hoeft te doen. Voor meer over paletten rond één sterke kleur zie techkleurpaletten.