# Kleurenschema voor een website: kleuren kiezen voor je site

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

Een site heeft minder kleuren nodig dan je denkt en elke kleur heeft een taak nodig. Geef ze rollen, toets ze aan elkaar en de hele site blijft consistent terwijl hij groeit.

## The short version

- Een kleurenschema voor een website werkt het best als een korte lijst rollen: paginaondergrond, vlak, tekst, gedempte tekst, rand, accent en statuskleuren.
- De meeste sites hebben één merkaccent nodig, vooral voor knoppen en links, terwijl neutrale kleuren de rest van het werk doen.
- WCAG vraagt om een contrastverhouding van minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst en interface-onderdelen zoals randen van invoervelden.
- Als je kleuren opslaat als CSS-variabelen, ofwel designtokens, wisselt een hele site van thema door één set waarden te vervangen.
- Een donker thema is een aparte set waarden voor dezelfde rollen, geen omkering van het lichte thema.

Een goed **kleurenschema voor een website** is geen moodboard van vijf lievelingskleuren. Het is een korte lijst rollen, elk ingevuld met één kleur: de paginaondergrond, verhoogde vlakken, lopende tekst, rustigere tekst, randen, één accent voor acties en rood, oranje en groen voor status. Kies eerst je merkaccent, bouw er rustige neutrale kleuren omheen, controleer elke tekstcombinatie op contrast en sla het resultaat dan op als CSS-variabelen, zodat de hele site dezelfde waarden gebruikt.

## De rollen die elke site nodig heeft

| Rol | Gebruikt voor | Vuistregel |
| --- | --- | --- |
| Ondergrond | De paginaachtergrond | Licht getint voelt zachter dan zuiver wit of zwart |
| Vlak | Kaarten, panelen, menu’s | Een stap lichter (licht thema) of nog lichter (donker thema) dan de ondergrond |
| Tekst | Koppen en lopende tekst | Heel sterk contrast met ondergrond en vlak |
| Gedempte tekst | Bijschriften, labels, metadata | Nog altijd minstens 4,5:1 tegen de ondergrond |
| Rand | Scheidingslijnen en omlijning van invoervelden | Decoratieve lijnen mogen vaag zijn; randen van invoervelden hebben 3:1 nodig |
| Accent | Knoppen, links, geselecteerde staten | Je merkkleur, spaarzaam gebruikt zodat hij betekent “hier klikken” |
| Status | Fouten, waarschuwingen, succes | Rood, oranje, groen, afgestemd op je accent |

Zeven rollen dekken de meeste sites. Noem kleuren naar rol, niet naar tint, zodat de merkkleur later aanpassen één wijziging is.

## Zo kies je kleuren voor een website

