Ett varumärke känns igen på en tiondels sekund – långt innan någon hunnit läsa en logotyp eller ett namn. Det är färgerna och typsnitten som gör jobbet. Ändå väljs de ofta sist, snabbast och med minst eftertanke i hela varumärkesprocessen. Det är synd, för fel val kostar mer än det syns: otydlig kommunikation, sämre tillgänglighet och ett varumärke som är svårt att skilja från konkurrenternas.
Den här artikeln går igenom hur du väljer färger med en tydlig logik, vad kontrast och tillgänglighet (WCAG) faktiskt kräver av dig, varför max två typsnitt räcker långt, och skillnaden mellan webbtypsnitt och tryck – inklusive licensfällorna som är lätta att missa.
Färgpsykologi – användbar, men inte hela sanningen
Färgpsykologi bygger på generella associationer: blått uppfattas ofta som tryggt och professionellt, grönt som naturligt eller hållbart, rött som energiskt eller brådskande, gult som optimistiskt. Det är en bra utgångspunkt för att inte välja en färg som aktivt motarbetar ditt budskap – ett fintech-bolag bör tänka till innan man kör knallgul huvudfärg, av samma anledning som en vårdklinik sällan väljer aggressivt rött.
Men färgpsykologi är kulturellt betingat och mjukare vetenskap än den ofta framställs som. Vitt signalerar renhet i Sverige, men sorg i vissa asiatiska kulturer. Och inom varje bransch finns undantag som fungerar utmärkt – tänk på hur många framgångsrika varumärken som bryter mot "reglerna". Använd färgpsykologi som en riktningsgivare, inte en absolut lag. Det som spelar större roll i praktiken är följande tre saker:
- Konsekvens. Samma färger, om och om igen, tills de kopplas ihop med dig.
- Kontrast mot konkurrenterna. Om alla i din bransch kör blått är det ofta smartare att sticka ut än att smälta in.
- Funktion. Färgen måste fungera i alla sammanhang – app, tryck, skylt, PowerPoint – inte bara se fin ut i en logotyp på vit bakgrund.
En enkel modell för att välja en färgpalett
En fungerande palett behöver sällan mer än detta:
- En primärfärg – bärs av logotyp, knappar, viktiga ytor.
- En eller två sekundärfärger – kompletterar utan att konkurrera.
- Neutrala toner – svart, vitt, gråskalor för text och bakgrunder.
- En accentfärg – används sparsamt, för call-to-action och det som ska sticka ut.
Fler färger än så leder oftast till otydlighet snarare än variation. Ett varumärke som "äger" en färg (tänk Coca-Colas rött eller IKEA:s blå-gula) är starkare än ett som har fem halvbra nyanser ingen minns.
Kontrast och tillgänglighet – inte förhandlingsbart
Här slarvas det ofta mest, och det är dessutom ett område med juridisk relevans: sedan 2019 gäller lagen om tillgänglighet till digital offentlig service för offentlig sektor, och EU:s tillgänglighetsdirektiv (European Accessibility Act) börjar omfatta fler privata aktörer från och med 2025. Men även utan lagkrav är dålig kontrast ett direkt hinder för en del av dina besökare – uppskattningsvis har cirka 8 procent av män och 0,5 procent av kvinnor någon form av färgblindhet.
WCAG (Web Content Accessibility Guidelines) är den internationella standarden för digital tillgänglighet. För text gäller i korthet:
| Nivå | Normal text | Stor text (18pt+/14pt fet) |
|---|---|---|
| WCAG AA (minimikrav) | 4.5:1 | 3:1 |
| WCAG AAA (skärpt nivå) | 7:1 | 4.5:1 |
Kontrastförhållandet mäts mellan textfärg och bakgrundsfärg. Ljusgrå text på vit bakgrund – vanligt i "minimalistisk" design – landar ofta under 3:1 och klarar alltså inte ens AA. Testa alltid dina färgkombinationer i ett kontrastverktyg innan de blir del av grafisk profil eller webbsajt. Det tar två minuter och sparar dig från att behöva göra om senare.
Praktiska tumregler för tillgänglig färganvändning
- Lita aldrig enbart på färg för att förmedla information (t.ex. rött = fel, grönt = rätt) – komplettera med text, ikon eller mönster.
- Testa paletten i en simulator för färgblindhet, inte bara i vanlig visning.
- Se till att din primärfärg fungerar som textfärg mot både vitt och mörkt – annars begränsar du dig själv i framtida material.
Typsnitt: varför två räcker
Ett vanligt nybörjarmisstag är att blanda fyra–fem typsnitt "för variation". Resultatet blir sällan variation – det blir rörigt och oprofessionellt. En stabil regel: max två typsnitt, ett för rubriker och ett för brödtext. Ibland räcker ett enda typsnitt i flera vikter (tunn, normal, fet, kursiv) för att skapa all den hierarki du behöver.
När du väljer typsnitt, tänk på:
- Läsbarhet i liten storlek. Ett snyggt display-typsnitt i en logotyp kan vara helt oläsligt som brödtext på mobil.
- Karaktär vs. neutralitet. Rubriktypsnittet får gärna ha personlighet; brödtexten ska helst vara diskret och lättläst över långa stycken.
- Antal vikter. Se till att typsnittet finns i tillräckligt många varianter (regular, medium, bold) för att bygga hierarki utan att byta typsnitt.
Webbtypsnitt vs. tryck – två olika discipliner
Ett typsnitt som fungerar perfekt i tryck kan bete sig annorlunda på skärm, och tvärtom. Skillnaderna att känna till:
- Format. Webben använder oftast typsnittsformaten WOFF2 (och WOFF som reserv), medan tryck kräver OTF eller TTF i hög upplösning.
- Rendering. Skärmar renderar typsnitt olika beroende på operativsystem och pixel-täthet – ett tunt typsnitt kan se prickigt ut på vissa skärmar.
- Radavstånd och storlek. Text på skärm läses ofta i kortare, snabbare svep. Generösare radavstånd (line-height) och något större textstorlek än i tryck gör stor skillnad för läsbarheten.
- Laddningstid. Varje typsnittsfil som laddas in på en webbsida påverkar sidans prestanda. Färre vikter och format (t.ex. bara de du faktiskt använder) ger snabbare sidor.
Licenser – den vanligaste fällan
Det här missas ofta, och kan bli dyrt att rätta till i efterhand. Typsnittslicenser är inte alltid "köp en gång, använd överallt":
- Skrivbordslicens gäller för program som Photoshop, InDesign och Illustrator – täcker inte automatiskt webben.
- Webblicens krävs separat för att lägga in typsnittet via CSS på en hemsida, och prissätts ofta efter antal sidvisningar per månad.
- App-licens behövs om typsnittet ska bäddas in i en mobilapp.
- Google Fonts och andra öppna typsnittsbibliotek är kostnadsfria att använda kommersiellt (under SIL Open Font License), vilket gör dem till ett tryggt förstahandsval för många mindre företag – kvaliteten och urvalet har dessutom blivit betydligt bättre de senaste åren.
Kontrollera alltid licensvillkoren innan ett typsnitt blir en permanent del av varumärket. Att byta typsnitt efter att grafisk profil, skyltar och trycksaker är klara är betydligt dyrare än att kolla licensen från början.
Så sätter du ihop det i praktiken
En hållbar visuell identitet behöver inte vara komplicerad. Utgångspunkten kan vara:
- 1 primärfärg + 1–2 sekundärfärger + neutrala toner + 1 accentfärg
- 1 rubriktypsnitt + 1 brödtextstypsnitt (eller ett typsnitt i flera vikter)
- Kontrollerade kontrastvärden enligt WCAG AA som lägstanivå
- Tydliga licenser för både webb och tryck, dokumenterade så att ni slipper leta fram dem igen om ett år
Det som gör ett varumärke igenkännbart är sällan kreativiteten i valet – det är disciplinen att hålla fast vid det, sammanhang efter sammanhang.
Vanliga frågor
Hur många färger bör en logotyp ha?
Oftast räcker en till tre färger. Fler färger gör logotypen svårare att återge konsekvent i olika sammanhang – broderi, skyltar, favicon – och riskerar att sudda ut igenkänningen istället för att stärka den.
Måste vi följa WCAG även om vi inte är en myndighet?
Juridiskt är kraven tydligast för offentlig sektor och blir bredare genom EU:s tillgänglighetsdirektiv. Men oavsett lagkrav är god kontrast en förutsättning för att alla besökare – inklusive de med nedsatt syn eller färgblindhet – ska kunna läsa er webbplats och era material. Det är helt enkelt god design, inte bara en juridisk fråga.
Kan vi använda samma typsnitt i logotyp och brödtext?
Ja, om typsnittet finns i tillräckligt många vikter och fungerar både i stor och liten storlek. Många starka varumärken använder ett enda typsnittsfamilj konsekvent genom hela profilen – det förenklar dessutom licenshanteringen.
Vill du ha hjälp att sätta färger och typsnitt som faktiskt håller – i logotyp, grafisk profil och på webben? Boka en kostnadsfri genomgång med ZORC på /boka, så går vi igenom var ni står idag och vad som är rimligt nästa steg.