Hur du väljer "rätt" färger i ditt Sitevisiontema

Redaktörstips

Vilket är det kraftfullaste verktyget i den verktygslåda vi kallar Sitevision Tema om inte just möjligheten att sätta färg? I den här artikeln, del två av tre på Tema: Tema, nördar vi ner oss i just begreppet färg och kommer med konkreta tips inför din färgsättning.

Ett tema i Sitevision är mer än bara ett färgtema — det är också till exempel teckensnitt, kantlinjens form och storlek samt runding på hörn. Tillsammans skapar dessa delar ett uttyck och en känsla för hela din webbplats. I den här artikeln skalar vi dock bort all form, och fokuserar istället bara på färg.

Bråttom?

Är du bara ute efter de konkreta tipsen utan back-story så hittar du dem nederst i denna artikel.

3 konkreta tips: Färgvärden i ditt tema

Hur tillämpas färger från temat

Vi börjar med en djupdykning i hur färgerna som du anger i temat faktiskt landar i Sitevisions system och hur de sedan dyker upp på olika ställen i dina moduler. För det som händer rent krasst när du skapar ett tema är att du bestämmer vilka färgvärden som ska användas för olika variabler. Och vad betyder det då? Vi tar ett exempel:

I temapanelen under generella inställningar finner du en inställning för färg på kantlinjen. Denna färg blir en egenskap, en variabel, som en Sitevision-utvecklare i andra ändan kan ta fasta på. Här på Limepark har vi till exempel utvecklaren Amanda som är ansvarig utvecklare för modulen Kollagemeny. Om kollagemenyn skulle ha en kantlinje så skulle Amanda kunna bestämma att det är just den färgen — den variabeln — som ska användas. Så när du byter färg i temat så byter kollagemenyn färg på linjen.

I exemplet ovan används den generella kantlinjefärgen men det finns också andra variabler, över hundra faktiskt, som genereras av Sitevisions tema. Vissa av dessa hanterar också färger för kantlinjer. Då blir det upp till Amanda, eller andra utvecklare, att bestämma vilken variabel som är rimligast att använda. Det gör det därför omöjligt att redogöra för exakt hur de olika färgerna används i olika moduler då valet alltid är en tolkningsfråga. Både av oss underleverantörer och av Sitevision själva.

På sidan Colors ⦁ Envision by Sitevision Länk till annan webbplats. visar Sitevision några exempel på hur de använder färger i sina formulärmoduler. Vi på Limepark eftersträvar att dokumentera alla de variabler vi använder i modulen på respektive moduls hjälpsida. Detta gör vi för att du ska kunna veta exakt vilka delar du kan påverka via temat. Vi är i uppstartsfas med detta arbete men du kan redan nu se exempel på temainställningar för Introduktionsguiden och temainställningar för Filtrerbar listning.

Vad händer om jag inte sätter färger?

Modulerna i Sitevision använder egentligen tema oavsett om du vill eller inte. I Sitevision följer temat Envision Länk till annan webbplats. med — fast det gör det i kulisserna. När du sedan skapar ett eget tema eller redigerar standardtemat så byts standardvärdena ut mot de färger du ställer in. Om du inte ställer in en viss färg kommer därför Sitevisions standard för Envision att träda fram.

Lurigt? Okej, vi tar följande exempel: Du lägger in en knapp från knappmodulen och väljer att den ska ha färgen "Primary". Du har inte jobbat med tema för webbplatsen. Då kommer din knapp vara blå. Så fort du skapar ett nytt tema eller ändrar värde i standardtemar och sätter ett färgvärde för Element > Primary > Bakgrundsfärg så kommer din knapp att ändra färg.

Tema med tillgänglighet

I dagsläget finns ingen inbyggd kontroll i temapanelen för att se om texter och bakgrundet har tillräcklig kontrast, men jag har hört att det ska komma framöver. Till dess får vi nöja oss med att manuellt säkerställa att det är tillräcklig konstrast mellan textfärg och bakgrundsfärg. Kolla gärna vår artikel 3 gratis verktyg för att mäta kontrastvärden för att se hur du kan gå tillväga.

Vilka värden ska jag kontrastchecka?

Förmodligen är du vid det här laget medveten om vikten av att det är tillräcklig kontrast mellan text och bakgrundsfärger för att texten ska gå att läsa på ett tillgängligt sätt. I och med tema så får vi lite fler möjligheter att ställa in just text- och bakgrundsfärger och då gäller det att se till att våra inställningar håller för tillgänglighetskraven.

