Kontraster och färger

Filmen i text

I den här kursen ska vi prata om hur färger kan påverka tillgängligheten för användare. Färger och kontraster är ett av dom absolut vanligaste problemen som vi ser på webbplatser, appar och dokument. När färg används på fel sätt kan det bli svårt att se innehållet, man kanske missar en knapp, inte kan läsa en text eller har svårt att se vad som står. Genom att använda tydliga färger kommer många fler kunna ta del av ditt innehåll och även få en bättre upplevelse.

Om du är en redaktör, designer, någon som skapar eller redigerar innehåll på webben eller i dokument så ska du kolla vidare.

Vi börjar med ett exempel där val av färger inte är tillgängligt, (visa bilden på skärmen) Här har vi en text som säger ”klicka inte på länken”, men genom vårt val av färger så är faktiskt risken stor att en användare kommer att klicka på länken. Kontrasterna är inte tillräckligt tydliga för att användaren enkelt ska förstå vad den ska göra.

I den här kursen kommer du få lära dig mer om riktlinjerna kring färger och kontraster, vi ska kolla på hur olika användare kan ha olika behov, men framför allt hur du kan möta deras behov. Efter den här kursen kommer du känna till riktlinjerna och kunna välja tillgängligare innehåll med rätt färgval.

Varför design kan vara avgörande för tillgängligheten
Om vi tänker tillbaka 10 år i tiden, så var det inte så många som betalade räkningar på webben, oftast fick man hem en räkning på posten. Det var inte många som handlade mat online och att träffa en läkare online var det väldigt få som ens skulle kunna tänka sig, men idag gör vi det! Det digitala har blivit en stor del av vår vardag och därför är det viktigare än någonsin att webben finns tillgänglig för alla människor. Alla människor har olika förutsättningar, det är upp till oss, dig och mig som jobbar med webben, att möta deras behov.

Vad som fungerar bra för dig, kanske inte fungerar alls för en annan person. Det som du kan se kanske någon annan inte alls kan se. Det finns människor som är färgblinda, har en synnedsättning, är helt blinda och personer med nedsatt motorik. Men det finns också något som kallas för tillfälliga funktionsvariationer, och det är något som alla upplever, det kan vara som på sommaren när solen lyser på skärmen, då blir kontrasterna sämre även för den som egentligen ser bra. Jag kommer gå in mer på olika funktionsvariationer lite längre fram i kursen.

Okej, så jag tänkte att jag ska visa några konkreta exempel på vad jag menar. Och när vi pratar om kontraster och olika nivåer på kontraster så är det bra att känna till några grunder. Stor text, det kan vara till exempel rubriker, ska ha minst 3 i kontrast för att vara godkänd mot WCAG. Liten text ska ha minst 4,5. Grafik, det kan vara ikoner eller andra meningsbärande objekt som inte är text, ska ha minst 3 i kontrast.

Den första bilden vi ska titta på är ett dokument med information om Corona, och den svarta texten mot den vita bakgrunden är det inga konstigheter med, det är höga kontraster och lätt att se vad som står. Den vita färgen mot den orangea däremot har för låga kontraster och alla kanske inte kommer kunna läsa texten. Vi har huvudrubriken ”News about corona” med vit text mot orange bakgrund och kontrasten ligger på 2,7 vilket är för lågt. Sen har vi också texten på sidan av huvudrubriken ”Engelska, nummer 30, februari 2021” med vit text och med en mer ljus orange bakgrund, då ser vi att kontrasten är ännu sämre, den ligger bara på 1,9. Och sen har vi texten längst ner som börjar med ”Right now” med ljus orange text mot vit bakgrund, där är kontrasten 2,8. Ingen av dom här färgkombinationerna är godkända att använda på varken webbplatser, appar eller i ett dokument som i det här fallet.

Vi går vidare till nästa exempel som är från en webbplats. Texten ”pågående fiber utbyggnad” är den vi har markerat här som inte godkänd. Det är alltså vit text mot en väldigt ljusgrön bakgrund som kan bli väldigt svårt för en del att läsa. Kontrasten är på 1,5 vilket är väldigt lågt. Det lägsta man kan komma i kontrast är 1 och då är det vit mot vit vilket inte någon kan se Det högsta är 21. Så 1,5 är alltså väldigt lågt.

