# Logotyp på gradientbakgrund: så håller du den tydlig

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

Gradienter byter färg över sin bredd, så en logotyp som syns i ena änden kan försvinna i den andra. Så väljer du version, plats och färg så att det aldrig händer.

## The short version

- En logotyp på en gradientbakgrund fungerar bäst som en enfärgad version, vit eller mörk, i stället för fullfärgsoriginalet.
- Eftersom en gradient ändrar ljushet över sin yta ska du kontrollera kontrasten på exakt det ställe där logotypen sitter, inte över hela bakgrunden.
- WCAG undantar logotyper från sina kontrastregler, men minimikravet 3:1 för meningsbärande grafik är en rimlig golvnivå för att en logotyp ska förbli igenkännbar.
- Placera logotypen i den lugnaste, jämnaste delen av gradienten, oftast ett hörn, och håll fritt utrymme runt den.
- Varje varumärke bör ha versioner av sin logotyp i fullfärg, vitt och mörkt redo innan man designar på gradienter.

För att lägga en **logotyp på gradientbakgrund** utan att den försvinner använder du en enfärgad version av logotypen, placerar den i den lugnaste delen av gradienten där kontrasten är starkast och lämnar fritt utrymme runt den. En fullfärgslogotyp delar oftast nyanser med gradienten och löses upp i den. En vit eller mörk version, placerad där gradienten är mörkast eller ljusast, förblir skarp i alla storlekar.

Resten av guiden förklarar varför logotyper försvinner, vilka versioner du ska ha redo, hur du hittar rätt plats och kontrollerar den, med CSS för att göra det på webben.

## Därför försvinner logotyper på gradienter

En platt bakgrund har en färg, så en logotyp har antingen kontrast mot den eller inte. En gradient har många. En vit logotyp som syns perfekt över den mörka änden av en blandning kan blekna bort över den ljusa änden, och en färgad logotyp kan matcha gradientens mitt så nära att kanterna flyter ut.

Midnatt till violett till rodnad: `linear-gradient(90deg, #1b1033 0%, #6d3fc4 50%, #f6d8c8 100%)`

En vit logotyp syns tydligt över vänstra tredjedelen, sämre i mitten och försvinner nästan till höger. En mörk logotyp gör tvärtom. Ingen av dem fungerar överallt på den här gradienten.

Lärdomen: bedöm aldrig en logotyp mot gradienten som helhet. Bedöm den mot de få pixlarna direkt bakom den.

## Förbered de logotypversioner du behöver