I temapanelen kan du ofta se egenskaperna textfärg och bakgrundsfärg som i par. I exemplet vi använde tidigare hade vi modulen Knapp där vi satte bakgrundsfärg på knappen. Ur en tillgänglighetssynpunkt blir det också viktigt att sätta textfärg för knappen så att dessa kan kontrastkontrolleras mot varandra. Dessa par finns det flera av under sektionen Element (t.ex. default, primary, secondary och success med fler). Under sektionen Block finns även en egenskap för länkfärg, och den behöver också ha tillräcklig kontrast till bakgrundsfärgen. Slutligen kan det också vara bra att tänka på att inte sätta för ljusa kantlinjer då dessa kan användas som kantlinje i formulär och kommer därmed också att krävas på kontrastkraven.

Det är inte helt enkelt och inte alltid självklart men grundtipset är att hålla koll på "paren". Om du under en och samma rubrik i redigeringspanelen för temat tillåts sätta både bakgrundfärg och textfärg (samt länkfärg) se då till att dessa har en tillräcklig kontrast till varandra.

Specialfallet "Danger"

Under rubriken Element i temapanelen finns paret "Bakgrundsfärg för danger" och "Färg på text för danger". Här har vi stött på fall där bakgrundsfärgen även används som färg på text för att skriva ut valideringsmeddelanden i formulär. Med detta vill jag alltså rekommendera att bakgrundsfärgen för danger även kontrolleras för sin kontrast mot den generella bakgrundsfärgen och bakgrundsfärg för sektion. Detta må ändras under tidens gång men vill man vara på den säkra sidan är det ett tips från mig.

Varför kan jag inte sätta en färg under rubriken knapp?

En av de första saker jag själv slogs av, innan jag förstod hur Sitevision tänkt kring teman, var att jag under sektionen "Knapp" i tema inte kan välja färger. Det kändes helt knäppt för om det är något man vill färgsätta så är det ju just knappar. Men poletten trillade ner och jag insåg att det är under "Element" som jag ska sätta färger som kommer att användas på knapparna. Element blir en samling av alla de minsta beståndsdelarna i ett tema, t.ex. en knapp eller färgen på kryssruta. Så, sätt färger under sektionen Element på teman så kommer du samtidigt få färgsatta knappar på din webbplats. Det samma gäller för brickor, meddelandefält och paginering — dessa ärver sina färger från Element.

Webbplatsfärger eller färgvärden — a blast from the past

Länge har de färger man kunnat använda i Sitevision varit kopplade till de så kallade Webbplatsfärgerna. Webbplatsfärgerna är som bekant en webbplatsinställning där färgvärden registreras med ett visst namn och färgvärde, och en färg som lagts till kan inte tas bort. Tillsammans bildar alla dessa färger den lista av kulörer som är valbara i olika inställningar på webbplatsen. Men, sedan kom hösten 2022 och i och med nya inställningar i teman så blir vi lite friare. I temat kan vi nu, istället för att använda en webbplatsfärg, använda färgvärden (HEX och rgba). Så har du en äldre version av Sitevision kan du möjligtvis välja bland webbplatsfärger, annars är det numer den lite friare formen med färgvärden som gäller.

3 konkreta tips: Färgvärden i ditt tema

Detta må vara trubbiga tips som inte kommer funka i alla lägen men se dem som en utgångspunkt när du börjar fundera på färgsättning i ditt tema om du gör det för första gången.

  1. Svårt att särskilja default och primary? Sätt då samma färg — ditt varumärkes huvudfärg på båda. Det är en tolkningsfråga när en utvecklare ska använda default eller primary och det gör att båda används på liknande sätt. Både av Sitevision själva och av oss underleverantörer.
  2. Danger danger! Se till att den färg du använder som bakgrundfärg för "danger" har tillräcklig kontrast mot både generell bakgrundsfärg och sektionsbakgrundfärg då den kan komma att användas som både kantlinjefärg och textfärg vid validering.
  3. Utgå från den grafiska profilen - såklart Be att få färger för "Warning", "Information", "Danger" och "Success" av den som är ansvarig för färg och form inom er organisation. Önska färger som harmoniserar med er grafiska profil men som samtidigt förmedlar budskapet och funkar med tillgänglighetskraven. Om det inte sätts någon färg för dessa värden i temat kommer standardfärgerna från Sitevisions (Envision) att användas.

Tema: Tema

Detta är den andra i raden av tre artiklar som behandlar temasättning i Sitevision.

Del 1: Så kommer du igång med tema i Sitevision

Del 2: Hur du väljer "rätt" färger i ditt Sitevisiontema

Del 3: Temat i praktiken

Artikeln är skriven av: Ida Dahlén Kommunikatör och webbutvecklare ida@limepark.se