# Logo op kleurverloop: zo houd je het helder

[Canonical HTML page](https://gradiently.design/nl/guide/logo-on-gradient-background)

Kleurverlopen veranderen van kleur over hun breedte, dus een logo dat aan het ene uiteinde leest, kan aan het andere verdwijnen. Zo kies je de versie, de plek en de kleur waarmee dat nooit gebeurt.

## The short version

- Een logo op een achtergrond met kleurverloop werkt het best als versie in één kleur, wit of donker, en niet als het origineel in full colour.
- Omdat een kleurverloop over zijn oppervlak van helderheid verandert, controleer je het contrast precies op de plek waar het logo staat, niet over de hele achtergrond.
- WCAG zondert logo’s uit van zijn contrastregels, maar het minimum van 3:1 voor betekenisvolle afbeeldingen is een verstandige ondergrens om een logo herkenbaar te houden.
- Zet het logo in het rustigste, gelijkmatigste deel van het kleurverloop, meestal een hoek, en houd er vrije ruimte omheen.
- Elk merk hoort een versie van zijn logo in full colour, in wit en in donker klaar te hebben voordat het op kleurverlopen ontwerpt.

Zet je een **logo op kleurverloop** en wil je niet dat het verdwijnt, gebruik dan een versie van het logo in één kleur, plaats het in het rustigste deel van het kleurverloop waar het contrast het sterkst is, en laat er vrije ruimte omheen. Een logo in full colour deelt meestal tinten met het kleurverloop en lost erin op. Een witte of donkere versie, op de plek waar het kleurverloop het donkerst of het lichtst is, blijft op elk formaat scherp.

De rest van deze gids legt uit waarom logo’s verdwijnen, welke versies je klaarzet, hoe je de juiste plek vindt en hoe je die controleert, met de CSS om het op het web te doen.

## Waarom logo’s verdwijnen op kleurverlopen

Een effen achtergrond heeft één kleur, dus een logo contrasteert ermee of niet. Een kleurverloop heeft er veel. Een wit logo dat volkomen helder is boven het donkere uiteinde van een verloop, kan boven het lichte uiteinde tot niets vervagen, en een gekleurd logo kan zo dicht bij het midden van het kleurverloop liggen dat de randen vervagen.

Middernacht naar violet naar blos: `linear-gradient(90deg, #1b1033 0%, #6d3fc4 50%, #f6d8c8 100%)`

Een wit logo leest helder op het linkerderde, minder goed in het midden en verdwijnt bijna rechts. Een donker logo doet het omgekeerde. Geen van beide werkt overal op dit kleurverloop.

De les: beoordeel een logo nooit tegen het kleurverloop als geheel. Beoordeel het tegen de paar pixels er direct achter.

## Zet de logoversies klaar die je nodig hebt

De meeste problemen met logo’s op kleurverlopen zijn opgelost voordat iemand een ontwerpbestand opent, doordat de juiste versies klaarstaan. Bewaar ze samen in je [merkkit](https://gradiently.design/nl/guide/brand-kit), zodat niemand improviseert. Is het logo zelf een kleurverloop, lees dan eerst [gradient logo’s](https://gradiently.design/nl/guide/gradient-logo): een logo met kleurverloop op een achtergrond met kleurverloop werkt zelden.

| Versie | Gebruik hem op | Opmerkingen |
| --- | --- | --- |
| Full colour | Witte, gebroken witte of heel bleke achtergronden | De basis. Zelden de juiste op een kleurverloop. |
| Eén kleur, wit | Donkere en middendonkere kleurverlopen | De nuttigste versie voor werk met kleurverlopen. |
| Eén kleur, donker | Lichte kleurverlopen en pastels | Gebruik een bijna zwart uit je palet, geen zuiver zwart, als dat hard oogt. |
| Eén merkkleur | Neutrale of heel bleke kleurverlopen | Alleen als de merkkleur contrasteert met elke pixel erachter. |
| Alleen het symbool | Kleine formaten, avatars, hoeken | Houdt zijn vorm waar een woordmerk te klein zou worden om te lezen. |

Vijf versies dekken bijna elk kleurverloop. De witte en de donkere versie in één kleur doen het meeste werk.

## Vind de zone met contrast en controleer hem

WCAG, de standaard voor webtoegankelijkheid, zondert logo’s uit van zijn regels voor tekstcontrast. Die uitzondering gaat over naleving, niet over zichtbaarheid. Het minimum van 3:1 voor betekenisvolle afbeeldingen is een praktische ondergrens: daaronder begint een logo zijn randen te verliezen. Controleer het zo.

1. **Plaats het logo globaal** Zet het waar de lay-out het wil hebben, meestal een hoek of het midden bovenaan.
2. **Neem de kleuren erachter op** Gebruik een pipet op de lichtste en de donkerste pixel direct achter het logo. Op een kleurverloop kunnen die sterk verschillen, zelfs binnen een klein vlak.
3. **Test beide tegen de logokleur** Haal elk paar door een contrastchecker zoals [die van WebAIM](https://webaim.org/resources/contrastchecker/). Mik op minstens 3:1 tegen de slechtste van de twee, en op meer voor kleine logo’s.
4. **Verplaats, plak niet** Haalt het de test niet, verplaats het logo dan naar het donkerdere of lichtere uiteinde van het kleurverloop, of wissel naar de andere versie in één kleur, voordat je naar een vlak of schaduw grijpt.
5. **Bekijk het klein** Verklein het ontwerp tot miniatuurformaat. Wordt het logo een veeg, gebruik daar dan de versie met alleen het symbool.

Onze gids over [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility) legt de verhoudingen uitgebreider uit, en [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) behandelt hetzelfde probleem voor koppen.

## Waar je een logo op een kleurverloop plaatst

Zoek het deel waar het kleurverloop het minst verandert. Een logo dat over een scherpe kleurverschuiving staat, lijkt op twee achtergronden tegelijk te staan. Hoeken zijn vaak rustig, omdat veel kleurverlopen hun grootste overgang in het midden maken. Geef het logo aan elke kant vrije ruimte, minstens de hoogte van een van zijn letters, zodat het kleurverloop het omlijst in plaats van verdringt.

Een vierkant ontwerp met het woordmerk Northlight op een levendig kleurverloop, met textuur die door de letters loopt

Het woordmerk op het drukste deel van de achtergrond: de randen worden zachter waar de kleur verschuift.

Hetzelfde vierkante ontwerp waarbij het kleurverloop achter het woordmerk Northlight rustiger en gelijkmatiger is, zodat de letters scherp lezen

Hetzelfde woordmerk met het rustigste deel erachter geschoven: schone randen, geen vlak.

In Gradiently weet een Mark waar je woorden en logo staan: het rustigste deel met het beste contrast schuift erachter en druk detail komt in de buurt tot rust, dus je hoeft zelden met de hand naar de juiste plek te zoeken. Logo’s uit je merkkit zet je direct in elk ontwerp.

## Knockout, effen of op een plaatje

Er zijn drie manieren om een logo op kleur te zetten, en elk past bij een ander kleurverloop.

### Effen logo in één kleur

- Het logo is één effen kleur, wit of donker
- Werkt op bijna elk kleurverloop als het in de juiste zone staat
- De standaardkeuze voor social posts en banners
- Blijft schoon bij compressie

### Knockout of plaatje

- Knockout: het logo is uitgesneden uit een effen vorm, zodat het kleurverloop door de letters heen te zien is
- Plaatje: het logo staat op een kleine effen vorm, als een badge
- Beide garanderen contrast op heel drukke kleurverlopen
- Beide voegen een vorm toe aan het ontwerp, dus gebruik ze bewust, niet als redmiddel

## Een logo op een CSS-kleurverloop zetten

Teken het logo op het web als inline SVG die `currentColor` gebruikt, zodat één CSS-kleur tussen de witte en de donkere versie wisselt. Zet het daarna in de hoek waar het kleurverloop het donkerst is. Bij een kleurverloop van 135 graden staat de eerste kleur linksboven.

```css
.hero {
  position: relative;
  background: linear-gradient(135deg, #1b1033 0%, #6d3fc4 55%, #f6d8c8 100%);
}

/* The SVG's paths use fill="currentColor" */
.hero .logo {
  position: absolute;
  top: 48px;
  left: 48px; /* the darkest corner of this gradient */
  width: 160px;
  color: #ffffff;
}

/* On a light gradient, switch to the dark version */
.hero.light .logo {
  color: #1b1033;
}
```

Eén SVG, twee versies. De kleur volgt het kleurverloop, niet andersom.

> **Sla de slagschaduw over** Een zachte schaduw achter een logo is het meest gebruikte redmiddel, en zo ziet het er meestal ook uit: een grijze halo op een kleurrijke achtergrond. Verplaats eerst het logo of wissel van versie.

## FAQ

### Welke logokleur werkt het best op een achtergrond met kleurverloop?

Meestal een versie in één kleur: wit op donkere of middendonkere kleurverlopen, en een donker bijna zwart uit je palet op lichte kleurverlopen of pastels. Logo’s in full colour gaan vaak op in het kleurverloop.

### Waar hoort een logo op een kleurverloop te staan?

In het rustigste, gelijkmatigste deel met het sterkste contrast, vaak een hoek, met vrije ruimte eromheen van minstens de hoogte van een van zijn letters.

### Moeten logo’s aan contrasteisen voldoen?

WCAG zondert logo’s uit van zijn regels voor tekstcontrast, maar met het minimum van 3:1 voor betekenisvolle afbeeldingen als ondergrens blijft een logo herkenbaar.

### Moet ik een schaduw of vlak achter mijn logo zetten?

Probeer eerst het logo te verplaatsen of naar de witte of donkere versie te wisselen. Vlakken en schaduwen werken, maar voegen visuele ruis toe. Gebruik een bewust plaatje of een knockout als je er een nodig hebt.

### Wat is een knockout logo?

Een knockout logo is uitgesneden uit een effen vorm, zodat de achtergrond, in dit geval het kleurverloop, door de letters heen te zien is.