De flesta logotypproblem på gradienter löses innan någon öppnar en designfil, genom att ha rätt versioner redo. Förvara dem tillsammans i ditt [varumärkeskit](https://gradiently.design/sv/guide/brand-kit) så att ingen improviserar. Om logotypen själv är en gradient, läs [gradientlogotyper](https://gradiently.design/sv/guide/gradient-logo) först: en gradientsymbol på en gradientbakgrund fungerar sällan.

| Version | Använd på | Anmärkningar |
| --- | --- | --- |
| Fullfärg | Vita, benvita eller mycket bleka bakgrunder | Originalet. Sällan rätt på en gradient. |
| Enfärgad vit | Mörka och halvmörka gradienter | Den mest användbara versionen för arbete med gradienter. |
| Enfärgad mörk | Ljusa och pastellgradienter | Använd en nästan svart ton från din palett, inte rent svart, om det ser hårt ut. |
| En varumärkesfärg | Neutrala eller mycket bleka gradienter | Bara när varumärkesfärgen har kontrast mot varje pixel bakom. |
| Enbart symbol | Små storlekar, avatarer, hörn | Behåller sin form där en ordlogotyp skulle bli för liten för att läsas. |

Fem versioner täcker nästan varje gradient. Enfärgad vit och enfärgad mörk gör det mesta av jobbet.

## Hitta kontrastzonen och kontrollera den

WCAG, standarden för tillgänglighet på webben, undantar logotyper från sina kontrastregler för text. Undantaget handlar om regelefterlevnad, inte synlighet. Minimikravet 3:1 för meningsbärande grafik är en praktisk golvnivå: under den börjar en logotyp tappa sina kanter. Kontrollera det så här.

1. **Placera logotypen ungefärligt** Lägg den där layouten vill ha den, oftast i ett hörn eller högst upp i mitten.
2. **Sampla färgerna bakom den** Använd en pipett på den ljusaste och den mörkaste pixeln direkt bakom logotypen. På en gradient kan de skilja sig mycket, även över en liten yta.
3. **Testa båda mot logotypens färg** Kör varje par genom en kontrastkontroll som [WebAIM:s](https://webaim.org/resources/contrastchecker/). Sikta på minst 3:1 mot den sämsta av de två, och mer för små logotyper.
4. **Flytta, lappa inte** Om den faller igenom, flytta logotypen mot den mörkare eller ljusare änden av gradienten, eller byt till den andra enfärgade versionen, innan du tar till en ruta eller skugga.
5. **Kontrollera den i liten storlek** Förminska designen till miniatyrstorlek. Om logotypen blir en fläck, använd versionen med enbart symbol där.

Vår guide till [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar förhållandena mer ingående, och [text på gradient](https://gradiently.design/sv/guide/text-on-gradient) tar upp samma problem för rubriker.

## Var du ska placera en logotyp på en gradient

Leta efter det område där gradienten ändras minst. En logotyp som ligger tvärs över ett skarpt färgskifte ser ut att sitta grensle över två bakgrunder. Hörn är ofta lugna, eftersom många gradienter gör sin mest dramatiska blandning i mitten. Ge logotypen fritt utrymme på alla sidor, minst höjden på en av dess bokstäver, så att gradienten ramar in den i stället för att trängas.

En kvadratisk design med ordlogotypen Northlight satt över en livlig gradient, med struktur som löper genom bokstäverna

Ordlogotypen över den livligaste delen av bakgrunden: dess kanter mjuknar där färgen skiftar.

Samma kvadratiska design där gradienten bakom ordlogotypen Northlight är lugnare och jämnare, så att bokstäverna syns skarpt

Samma ordlogotyp med den lugnaste delen flyttad bakom den: rena kanter, ingen ruta.

I Gradiently vet ett Mark var dina ord och din logotyp finns: dess lugnaste, mest kontrastrika del flyttar sig bakom dem och livliga detaljer mjuknar i närheten, så du behöver sällan leta efter rätt plats för hand. Logotyper från ditt varumärkeskit läggs rakt in i vilken design som helst.

## Knockout, solid eller på platta

Det finns tre sätt att sätta en logotyp på färg, och vart och ett passar olika gradienter.

### Solid enfärgad logotyp

- Logotypen är en enda platt färg, vit eller mörk
- Fungerar på nästan varje gradient om den placeras i rätt zon
- Standardvalet för inlägg och bannrar i sociala medier
- Håller sig ren när den komprimeras

### Knockout eller platta

- Knockout: logotypen är utskuren ur en solid form så att gradienten syns genom bokstäverna
- Platta: logotypen sitter på en liten solid form, som en bricka
- Båda garanterar kontrast på mycket livliga gradienter
- Båda lägger till en form i designen, så använd dem med avsikt, inte som räddning

## Lägga en logotyp på en CSS-gradient

På webben ritar du logotypen som en inbäddad SVG som använder `currentColor`, så att en enda CSS-färg växlar mellan den vita och den mörka versionen. Placera den sedan i hörnet där gradienten är mörkast. Med en gradient på 135 grader är det uppe till vänster som den första färgen ligger.

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

En SVG, två versioner. Färgen följer gradienten, inte tvärtom.

> **Hoppa över skuggan** En mjuk skugga bakom en logotyp är den vanligaste räddningen, och den ser oftast ut som en: en grå gloria på en färgstark bakgrund. Flytta logotypen eller byt version först.

## FAQ

### Vilken färg på logotypen fungerar bäst på en gradientbakgrund?

Oftast en enfärgad version: vit på mörka eller halvmörka gradienter och en mörk, nästan svart ton från din palett på ljusa eller pastellfärgade. Fullfärgslogotyper tenderar att flyta ihop med gradienten.

### Var ska en logotyp placeras på en gradient?

I den lugnaste, jämnaste delen med starkast kontrast, ofta ett hörn, med fritt utrymme runt den på minst höjden av en av dess bokstäver.

### Måste logotyper uppfylla kontrastkrav?

WCAG undantar logotyper från sina kontrastregler för text, men om du använder minimikravet 3:1 för meningsbärande grafik som golv förblir en logotyp igenkännbar.

### Ska jag lägga en skugga eller en ruta bakom min logotyp?

Försök flytta logotypen eller byta till den vita eller mörka versionen först. Rutor och skuggor fungerar men lägger till visuellt brus; använd en medveten platta eller knockout om du behöver en.

### Vad är en knockout-logotyp?

En knockout-logotyp är utskuren ur en solid form, så att bakgrunden, här gradienten, syns genom bokstäverna.