Logo på gradientbakgrunn: slik holder du den tydelig

For å sette en logo på gradientbakgrunn uten at den forsvinner, bruker du en ensfarget versjon av logoen, plasserer den i den roligste delen av gradienten der kontrasten er sterkest, og lar det være luft rundt den. En logo i fullfarge deler som regel fargetoner med gradienten og løses opp i den. En hvit eller mørk versjon, plassert der gradienten er mørkest eller lysest, holder seg skarp i alle størrelser.

Resten av denne guiden forklarer hvorfor logoer forsvinner, hvilke versjoner du bør ha klare, hvordan du finner riktig sted og hvordan du sjekker det, med CSS-en for å gjøre det på nettet.

Hvorfor logoer forsvinner på gradienter

En flat bakgrunn har én farge, så en logo har enten kontrast mot den eller ikke. En gradient har mange. En hvit logo som er helt tydelig over den mørke enden av en overgang, kan blekne til ingenting over den lyse enden, og en farget logo kan ligge så nær gradientens midtparti at kantene flyter ut.

Lærdommen: vurder aldri en logo mot gradienten som helhet. Vurder den mot de få pikslene rett bak den.

Gjør klar logoversjonene du trenger

De fleste logoproblemer på gradienter løses før noen åpner en designfil, ved at de riktige versjonene ligger klare. Hold dem samlet i merkevaresettet, så ingen improviserer. Er logoen selv en gradient, leser du gradientlogoer først: et gradientmerke på en gradientbakgrunn fungerer sjelden.

Finn kontrastsonen og sjekk den

WCAG, standarden for tilgjengelighet på nettet, unntar logoer fra reglene for tekstkontrast. Unntaket handler om etterlevelse, ikke synlighet. Minstekravet på 3:1 for meningsbærende grafikk er et praktisk gulv: under det begynner en logo å miste kantene. Sjekk det slik.

1. 1

   Plasser logoen omtrentlig

   Legg den der oppsettet vil ha den, vanligvis i et hjørne eller øverst i midten.

2. 2

   Hent fargene bak den

   Bruk en pipette på den lyseste og den mørkeste pikselen rett bak logoen. På en gradient kan de være svært ulike, selv over et lite område.

3. 3

   Test begge mot logofargen

   Kjør hvert par gjennom en kontrastsjekker som WebAIMs. Sikt mot minst 3:1 mot den dårligste av de to, og mer for små logoer.

4. 4

   Flytt, ikke lapp

   Består den ikke, flytter du logoen mot den mørkere eller lysere enden av gradienten, eller bytter til den andre ensfargede versjonen, før du tyr til en boks eller skygge.

5. 5

   Sjekk den i liten størrelse

   Krymp designet til miniatyrstørrelse. Blir logoen en flekk, bruker du versjonen med bare symbolet der.

Guiden vår til fargekontrast forklarer forholdstallene grundigere, og tekst på gradient tar for seg det samme problemet for overskrifter.

Hvor du plasserer en logo på en gradient

Se etter området der gradienten endrer seg minst. En logo som ligger over et brått fargeskifte, ser ut som om den står med ett bein på hver bakgrunn. Hjørner er ofte rolige, fordi mange gradienter gjør den mest dramatiske overgangen i midten. Gi logoen luft på alle sider, minst høyden av én av bokstavene, så gradienten rammer den inn i stedet for å trenge seg på.

I Gradiently vet en Mark hvor ordene og logoen din står: det roligste området med best kontrast flytter seg bak dem, og urolige detaljer demper seg i nærheten, så du sjelden trenger å lete etter riktig sted for hånd. Logoer fra merkevaresettet ditt legges rett inn i ethvert design.

Negativ, hel eller på en plate

Det finnes tre måter å sette en logo på farge, og hver passer til en ulik gradient.

Sett en logo på en CSS-gradient

På nettet tegner du logoen som en innebygd SVG som bruker currentColor, så én CSS-farge bytter mellom den hvite og den mørke versjonen. Plasser den så i hjørnet der gradienten er mørkest. Med en gradient på 135 grader ligger den første fargen øverst til venstre.

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