# Accentkleur kiezen: de kleur die het werk doet

[Canonical HTML page](https://gradiently.design/nl/guide/accent-color)

Het accent is het kleinste deel van een palet en het deel dat mensen het eerst opvalt. Zo kies je er een die opvalt tegen je basis, zeldzaam genoeg blijft om te werken en je hem in CSS instelt.

## The short version

- Een accentkleur is een contrasterende kleur die in kleine hoeveelheden wordt gebruikt om aandacht te trekken naar het belangrijkste element, zoals een knop, een prijs of een woord in een kop.
- In de 60-30-10-regel is het accent de tien procent, en zijn zeldzaamheid maakt het effectief.
- Een goed accent verschilt op minstens één sterke manier van de basiskleuren: tint, lichtheid of verzadiging.
- Een accent dat voor veel verschillende taken wordt gebruikt, signaleert niets meer, dus geef het één hoofdrol.
- In CSS kleurt de eigenschap accent-color native selectievakjes, keuzerondjes, schuifregelaars en voortgangsbalken.

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](https://gradiently.design/nl/guide/60-30-10-rule) 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.

Een staande post die late opening op vrijdag aankondigt, met een klein label boven de kop

In een post als deze hoort het accent op één plek, zoals het kleine label boven de kop, en nergens anders.

Een staande lijstpost met de titel Three things to bring voor een workshop

Hetzelfde principe in een lijstpost: als het accent verschijnt, markeert het alleen de kop.

## 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. **Contrast in tint** Kies van de andere kant van het [kleurenwiel](https://gradiently.design/nl/guide/color-wheel). Marine- en turkoois-paletten nemen warme accenten als koraal of amber; warme paletten nemen blauw of groen. [Complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors) zijn de klassieke keuze.
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. **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. **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.

- Marinebasis, koraalaccent: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Zandbasis, diepblauw accent: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Boombasis, saffraanaccent: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Lila-grijze basis, rood accent: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Zwarte basis, limoenaccent: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Blushbasis, antracietaccent: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Zes paletten getekend in ongeveer 70, 20 en 10 procent. Elk accent verschilt van zijn basis in tint, lichtheid of beide.

## Waar je het accent wel en niet gebruikt

| Gebruik het voor | Houd het weg van |
| --- | --- |
| De primaire knop of call-to-action | Secundaire knoppen en annuleerknoppen |
| Eén sleutelwoord, prijs of datum | Hele alinea's lopende tekst |
| Actieve statussen: het huidige tabblad, een geselecteerd item | Elk icoon in een werkbalk |
| Kleine merkdetails: een lijn, een stip, een sticker | Grote achtergronden achter lange tekst |
| Accenten in een grafiek: de ene reeks die telt | Alle reeksen van een grafiek tegelijk |

Een accent met één hoofdtaak houdt zijn betekenis. Als het overal op staat, valt niets meer op.

> **Een accent is geen foutkleur** Is je accent rood, bedenk dan hoe het naast foutmeldingen staat. Gebruikers kunnen een rode knop als destructief lezen. Sommige merken met rode accenten gebruiken een ander rood voor fouten, of tonen fouten met een icoon en tekst naast kleur.

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](https://gradiently.design/nl/guide/color-contrast-accessibility): 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](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) heeft de details.

```css
: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 */
}
```

Eén accenttoken voor formulierelementen en de primaire knop, met een diepere tint voor tekstlinks zodat ze op wit het contrast halen.

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](https://gradiently.design/nl/guide/website-color-scheme).

## 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](https://gradiently.design/nl/guide/tech-color-palettes).

## FAQ

### Wat is een accentkleur in design?

Een contrasterende kleur in kleine hoeveelheden om aandacht te trekken naar het belangrijkste element, zoals een knop, een sleutelwoord of een prijs.

### Hoeveel van een ontwerp moet de accentkleur zijn?

Hooguit ongeveer tien procent, volgens de 60-30-10-regel. Veel sterke ontwerpen gebruiken veel minder.

### Hoe kies ik een accentkleur voor mijn palet?

Laat hem duidelijk verschillen van je basiskleuren in tint, lichtheid of verzadiging en test hem op de kleine maat waarop hij echt verschijnt.

### Wat doet accent-color in CSS?

Het stelt de tint in van native selectievakjes, keuzerondjes, schuifregelaars en voortgangsbalken, zodat formulierelementen bij je merk passen zonder eigen opmaak.

### Kan een merk meer dan één accentkleur hebben?

Dat kan, maar elk moet een eigen taak hebben, zoals een voor acties en een voor markeringen. Twee accenten met dezelfde taak heffen elkaar op.