Bild tre som vi ska titta på är från en webbplats och den här bilden har jag förstorat nu men egentligen så är texten ganska liten. Vi har fyra pratbubblor i olika färger med vit text i och sen har vi en text under pratbubblorna med en ljusblå text mot vit bakgrund. Ingen av kontrasterna på texterna i bubblorna är godkända att använda, den som har bäst kontrast är den lite mörkare gröna bubblan med texten ”professionella”, den har en kontrast på 3,7 men eftersom det är liten text, egentligen, här har jag ju förstorat texten, så är inte den heller godkänd.

Sen har vi den här typ av bild, vilket är väldigt vanligt, tyvärr. Det är alltså när man väljer att lägga text på skiftande bakgrund. Det här är dessutom en startsida och det här är det första man ser när man går in på webbplatsen. Bilden föreställer en kvinna som jobbar inom äldreomsorgen som skrattar tillsammans med en äldre man. Och vi kan se, för jag har satt ut olika kontrast värden på olika delar av bilden, att kontrasterna varierar väldigt mycket. Huvudrubriken är ”Sveriges största vårdbolag” och just ordet ”största” har hamnat på kvinnans skjorta som är väldigt mörk, så här får vi väldigt bra kontraster, hela 7,3 vilket är högt och absolut godkänt att använda. Men en del av den andra texten, nu har jag tagit rubriken som exempel, en del av ordet ”Sveriges” och ”vårdbolag” har en mycket ljusare bakgrund eftersom bilden skiftar i färg och här är kontrasterna nere på 2,9, 2,2 och till och med så långt som 2,1. Det är en stor skillnad på kontrasten 2,1 och 7,3. För många användare kan det bli svårt att läsa den här typ av text, man kanske bara kan läsa en del av innehållet men det kan också bli jobbigt för ögat att se så många färger på en gång när man försöker fokusera.

Det kan ju också vara så att man har tänkt till och valt en mörk bild som bakgrund där alla kontraster är godkända, men om man sen byter bakgrund så kan det ju bli problematiskt, så ett tips är faktiskt att undvika den här typ av lösning, det finns bättre sätt att informera text på till användare, och vi ska såklart kika närmre på bättre lösningar senare.

Här har vi en text som många har på sina webbplatser, det är den klassiska ”acceptera cookies” som dyker upp och användaren måste göra ett val innan den kan komma in på webbplatsen, valen är ”jag accepterar” ”jag accepterar inte” och så finns det en länk ”om cookies” för den som vill läsa mer. Ingen av färgvalen här är godkända att använda. Värst är den vita färgen mot den ljusblå bakgrunden, 2,1 och 1,9 i kontrast. Knappen ”jag accepterar inte” är den som har högst kontrast på 3,9, det är fortfarande för lågt men det är den som flest kommer se, och då är ju risken också stor att fler användare kommer trycka på den knappen, vilket antagligen inte är det som företaget vill. Det här är ett bra exempel på när vi leder användaren till att göra fel val genom färg.

Av bilderna jag har visat hittills så är det här den värsta sett till val av färg och kontrast. Det är en ljusgul bakgrund med en vit text som säger ”Omsorgsfull projektutveckling skapar effektiva projekt”. Jag tycker själv att det är jobbigt att läsa den här texten, jag kan läsa den men det tar emot lite för ögat och faller sig inte naturligt, det känns lite ansträngt faktiskt. Och det är inte konstigt, vi har en kontrast på 1,3. 1,3 är i det absolut lägsta laget innan det blir omöjligt att läsa text på 1.

Jag tänkte också visa ett exempel på ikoner för sociala medier. Många webbplatser och appar har ikonerna ”Facebook”, ”Twitter” och det finns många andra vanliga ikoner som Instagram och LinkedIn. Problemet här är Twitter ikonen som har kontrats på 2,7. En enkel lösning på det här är att skriva ut till exempel ”Twitter” i anslutning till ikonen, och såklart använda tydliga kontraster.

Så, då har vi tittat lite på konkreta exempel där kontrast och färg inte fungerar. I nästa steg ska vi titta närmre på olika nivåer i tillgänglighet kopplat till färger och vilka kontrast-värden som man ska ligga över för att ha en tillgänglig design. Vi ska också prata om lagen om tillgänglighet och titta lite på dekorativa inslag.

Tillgänglighet i kontrast och färger. Lagen och olika nivåer.
Lagen om tillgänglighet till digital offentlig service ställer krav på tillgänglighet på webb och i dokument. Under 2022 kommer även den Europeiska tillgänglighetslagen och då kommer en mycket större del av den privata sektorn att omfattas. Men även den som inte omfattas av lagen vill ju förstås nu ut till sina användare.

