Färg, form och media

I det här avsnittet finns de anvisningar som guidar oss i hur vi använder färg, form och media på stadens webbplatser.

Stadsvapnet – stadens logotyp

Webbplatser som Helsingborgs stad står bakom ska använda stadens logotyp, stadsvapnet. Det gäller även webbplatser som staden ansvarar för tillsammans med andra aktörer, till exempel vid samarbeten eller projekt. För stadens logotyp gäller samma riktlinjer för webb som för annat grafiskt material.

Varumärkesansvarig och stadens kommunikationsdirektör beslutar om etablering av egen symbol. Ansökan skickas till varumarke@helsingborg.se. Har du andra frågor om stadens logotyp, eller vill göra undantag från reglerna om hur den används, ska du kontakta varumärkesansvarig.

Textformatering och typografi

Rubriker

Rubriker ska skrivas med hjälp av rubrikformateringar: h1, h2 och så vidare. Rubrikerna skrivs i hierarkisk ordning, med ett steg mellan varje rubrik. Det betyder att h1 ska följas av h2, h2 av h3 och så vidare. Detsamma gäller i omvänd ordning: om du efter en underrubrik i h3 behöver en ny huvudrubrik används h2. På så vis blir sidorna lättlästa, sökoptimerade och tillgänglighetsanpassade.

Ingresser

Textens första stycke, ingressen, ska innehålla det viktigaste i texten och ska med några meningar sammanfatta innehållet i den. Ingressen bör även innehålla nyckelord om det som texten handlar om för att förbättra sökoptimeringen.

Typografi

Staden använder typsnittet Roboto i vikterna light, regular, medium, bold och black. I vår webbplattform är dessa teckensnitt standard och ska inte ändras.

Såhär gör du

Färg på webben

Färgband

Webbplatser som Helsingborgs stad står bakom ska förses med färgband från stadens grafiska profil. Det gäller även webbplatser som staden ansvarar för tillsammans med andra aktörer, till exempel vid samarbeten eller projekt. Färgerna i färgbanden finns i en webbversion med beskrivning av hur de ska användas för att vara tillgänglighetsanpassade.

Varumärkesansvarig beslutar om undantag gällande färgbandet. Har du frågor om färgbandet, eller vill göra undantag från reglerna om det, ska du kontakta varumärkesansvarig i staden. Läs mer om färgbandet på stadens varumärkessajt.

Kontraster

För att stadens webbplatser ska vara tillgänglighetsanpassade utformas de med tillräckliga kontraster. Det betyder att förgrund och bakgrund måste ha ett kontrastvärde på minst 4,5:1. Det gäller dock inte:

  • Stor text. För stor text räcker ett kontrastvärde på minst 3:1. Stor text avser text i storleken 24 pixlar, eller 19 pixlar om den är fetstilt.
  • Logotyper. Text som är en del av logotyp eller varumärke har inget krav för kontrast.
    Du kan mäta kontrastvärdet med hjälp av verktyget Contrast Checker.

Färg som information

Färg får inte användas som det enda visuella sättet att förmedla information, eftersom vissa användare inte kan uppfatta färgskillnader. Färgskillnader kompletteras därför med exempelvis text, mönster eller på annat sätt.

Exempel på hur färg kompletterats med ikon och text.
Med verktyget RGBlind kan du testa hur din webbplats upplevs av en färgblind person.

Bild, ljud och rörlig media

Innehåll som inte är text, exempelvis bild, animationer, diagram, ljud och video, ska beskrivas med text. Skälet är att de som använder skärmläsare behöver sådana beskrivningar.

Tänk på att bilder, ljud och rörlig media som innehåller personuppgifter omfattas av GDPR. Läs mer om GDPR på webben.

Bild

Bilder ska bara användas när de tillför något till det övriga innehållet. Bilder som används på våra webbplatser ska följa stadens bildmanér.

Genrebilder kan användas för att skapa en känsla, eller när bilden fungerar som komplement. Men de bör undvikas när bilden har ett informativt syfte, eftersom de riskerar att bli vilseledande.

Bilder som tillför information som är värdefull för användaren ska ha en alt-text. Detta för att personer som använder skärmläsare ska kunna ta del av innehållet.

Text får inte publiceras i bildformat. Detta eftersom det gör det omöjligt för användare att anpassa texten, till exempel genom att förstora den eller ändra för- och bakgrundsfärg. Detta gäller inte logotyper eller bilder där texten är avgörande för att bildens syfte ska uppnås, till exempel i en skärmdump.

