Logo op kleurverloop: zo houd je het helder

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.

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, zodat niemand improviseert. Is het logo zelf een kleurverloop, lees dan eerst gradient logo’s: een logo met kleurverloop op een achtergrond met kleurverloop werkt zelden.

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. 1

   Plaats het logo globaal

   Zet het waar de lay-out het wil hebben, meestal een hoek of het midden bovenaan.

2. 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. 3

   Test beide tegen de logokleur

   Haal elk paar door een contrastchecker zoals die van WebAIM. Mik op minstens 3:1 tegen de slechtste van de twee, en op meer voor kleine logo’s.

4. 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. 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 legt de verhoudingen uitgebreider uit, en tekst op een kleurverloop 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.

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.

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.

.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;
}