Kontraster

Att använda goda kontraster är viktigt för att säkerställa digital tillgänglighet och användbarhet för en bred publik, inklusive personer med synnedsättningar. Här är några viktiga skäl till varför goda kontraster är viktiga:

• Förbättrar läsbarheten: Höga kontraster mellan text och bakgrund gör det lättare för användare att läsa och förstå innehållet, särskilt för personer med milda till måttliga synnedsättningar eller de som arbetar i ljusa miljöer.
• Stödjer personer med synnedsättning: Individer med nedsatt syn, inklusive de med färgseende problem (som färgblindhet), är beroende av hög kontrast för att skilja mellan text och bakgrund eller mellan olika visuella element.
• Universal Design: Att implementera goda kontraster är en del av principerna för universell design, vilket innebär att designa webbplatser och digitalt innehåll som är tillgängliga och användbara för så många människor som möjligt utan behov av anpassning.
• Lagkrav och riktlinjer: Följa lagkrav och internationella riktlinjer såsom WCAG 2.1, som specificerar minsta kontrastnivåer för text och grafiska element, är viktigt för offentliga organisationer och företag för att undvika rättsliga konsekvenser och uppfylla lagstadgade tillgänglighetsstandarder.
• Ökar användarupplevelsen: Goda kontraster bidrar till en positiv användarupplevelse för alla användare, inte bara de med synnedsättningar. Det gör att webbplatser och digitalt innehåll känns mer inbjudande och lättare att använda.
• Förbättrar webbplatsens tillgänglighet: Genom att implementera goda kontraster uppnår man en viktig aspekt av webbtillgänglighet, vilket gör webbplatser mer tillgängliga och inkluderande, särskilt för äldre användare och de med permanenta eller tillfälliga synnedsättningar.

Goda kontraster är alltså inte bara en fråga om att följa lagar och riktlinjer, utan också ett sätt att visa hänsyn till användarens behov och skapa en mer inkluderande digital miljö.

Vad säger lagen om kontraster?

Lagen om tillgänglighet till digital offentlig service (DOS-lagen) i Sverige, tillsammans med de internationella riktlinjerna i Web Content Accessibility Guidelines (WCAG) 2.1 och den kommande WCAG 2.2, betonar vikten av tillräckliga kontraster för text och grafiska element på webbplatser och i digitala tjänster.

Huvudpunkter från WCAG om kontraster:

• Riktlinje 1.4.3 Använd tillräcklig kontrast mellan text och bakgrund(nivå AA): För text och bilder av text kräver WCAG 2.1 en kontrastkvot på minst 4.5:1 för normalstor text och 3:1 för stor text (18 punkter och större, eller 14 punkter och större i fetstil). Detta säkerställer att texten är läsbar mot sin bakgrund för personer med synnedsättningar.
• Riktlinje 1.4.6 Kontrast (nivå AAA): WCAG 2.1 innehåller också en striktare nivå AAA-krav, där kontrastvärdet för text och bilder av text ska vara minst 7:1 för normalstor text och 4.5:1 för stor text.
• Riktlinje 1.4.11 Använd tillräckliga kontraster i komponenter och grafik (nivå AA): För användargränssnittskomponenter (t.ex. formulärfält, knappar) och grafiska objekt (som används för att förmedla information) krävs en kontrastkvot på minst 3:1 mot närliggande färger.

Utdrag från Webbriktlinjer om kontraster i komponenter och grafik

Att mäta kontrastvärden

Principen är enkel – om inte kontrasten är tillräcklig går inte texten att läsa. Det finns flera olika verktyg som kan hjälpa dig med detta, och här har vi listat några av dem.

I verktyget Accessible Colors anger du för- och bakgrundsfärg, aktuella textinställningar och vilken nivå av kontrast kontrollen ska ta hänsyn till. Om din valda kombination av färger inte är godkänd ger verktyget förslag på hur du kan ändra de olika färgerna för att klara kraven.

https://accessible-colors.com

I verktyget Contrast Checker anger du för- och bakgrundsfärg och får därefter ett översiktligt resultat för liten och stor text. Verktyget är enkelt och går snabbt att lära sig.

https://contrastchecker.com

Verktyget Contrast ratio tar hänsyn till att en färg kan ha en viss genomskinlighet. Med hjälp av rgba anger du både färgen och dess genomskinlighet med en enda definition, och därefter gör Contrast ratio sin kontroll.

https://contrast-ratio.com

Använd tillräckliga kontraster i komponenter och grafik

Du behöver säkerställa att du uppnår goda kontrastvärden i de flesta former av grafiska element. Det finns några undantag och speciella regler kring exempelvis logotyper. Du hittar undantagen i WCAG.

För att exemplifiera tillräckliga kontraster i komponenter och grafik använder vi oss av ett cirkeldiagram från Webbriktlinjer.

Bild från webbriktlinjer.se.

För att uppnå tillräckliga kontraster i ett cirkeldiagram behöver du ta hänsyn till flera olika saker. Du behöver tänka på kontrasten mellan varje tårtbit, bakgrund och eventuell text på tårtbitarna.

Det första vi rekommenderar för att öka kontrasterna i cirkeldiagram är att lägga in en skiljelinje mellan de olika tårtbitarna. Bara genom denna enkla justering kommer läsbarheten förbättras markant.

Vi rekommenderar även att alltid placera text utanför tårtbiten. Har du texten i tårtbitarna blir det ytterligare en komponent du behöver testa, och det är inte säkert att den textfärg du vill ha uppnår goda kontrastvärden med alla tårtbitar.

Använd tillräcklig kontrast mellan text och bakgrund

Vi rekommenderar att du undviker att placera text på bild men ibland förstår vi att det önskas. Detta beror på att vi i våra användartester ofta ser att våra testpersoner har svårt att läsa texten för att bilden ”tar över” eller att texten upplevs ”i vägen” för bilden. Vad gäller text på färgad bakgrund så är det inte optimalt men inget vi anmärker på så länge kontrasterna mellan text och bakgrund uppnår goda värden.

Du kan skriva text på en bild eller en färgad bakgrund men då behöver du vara extra uppmärksam på kontrasterna.

Skriver du text på bild behöver du tänka över ditt bildval och placeringen av texten. Har du en bild med en blå himmel och en stor trädkrona bör du placera texten på himmel och inte på trädkronan. Trädkronan kan komma att upplevas rörig och då blir texten svårläst. Himmeln är lugnare för ögat att ta in och texten blir då mer lättläst.

Har du en färgad bakgrund behöver du tänka på att välja en lugn färg som inte tar för mycket energi att titta på. Ett exempel på en färg du bör undvika är klarröd.

Gemensamt för om du ha en bild eller färgad bakgrund är att du behöver ha en extra stor teckensnittsstorlek på din text.

Läs mer

Kolla in vår sida om Färger

Fler tips hittar du på sidan Digital tillgänglighet – Inspiration och tips