1. **Begin met één accent** Je merkkleur, of de kleur waarmee mensen je moeten associëren. Heb je er geen, dan helpt [merkkleuren kiezen](https://gradiently.design/nl/guide/how-to-choose-brand-colors).
2. **Tint de neutrale kleuren naar het accent** Grijzen met een vleugje van de tint van het accent voelen er verwant aan. Een merk in petrol krijgt koele, licht blauwe grijzen; een merk in terracotta warme, roomkleurige.
3. **Kies licht, donker of beide** Kies het thema dat de meeste bezoekers het eerst zien en werk dat volledig uit voordat je aan het andere begint.
4. **Controleer elke tekstcombinatie** Tekst op ondergrond, tekst op vlak, gedempte tekst op beide, wit op de accentknop. Los alles onder 4,5:1 op.
5. **Pas 60, 30, 10 toe** Grofweg 60% ondergrond, 30% vlakken en tekst, 10% accent. De [60-30-10-regel](https://gradiently.design/nl/guide/60-30-10-rule) legt de balans uit.

## Drie kleurenpaletten voor een website om mee te beginnen

- Ondergrond: #f7f9fb
- Vlak: #ffffff
- Tekst: #14202b
- Gedempte tekst: #52606d
- Rand invoerveld: #8a96a3
- Petrol accent: #0f766e

Rustige praktijk, licht. Tekst op ondergrond haalt ongeveer 15,7:1, gedempte tekst 6,1:1, wit op de petrolknop 5,5:1 en de rand van het invoerveld haalt op wit net 3:1.

- Roomwitte ondergrond: #fbf6ef
- Haver vlak: #efe4d6
- Espressotekst: #2a1f17
- Gedempte tekst: #635e68
- Terracotta accent: #b4441c

Warm café, licht. Espresso op room haalt ongeveer 15:1; wit op terracotta ongeveer 5,5:1, dus knoplabels blijven leesbaar.

- Nachtondergrond: #0f0e17
- Verhoogd vlak: #1a1926
- Tekst: #ecebf3
- Gedempte tekst: #a5a3b8
- Lila accent: #a78bfa

Nachtstudio, donker. Gebroken wit in plaats van zuiver wit vermindert verblinding; het lila accent haalt ongeveer 7:1 op de ondergrond, dus gebruik donkere tekst op lila knoppen.

## Contrastregels die een site leesbaar houden

De [WCAG-richtlijnen voor contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) leggen de ondergrens: 4,5:1 voor gewone tekst, 3:1 voor grote tekst (ongeveer 24 px, of 19 px vet) en 3:1 voor interface-onderdelen zoals randen van invoervelden en iconen die betekenis dragen. [De contrastchecker van WebAIM](https://webaim.org/resources/contrastchecker/) test elk paar. Onze [gids over kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility) behandelt de redenen en de randgevallen.

### Veelgemaakte fouten

- Lichtgrijze placeholdertekst als enig label
- Witte tekst op een lichte merkkleur zoals geel of hemelblauw
- Links die alleen door kleur van de lopende tekst verschillen
- Een lichte rand als enige omlijning van een formulierveld
- Foutmeldingen die alleen in rood worden getoond

### Oplossingen

- Echte labels boven velden, gedempte tekst op 4,5:1
- Donkere tekst op lichte accenten, of een diepere tint van het accent
- Onderstreep links in lopende tekst, of maak ze vet
- Randen van invoervelden op 3:1 tegen hun achtergrond
- Een icoon of woorden naast de kleur

## Je kleurenschema coderen als tokens

Sla elke rol één keer op als CSS-variabele en gebruik in je stijlen alleen die variabelen. Dan is een donker thema, een seizoenscampagne of een rebranding een wijziging in één blok waarden, geen zoektocht door elk bestand. Dit is het kernidee van [designtokens](https://gradiently.design/nl/guide/design-tokens).

```css
:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }
```

Rollen, geen tinten. Let op dat `--on-accent` van wit naar bijna zwart omklapt, omdat een lichtlila knop donkere tekst nodig heeft.

## Dark mode is een eigen schema

Een licht palet omkeren werkt zelden. Verzadigde accenten gloeien te fel op zwart, schaduwen verdwijnen en zuiver witte tekst geeft verblinding. Bouw dark mode als tweede set waarden: een bijna zwarte ondergrond met een vleugje tint, vlakken die lichter worden naarmate ze hoger liggen, zachtere tekst en een accent dat is opgelicht tot het contrast haalt. [Ontwerpen voor dark mode](https://gradiently.design/nl/guide/dark-mode-design) gaat dieper in op dit onderwerp.

## Waar merkkleur verder gaat dan knoppen

Als het accent alleen op knoppen wordt gebruikt, kan de site generiek aanvoelen. Het antwoord is niet overal meer accent, maar één plek waar het merk expressief mag zijn: de hero, een kenmerkenband of de footer. Een rijk kleurverloop uit de familie van het merk werkt daar goed, terwijl de rest van de pagina rustig en leesbaar blijft.

Een brede websitehero voor een fysiotherapiepraktijk met een korte kop op een rijk kleurverloop

Eén expressieve band van 1920×1080 draagt het merk; de rest van de site gebruikt de rustige rollen hierboven.

Een Gradiently Mark kan die expressieve laag zijn: een achtergrond die niemand anders heeft en die per regel een letterkleur uit zijn eigen palet kiest, zodat koppen leesbaar blijven. Meer over combinaties vind je bij [kleurharmonie](https://gradiently.design/nl/guide/color-harmony) en [hero-sectie ontwerpen](https://gradiently.design/nl/guide/hero-section-design).

## FAQ

### Hoeveel kleuren moet een website hebben?

Meestal één merkaccent, drie tot vijf neutrale kleuren voor ondergrond, vlakken, tekst en randen en drie statuskleuren. Meer dan één accent maakt het lastiger te zien wat klikbaar is.

### Hoe kies ik een kleurenschema voor mijn website?

Begin met je merkaccent, tint neutrale grijzen naar zijn tint, kies een licht of donker thema en controleer elke tekstcombinatie op een contrast van minstens 4,5:1.

### Welke contrastverhouding heeft websitetekst nodig?

WCAG vraagt minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst en interface-onderdelen zoals randen van invoervelden.

### Moet een websiteachtergrond zuiver wit zijn?

Dat hoeft niet. Een heel licht getint gebroken wit voelt vaak rustiger en laat witte kaarten opvallen als vlakken.

### Hoe voeg ik dark mode toe aan mijn kleurenschema?

Definieer elke kleurrol als CSS-variabele en geef een tweede set waarden binnen een mediaquery `prefers-color-scheme: dark`.