Färger. De influerar hur vi tänker, vilka beslut vi tar och framkallar ofta starka reaktioner, både bra och dåliga. Färger kan vara alldeles… magiska knepiga. De har enorm påverkan på din verksamhet och hur användarna uppfattar dig. Här kommer därför guiden som hjälper dig ta kontroll över färgfloran och ger dig en webbplats som både är användarvänlig och konverterar.
Färgpsykologi – hur vi kopplar färger med känslor
Med så många kulörer och färgkombinationer att välja mellan är det ibland svårt att veta vart ska man börja. För en färg är inte bara, tja… en färg. Många studier har gjorts på hur de flesta av oss kopplar färgerna vi ser med en reaktion eller känsla. Resultaten varierar beroende på vart i världen färgerna används eftersom exempelvis historia och kultur kan skilja oss åt. För dig som inte har någon större koll på just detta får du här en kort introduktion till de primära färgerna och vad vi i västvärlden generellt tenderar att koppla dem till.
Rött
En djärv färg som snabbt fångar vår uppmärksamhet. Färgen associeras med energi, passion, makt och styrka men kan också kopplas till fara, ilska och aggressivitet.
Gult
Associeras ofta med optimism, glädje och energi. Den sägs skärpa våra sinnen och knyts till det kreativa. Den kan också kopplas till fara.
Grönt
En harmonisk färg som symboliserar lugn, säkerhet och naturen vilket i sin tur associeras med hälsa och miljömedvetenhet. Det är en av de färger vi ser bäst och som är skonsam mot till exempel trötta ögon. Färgen kan ibland förknippas med girighet eller något ytligt.
Blått
Associeras med vatten och förmedlar en känsla av lugn och ro. Färgen förknippas med lojalitet, säkerhet, förtroende och intelligens men kan också uppfattas som kylig eller okänslig.
Orange
Fångar vår uppmärksamhet och uppfattas generellt som varm och lekfull. Färgen kan associeras med ”billigt” beroende på sammanhanget och ibland förknippas den med omogenhet.
Rosa
Associeras generellt med att vara positiv, omtänksam, kreativ och lugnande men kan också kopplas till något åt det mer impulsiva och omogna hållet.
Lila
Förknippas med lyx, framgång och kreativitet. Kan associeras med något respektfullt men kan i mörkare toner förmedla ledsamhet och sorg.
Brunt
Associeras med värme, vänlighet, trovärdighet, att vara jordnära och nära naturen. Färgen kan också förmedla en känsla av något smutsigt, osofistikerat eller tungt.
Svart
Förmedlar en känsla av elegant, sofistikerat, exklusivt, lyxigt och minimalistiskt men kan också kan förknippas med ondska, mörker eller rädsla.
Vitt
Förmedlar en känsla av positivitet, renhet, enkelhet och neutralitet men även tomhet och sterilt.
Att tänka på vid val av färger för webben
Oavsett om ni idag har en etablerad grafisk profil, en profil som ska uppdateras eller en helt ny som ska tas fram så är det viktigt att fundera på hur dessa kulörer ska appliceras på er webbplats. Här går vi igenom de kanske mest avgörande delarna om hur färg kan påverka er webbplats, era användares beteende och deras upplevelse.
1. Skapa en tydlig igenkänning till ert varumärke och era produkter
Det absolut viktigaste vid val av färger till er webbplats är att den eller de mest dominanta färgerna kan associeras med ert varumärke och marknadsföring. När man som användare kommer till er webbplats, vare sig det är till startsidan eller en undersida, ska man direkt få en känsla för ert företag. Den känslan ska också vara genomgående i alla era kanaler för att skapa igenkänning.
Du bör alltid sträva efter att få användaren att känna att hen har hamnat rätt, utan att skapa tvivel eller potentiell irritation. Vi kan ta det klassiska exemplet ”Coca-Cola”. Det är svårt att tänka på det namnet utan att den väletablerade röda färgen dyker upp i tankarna samtidigt. Deras primära färg, röd, är en självklarhet på deras webbplatser likväl som alla andra kanaler. Det gör att vi snabbt känner oss hemma när vi hoppar mellan kanalerna.
2. Applicera en färgsättning som harmoniserar och som har en tydlig hierarki
Det är givetvis subjektivt men i regel så brukar man vilja att en webbplats färger ska kunna samspela och harmonisera med varandra. Det är däremot viktigt att det finns en hierarki bland dessa färger och att man följer den som en riktlinje för att få en konsekvent och medveten indelning av färgerna.
Enkelt förklarat kan du dela upp färgerna så här:
- Primärfärg. Kan bestå av en eller flera färger och är mest dominant och förekommande på webbplatsen. Dessa färger skapar en tydlig igenkänning till varumärket och bör därför användas i stor utsträckning återkommande genom webbplatsens alla sidor.
- Accentfärg. Kan bestå av en eller flera färger och används som kompletterande färger på webbplatsen. Dessa kan även skapa igenkänning men bör inte vara lika framträdande som primärfärgen. De bör istället användas som sekundära färgalternativ på ytor för att stötta primärfärgen och skapa dynamik med mera.
Vissa färger harmoniserar bättre än andra och såvida man inte medvetet har tagit ett beslut att göra tvärtom baserat på något kreativt syfte så är det klokt att laborera med de färgval som tas fram eller som redan existerar för att se vad som fungerar ihop och vad som inte gör det. Som kreatör så är man alltid tacksam när man blir tilldelad en grafisk profil som är genomtänkt. Möjligheten att nyttja flera harmoniserade färger i den design som tas fram underlättar vårt arbete och allra oftast leder det till en schysstare webbplats med mer rum för kreativitet.
3. Led användaren dit du vill att de ska gå (CRO)
En webbplats ska ju oftast inte bara se schysst ut. Med största sannolikhet finns det ett djupare syfte med webbplatsen. Kanske säljer du produkter eller tjänster eller arbetar för en hjälporganisation som kämpar för att samla in pengar till bättre behövande. Oavsett anledningen kan färg faktiskt vara avgörande för att få användare att göra det du vill att de ska göra. Vi pratar givetvis om ”CRO” alltså konvertering.
3 a. Att sticka ut från omgivningen
Många av oss har säkert varit ute i naturen och vandrat någon gång. Där harmoniserar färgerna och oftast upplever vi det som vackert. Träden, stenarna, vattnet, växterna… allt smälter in med varandra och man traskar på. Men helt plötsligt kanske vi får syn på ett föremål som är skapat av oss människor, något som sticker ut. Kanske är det en färgstark skylt eller ett hus som träder fram från övriga naturens färgskala. Vi kanske inte tycker att det nödvändigtvis passar in men nog tusan drar den blicken till sig från omgivningen.
Det är denna reaktion man vill återskapa på webbplatsen. Man vill att utseendet på sidorna ska kännas harmoniska och subtila för att sedan låta interaktiva element som till exempelvis knappar, länkar och block få sticka ut från omgivningen och dra ögonen till sig.
3 b. Webbplatsens utseende påverkar
Som kreatör så behöver man väga in webbplatsens helhet när man beslutar sig för färgval men målet är alltid att få konverterande element att sticka ut och ta för sig. Här beskriver vi två vanligt förekommande situationer.
Att använda den primära färgen som CRO/länkfärg
- Det här skulle kunna fungera om designen sparsamt innehåller ett fåtal utstickande färger och den primära färgen inte är för konstant.
Att använda en sekundär primärfärg eller accentfärg som CRO/länkfärg
- Om webbplatsens utseende däremot präglas av den primära färgen så kan det finnas situationer där knappar och länkar inte sticker ut tillräckligt och därför krockar med övriga ytor där färgen förekommer. Ett alternativ är då att använda sig av en ”sekundär” primärfärg eller accentfärg specifikt för konverterande ytor. De används alltså inte till något annat än just konverterande element på webbplatsen.
3 c. Färgen kan påverka resultat
Generellt sett så kan färgvalet påverka resultatet. Som tidigare beskrivet om färgpsykologi och vad färger kan förknippas med kan det ha en avgörande effekt på den konvertering du får.
- Att använda sig av en grön knapp vid köp av en produkt istället för röd kommer att vara mer konverterande eftersom en röd färg ofta signalerar något negativt.
- Att använda sig av en knappfärg vars text är vit istället för svart kan upplevas som mer positivt att klicka på.
Detta är att hårdra det och det är som alltid en avvägning om hur mycket man vill tillåta CRO att styra utseendet på webbplatsen. Om man till exempel inte använder grönt i sin profil så vill man nog antagligen använda sig av en annan profilfärg som sticker ut men som följer varumärket.
- Tips: Ett bra sätt att ta reda på vad användare är mer benägna att klicka på är att genomföra A/B tester. Då mäter du exempelvis hur många som klickar på en blå knapp vs en grön knapp. Detta kan göras både innan och efter lansering av webbplatsen.
Ta hänsyn till personer med nedsatt funktionalitet (WCAG)
Om ni verkligen vill skapa en webbplats som ska vara tillgänglig för alla ska ni sträva efter att åtminstone anpassa de interaktiva ytornas färger så att personer med synnedsättning/förändring ska kunna urskilja dem.
WCAG innefattar många delar av användartillgänglighet och du kan enkelt testa din egen webbplats för att få koll på hur väl den följer riktlinjerna. När vi specifikt pratar färg tänker vi främst på de personer som kan se men inte ser färger på samma sätt som vi andra. När man med ”normal” färgsyn tittar på de färger som finns kan man ofta enkelt särskilja dem åt. Men om man har synfel kan det vara mycket svårare eller rent av omöjligt. Den vanligaste formen av färgblindhet är någon form av röd-grön blindhet. Då har man svårigheter att skilja på färgerna och uppfattar dem ofta som identiska.
Kort om kontrast
Genom att säkerställa att webbplatsens färger har tydliga kontraster mellan varandra kan man underlätta för användare med den här typen av färgblindhet. Även om färgerna kan vara blått och rött kanske kontrasten i sig är i princip densamma när man tar bort färgsticket.
Kontrast på vanlig text och textlänkar
Gällande text är det genomgående viktigt att den färg man har på texten har tillräckligt med svärta i sig i förhållande till bakgrunden som texten ska ligga på. Om man använder sig av en ljus men intensiv blå färg på en text och förlitar sig på att färgen i sig ska få texten att synas så kan detta resultera i att en person med blindhet för blåa färgtoner endast ser texten i svartvitt. Om textens färg har en stark kontrast mot bakgrunden gör det inget men om kontrasten är svag i grunden blir texten svårläst som resultat.
Men kontrast är inte heller allt, vissa färger passar bättre på texter än andra. Färger som exempelvis gult, orange och rosa är svårlästa även för en person utan färgblindhet. Generellt sett så bör text vara i neutral gråskala och för kontrastens skull mer mot svart än vitt.
Så säkerställer ni att färgen fungerar
Det finns flera sätt att se om en färg har tillräckligt med kontrast för att leva upp till WCAG:s krav. Vi rekommenderar att man använder sig av en ”Checker”, där man fyller i hexkoden på färgen och direkt får se om den klarar testet. Contrastchecker fungerar fint för att testa detta: https://contrastchecker.com.
- Tips: Använd aldrig enbart en färg för textlänkar. Alla textlänkar behöver, utöver en färg, någon typ av indikation på att dem är klickbara. Det kan exempelvis vara ett understreck, en ikon framför/bakom eller liknande.
Summering och fördjupning
Hoppas att du fortfarande är med oss! Det finns en hel del att lära sig om färger och det är högst individuellt hur mycket man vill ta hänsyn till när man tar fram en ny webbplats. Färgpsykologin bygger på studier men ska givetvis inte följas ord för ord. Det kan däremot vara något att väga in beroende på vad syftet med webbplatsen är.
Att skapa igenkänning till varumärket och att använda sig av tydliga konverteringselement är däremot något som ni bör ha i åtanke för att skapa en webbplats med bra användarupplevelse och hög konverteringsgrad.
Idag har endast webbplatser för myndigheter, landsting, kommuner och andra aktörer som klassas som offentligrättsliga organ krav på sig att leva upp till WCAGs riktlinjer, men vi tycker att man alltid bör sträva efter att åtminstone leva upp till de riktlinjer som handlar om att skapa texter som är lättlästa och färgkombinationer som är funktionella.
Fördjupa dig gärna i ämnet genom att lägga tre minuter på artikeln Ett snack om WCAG för designers
Behöver du hjälp med ny grafisk profil?
Vi arbetar ständigt med att optimera de webbplatser vi skapar, både för framtiden och för användarnas behov. Vi hjälper dig gärna med allt från att se över din grafiska profil till att skapa en helt ny webbplats som följer WCAG 2.1 nivå AA. Hör bara av dig så berättar vi mer om vad vi kan! Kontakta gärna någon av våra projektledare så berättar de mer.