Om du vet vem som är upphovsman till en bild eller illustration, bör du så långt det är möjligt ange dennes namn i bildtexten. Detsamma gäller ccby-bilder. Om du använder bilder från bildtjänster så som Shutterstock eller Pixabay, ska du handla i enighet med företagets önskan om erkännande. Bilder med CC0-licens kan användas utan att ange upphovsmannens namn. Du kan läsa mer om bildhantering på stadens intranät.

För att bilder ska visas korrekt måste de optimeras efter det webbpubliceringsverktyg du använder. Du kan läsa mer om vilka bildstorlekar och bildproportioner som används i stadens webbplattform i lathunden. Undvik att presentera bilder i kollage, eftersom de inte visas korrekt vid olika skärmupplösningar.

Mer om bilder i lathunden

Ljud och rörlig media

Film som publiceras på våra webbplatser ska följa stadens filmmanér. Film som produceras av kommunanställda ska laddas upp på något av stadens Youtube-konton. Har du frågor som rör dessa, kontakta stadens ansvarig för sociala medier.

Video och animationer som har informationsbärande ljud ska av tillgänglighetsskäl textas. Erbjud gärna även en textversion av videon. Det gör det möjligt för personer som använder skärm- eller punktskriftsläsare att ta till sig innehållet i egen takt. En textversion av film- eller ljudspår påverkar även sökoptimeringen positivt.

Video som innehåller information som inte framgår av dialog och miljöljud, och som är avgörande för att mottagaren ska förstå, ska syntolkas. Detta eftersom synskadade behöver förstå all information som visas i en video.

Direktsändning av rörlig media eller ljud ska textas, eller kompletteras med en textversion, senast 14 dagar efter sändningen om den går att ta del av i efterhand. Det ska också vara tydligt för användaren att det finns textning, till exempel genom en symbol, särskilt när användaren aktivt behöver ta fram texten.

Om du publicerar enbart ljud (exempelvis en podd) eller enbart film (en film utan ljud), ska det finnas ett alternativ som presenterar samma information på annat sätt, till exempel i text.

Ljud ska vara möjligt att pausa, stoppa eller sänka. Användare som lyssnar på en sida med hjälp av skärmläsare kan ha svårt att uppfatta innehållet om det samtidigt spelas upp andra ljud. Det kan också vara svårt att använda en tjänst om det inte går att stänga av ljud. Om det finns ljud som spelas upp automatiskt ska detta gå att stänga av separat.

Innehåll som blinkar, rör sig eller uppdateras utan att användaren bett om det ska upphöra efter max fem sekunder, alternativt kunna pausas, stoppas eller döljas av användaren. Undvik även snabbt blinkande, till exempel en filmsekvens med blinkande lampor eller en annons som blinkar för att dra till sig uppmärksamhet. Detta eftersom det kan framkalla epileptiska anfall hos vissa användare.

Mer om film i lathunden

Pictogram och illustrationer

Pictogram ska ha en vägledande funktion och underlätta navigering. De får inte vara den enda navigeringsvägen utan måste kompletteras med text. I övrigt är reglerna för pictogram på webbplatser samma som för pictogram i tryck.

Illustrationer ska fylla ett informativt syfte och kan användas när foton inte passar, till exempel för att förtydliga en process eller en instruktion. Reglerna för illustrationer på webbplatser är samma som för illustrationer i tryck. Om du vet vem som är upphovsman till en illustration ska du ange dennes namn i bildtexten.

Tänk på att innehåll som inte är text, även pictogram och illustrationer, ska beskrivas med text. Det gäller dock inte innehåll som endast används som dekoration.

Diagram och tabeller

För diagram på webbplatser gäller samma riktlinjer som för diagram i tryck, men på webbplatser måste de tillgänglighetsanpassas genom design med tillräckliga kontraster.

Tabeller används för att presentera data, till exempel statistik som visar en förändring över tid eller priser för olika tjänster. Sådan information blir tydligare och lättare att ta till sig om den presenteras i en tabell än i löpande text.

Klistra inte in tabeller som skapats i andra program än stadens webbpubliceringsprogram. Vi klistrar heller inte in bilder av tabeller, eftersom bild inte ska innehålla text.

Mer om tabeller i lathunden

Knappar

Knappar används när besökaren uppmanas att göra något, exempelvis Skicka eller Visa. Återkommande funktioner, så som knappar eller ikoner, ska namnges och beskrivas på samma sätt. Det innebär till exempel att en skicka-knapp heter samma sak på hela webbplatsen, inte Skicka på en sida och Sänd på en annan.

Så skapar du knappar