I det här avsnittet ska vi fokusera på riktlinjerna kring färger och kontraster och vilka kontraster som du behöver ha för att uppnå riktlinjerna, men också hur du kan vara bättre än riktlinjerna och uppnå den högst möjliga nivån för tillgänglighet i färger och kontraster.

Här ser vi att stor text, det kan vara till exempel rubriker, ska ha en kontrast på minst 3. Liten text, eller vanlig text ska ha minst 4,5 i kontrast. Grafik, det kan vara ikoner eller andra meningsbärande objekt ska ha minst 3 i kontrast. Jag har tagit fram fem olika nyanser av en blå färg som vi ska testa mot vit och svart text och se vilka som är godkända att använda sätt till vad WCAG säger. På raden högst upp har vi de fem olika färgerna som går från en mörkblå färg ner till en ljusblå färg. Längst ner ser vi vad de olika färgerna har för kontraster till den vita texten, det går från 10,4 i kontrast på den mörkblåa färgen och ner till 2,9 som är den ljusaste blåa här. I varje färg-box står det antingen godkänd eller ej godkänd för stor text, rubriker till exempel. Vi kan se att de första fyra färgerna klarar sig mot WCAG och är då godkända att använda som stor text, den sista färgen som är den ljusaste blåa är inte godkänd att använda. Om vi hoppar ner en rad så representerar den färger som är godkända och ej godkända för liten text, då har vi bara två godkända färger, det är de två mörkare färgerna, resten får alltså inte användas som text. Hoppar vi ner en rad till så är vi på grafik, och grafik har samma kontrast krav som stor text och då är det också den sista ljusblåa färgen som inte får användas. På den sista raden har vi färgerna som är godkända och inte godkända mot WCAG AAA. WCAG 2.1 AA är den nivån som är lagkrav för offentliga aktörer i Sverige, och det är minimum nivå för tillgänglighet. AAA nivån är den högsta nivån för tillgänglighet i kontraster och då är det en kontrast på minst 7 som man ska ligga på. Då ser vi att det bara är den mörkaste färgen som klarar det kravet, den har en kontrast på 10,4. Resten av färgerna har kontraster mellan 4,6 ner till 2,9 och klarar inte AAA nivån.

Sen kan det ju vara så att ni har många ljusa färger på er webbplats eller på en app och inte vill byta ut eller göra om den grafiska profilen. En lätt åtgärd man kan kolla på då är om ni kan byta ut färgen på texten i stället, alltså från vit text till svart text. Jag ska visa, (visa powerpoint) här har vi exakt samma färgpalett som vi tittade på precis, och raderna representerar också samma, stor text, liten text, grafik och AAA nivå. Skillnaden är att vi har bytt ut den vita texten mot en svart och vad vi ser då är att det är den ljusaste färgen som klarar de flesta kontrastkraven och inte den mörkaste som tidigare var den med högst kontrast. Den ljusa färgen klarar nu alla kontrastkrav och har kontrast 7,3 och klarar till och med AAA nivån, tidigare med vit text gick inte den färgen att använda alls. Nu är det i stället den mörkblåa färgen, med en kontrast på 2,1 som inte är godkänd mot WCAG och går inte att använda ens som stor text.

Om vi sen kollar på en annan bild så ser vi att den här webbplatsen använder väldigt ljusa färger, och har även en logga som är väldigt ljus, loggan har en kontrast på 1,9 mot den vita bakgrunden. Dock är logotyper undantag från lagen och därför gäller inte det här, så har ni en logotyp men låga kontraster så är det alltså ett undantag och du behöver inte göra om din logga.

Olika användare
Man brukar säga att ungefär 20% av befolkningen har en permanent funktionsvariation, och det är ungefär 1 av 5 personer. Många är äldre personer, när vi blir äldre så blir ofta synen sämre, men glasögon är kanske det vanligaste hjälpmedlet som finns i världen och används av både äldre och yngre, det är många som har svårigheter när det kommer till just synen så då är det extra viktigt att vi väljer färger så att fler kan se och läsa innehållet.

Ungefär 8% av befolkningen har någon form av färgblindhet, det är nästan 1 av 10 personer som kanske inte alltid kan urskilja olika färger. Och det finns olika typer av färgblindhet. Det finns röd-grön färgblindhet, gulblå färgblindhet och total färgblindhet. Den vanligaste typen är röd-grön färgblindhet.

