by Milou Communication
Share
Färg är något som betyder mycket för oss. Vi associerar dem med känslor, bygger varumärken med dem och beundrar trädens olika färger som skiftar med årstiderna. Så är det dock inte för alla. Vissa människor har nedsättningar som till exempel färgblindhet eller grå starr. Dessa synnedsättningar gör att vissa inte ser skillnad på specifika färger, kan uppleva färger mörkare eller svagare än vad de är och vissa ser inte färger alls. Dessa aspekter gör att vi behöver tänka över vilka färger vi använder och framför allt hur vi använder dem för att säkerställa en inkluderande design.
Det nya tillgänglighetsdirektivet träder snart i kraft och med det kommer en större press på fler företag att jobba med tillgänglighet och inkludering. Färg är en viktig del av tillgängligheten och bör således tas i beaktande. I denna artikel ska vi därför fördjupa oss i hur man säkerställer att man jobbar tillgängligt i sina färgval!
Vad säger WC3?
Enligt WCAG 2.1, vilket är standarden som WC3 har gett ut och som tillgänglighetsdirektivet går efter, har man en del olika riktlinjer att förhålla sig till. I dessa riktlinjer har man de olika klassificeringarna A, AA och AAA. Tillgänglighetsdirektivet har krav på A- eller AA-nivå men man rekommenderar den högsta, alltså AAA-nivå.
Den lägsta klassificeringen för färger, det vill säga A nivå, grundar sig i att färger inte ska vara det enda sättet som man förmedlar information, visar att något händer på sidan eller det enda som skiljer olika element åt. Information och skillnader behöver alltså visas via andra metoder än enbart färg.
Kontrast
Kontrast är det första viktiga elementet man måste hantera då det påverkar mycket av synligheten. Så, vad är kontrast? Det är skillnaden mellan färg på två objekt som i detta fall påverkar synligheten. Låg kontrast betyder att skillnaden mellan element och bakgrund är liten. Exempel på låg kontrast är mörkgrå text på svart bakgrund eller väldigt ljusblå text på vit bakgrund. Detta gör att texten blir svårare att se mot bakgrunden eftersom text och bakgrund är för lika i färg. Hög kontrast däremot får objekt att synas eller poppa. Svart på vitt exempelvis har väldigt hög kontrast. Den vita bakgrunden gör att den svarta texten syns väldigt bra. En generell regel att gå efter är att om man har en mörk bakgrund så ska texten vara ljus och vice versa. Exempel på bra skillnader:
Men i det här exemplet kommer också färgskillnader in. Man ska då helst undvika färger som inte passar ihop. Kanske en fluffig beskrivning men rött på grönt är en klassisk kombination som gör att elementen blir svåra att läsa av för ögonen. Man ska också tänka på att färger inte ska ligga för nära varandra mättnadsmässigt på grund av att de blir för lika i svartvitt.
Text
Oftast skriver vi med svart eller vit text. Ibland vill man dock använda färgad text på färgad bakgrund och då kan det snabbt bli problematiskt. När man använder text är det inte bara kontrasten som spelar roll, utan även färgseende och storlek på texten.
I detta exempel har vi ändrat lite i färgen så att den är åt det rosa hållet. Den är okej så länge storleken inte understiger 18 pixlar. Det kan bero på att kontrasten blir för låg när texten blir mindre och då flyter samman, eller att denna färgkombination blir svårare att se om man har en synnedsättning.
Färgseende
Det är viktigt att ta eventuella nedsättningar i färgseendet i beaktande eftersom det ändrar hur vår design uppfattas. Färgblindhet kommer i olika varianter som röd/grön, blå/gul, gul/rosa eller monokrom. Detta gör att man antingen inte ser någon av färgerna eller att man har svårt att se skillnaden mellan färgerna. Grå starr får däremot färgerna att se svagare och lite mer gulbruna ut i tonen. Vissa nedsättningar innebär även att färgerna ser mörkare ut.
Men vad betyder detta för vår design? Vi väljer färger som vi tycker passar bra ihop och som man tydligt ser skillnader i kontrast mellan.
Om färgen ändras så att den blir mörkare, för lik en annan färg eller gör om till gråskala, ändras dock hela upplevelsen. Detta kan göra att en fungerande design helt plötsligt inte funkar alls.
Se exempel här:
Verktyg för tillgängliga färgval
Som tur är finns det en rad olika verktyg som hjälper oss att navigera i reglerna kring färg samtidigt som de hjälper oss att se till att vi är inom ramarna för bra tillgänglighet. Här är tre verktyg som vi har använt när vi testat hur tillgängliga vi är våra färgval.
- Color Blindness Simulator – Hjälper dig att förstå skillnaden mellan de olika typerna av färgblindhet. Du kan enkelt ladda upp dina egna bilder för att se hur det ser ut för dem med olika typer av färgblindhet.
- Contrast Checker – Har inbyggda WCAG 2.1-kontroller för alla kriterier. Här lägger du in förgrundsfärg och bakgrundsfärg så får du snabb feedback om det är godkänt eller inte.
- Accessible Colors – Har WCAG 2.0-kontroller och du själv kan välja vilken tillgänglighetsgrad du vill ha.
- För en mer utförlig guide till tillgängliga färgval när du designar webb rekommenderar vi audioeyes tydliga guide.
Summering
Färgval betyder väldigt mycket för både din design och för tillgängligheten. Alla har inte samma förutsättningar att tolka färger och det behöver man vara medveten om när man designar – oavsett om slutprodukten till exempel är en trycksak, en webbplats eller en app.
Vi på Milou Communication är experter på både design och tillgänglighet. Kontakta oss gärna om du behöver uppdatera en befintlig design eller skapa en ny tillgänglighetsanpassad design för att möta de skärpta kraven på tillgänglighet.
STAY IN THE LOOP