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

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". Eftersom du inte har jobbat med tema på webbplatsen så kommer knappen per automatik bli blå. Då skapar du upp ett nytt tema för att knappen ska följa webbplatsens färger, i det här fallet så säger vi att din webbplats huvudfärg är grön. Så du går in i temainställningarna och lägger in den gröna färgen under Element > Primary > Bakgrundsfärg. Och vips så är knappen grön!

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.