Jag tänkte visa hur personer med olika färgblindheter kan uppfatta färger, här har vi två bilder på pennor i olika färger, den översta bilden visar hur personer med fullt färgseende ser färger, som kan se alla färger. Vi ser en svart penna, brun, orange, röd, lite lila, blåa färger, gröna, gula och en vit på slutet. I den nedre bilden ser vi pennorna ungefär som det kan se ut för en person med röd-grön färgblindhet, men det kan också variera. Vad som är tydligt är att färgerna i den övre bilden inte är samma som i den undre bilden.

I nästa bild så har vi samma pennor som i tidigare, och precis som innan så är den översta bilden hur en person med fullt färgseende ser färger. I den undre bilden är hur en person med blå-gul färgblindhet kan uppfatta färger, det kan som jag sa tidigare variera beroende på person men det är en ungefärlig bild av hur det kan se ut.

Här tänkte jag även visa tre bilder, den första är ett vanligt test som man kan göra för att upptäcka om någon har defekt färgseende, det finns många fler test med olika färger men jag har valt ut en som ett exempel. Då är det orange och röda prickar i en cirkel, i mitten finns gröna prickar som bildar en siffra, personer med färgblindhet kanske inte kommer se siffran i bilden. På den andra bilden har vi en färgskala med många olika färger, och den sista är hur en person med total färgblindhet skulle kunna uppfatta färgerna. Det är dock väldigt ovanligt med total färgblindhet och som jag nämnde tidigare är det den röd-gröna färgblindheten som är den vanligaste.

Vad jag vill säga med det här är att det är viktigt att vi inte använder endast färger för att förmedla information. I WCAG finns också en riktlinje som heter ”använd inte enbart färg för att förmedla information” som hänvisar just det vi pratar om nu.

Vanligt är att vi ser det här i diagram bland annat, där ser vi ofta att man väljer ut olika färger på staplar och många missar att förmedla informationen på fler sätt än bara färg. Här har vi ett diagram med staplar i tre olika färger. Nedanför ser vi vad staplarna representerar. För en färgblind person kan det bli svårt att veta vilken ”serie” som hör till vilken stapel. Eftersom det endast urskiljs med färg.

Ett annat vanligt fel som vi ofta ser, är när man använder endast färg för att urskilja länkar. Det kan bli svårt för den som är färgblind att se att det finns en länk i en text om den bara urskiljs med just färg, (visa skärmen) här har vi ett exempel, här ser vi en länk som heter ”här”, kanske inte ett optimalt val av länknamn och vi har andra kurser där vi pratar mer om länktexter, det vi fokuserar på just nu är färgen och jag kan se länken och du kanske också kan se länken, men för den som är färgblind kanske det inte är lika tydligt. Bilden i mitten representerar hur det skulle kunna se ut för en färgblind person, och det är svårt att urskilja länken från texten. En bra och enkel lösning är att göra länken understruken som vi visar i sista bilden. Då urskiljs inte länken endast med färg och den som är färgblind kommer också kunna upptäcka länken, genom att den är understruken. En annan bra lösning kan vara att lyfta ut länkarna ur texten, och ha som en box på sidan med relaterad information till den artikeln.

Jag nämnde också lite tidigare något som heter tillfälliga funktionsvariationer, och det är något som vi alla upplever. Det vanligaste är nog när vi är utomhus och använder mobilen, om solen lyser på mobilen så blir ju kontrasterna svårare att se, även för den som egentligen ser bra. Är man då inne på en webbplats eller en app som har låga kontraster så blir det förstås ännu svårare. Sen finns det även de som får ögonmigrän, det är också en tillfällig funktionsvariation. Och även pollen kan räknas som en tillfällig funktionsvariation. Det finns ingen exakt siffra men ungefär 30% av befolkningen har en pollenallergi, jag har själv pollen och det är vanligt för mig på våren att ögonen svullnar och att jag ser lite suddigare än vanligt, det är en tillfällig funktionsvariation som jag upplever till exempel. Det finns förstås många fler tillfälliga funktionsvariationer men det var några exempel och att använda tillräckliga kontraster är bra för alla användare, för era kunder och för era medarbetare.

Tack för att du tittade på den här kursen om tillgänglighet i kontrast och färg, och hör gärna av dig om du har några frågor. Hej så länge!