Färger

Web Content Accessibility Guidelines (WCAG) 2.1 innehåller flera framgångskriterier som är relaterade till användning av färger för att säkerställa tillgänglighet för personer med olika funktionsnedsättningar.

Vi tänkte i den här artikeln berör en av dem, nämligen den som säger att du inte ska använda färg som det enda visuella sättet att förmedla information, indikera en handling, fråga om återkoppling eller särskilja ett visuellt element.

Vad säger lagen om färger?

Lagen säger att du inte ska använda färg som det enda visuella sättet att förmedla information. Det betyder att du ska kunna använda webbplatsen även fast den visas i svartvitt och färger inte syns. Har du då tillräcklig färg mellan till exempel två grafiska element i ett diagram eller mellan texten och bakgrunden? Syns länken även ifall du plockar bort färgen eller behöver du kanske komplettera den med något annat, till exempel en ikon eller symbol?

Framgångskriterium 1.4.1, WCAG: Använd inte enbart färg för att förmedla information (Nivå A), utdrag från Webbriktlinjer

Framgångskriteriet Use of Colour, på engelska. utdrag från W3C

Översikt över de framgångskriterier i WCAG 2.1 som handlar om användning av färger

• Framgångskriterium 1.4.1: Användning av färger (Nivå A)
  Använd inte enbart färg för att förmedla information. Information och struktur ska kunna förstås när färg inte används som det enda sättet att förmedla information.
• Framgångskriterium 1.4.3: Kontrast (Nivå AA)
  Använd tillräcklig kontrast mellan text och bakgrund. Text och bilder av text ska ha ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text mot sin bakgrund.
• Framgångskriterium 1.4.11 Kontrast (Nivå AA)
  Använd tillräckliga kontraster i komponenter och grafik. Använda färger och visuell presentation som inte är text ska ha ett kontrastförhållande på minst 3:1 mot sin omgivningen.

Designa användarvänligt

När du ska designa ett dokument eller en webbplats med färger måste du tänka på användarvänligheten. Färg kan på många sätt lätta upp ett dokument eller en webbsida och göra informationen mer tilltalande. Men färg kan också ställa till det för många användare och göra informationen svårläst och rörig. Det är en fin balans mellan att förenkla och försämra.

Rekommendationer för användning av färger

Personer som är färgblinda eller har svårt att se färgskillnader kan få problem att förstå information om den enbart förmedlas med färg. Färg får därför inte vara det enda sättet att förklara eller informera utan ska stöttas med andra metoder, exempelvis med text eller mönster. Komplettera därför betydelsebärande färgskillnader med någon annan synlig skillnad:

• Ikoner eller liknande grafiska element kan läggas in som komplement till färgskillnader.
• Färgskillnader mellan textelement kan kompletteras med understrykning, ram, fetstil, kursivering eller annat teckensnitt. Var särskilt noga med att framhäva länkar.
• Färgskillnad mellan ytor i till exempel kartor och diagram kan kompletteras exempelvis med mönster, inramning, kontrastskillnad eller text.
• Linjer kan exempelvis göras streckade, prickade, prickstreckade eller dubbeldragna.
• Ibland behöver färgskillnader kompletteras med skriven text som ger motsvarande information.

Diagram av olika slag är ett bra exempel där färg används för att förmedla information.

För att kunna läsa ovanstående diagram måste du kunna se färg. Men om vi i stället skriver ut ettikettexten till tårtbitarna runt diagrammet kan informationen förstås utan färgseende.

Detta blir ett tydligare diagram för alla användare.

Du behöver tänka på färger i alla typer av diagram du skapar. I ett linjediagram behöver du designa linjerna så att linjerna är olika, och i ett stapeldiagram behöver du lägga till mönster. Dessa små justeringar ökar användarvänligheten för alla användare.

Undvik dessa färgkombinationer

Det finns vissa färgkombinationer man bör undvika för att förenkla för personer med färgblindhet. Var särskilt försiktig med färgerna grön, röd och brun. Många personer med färgblindhet har svårt att särskilja dessa. Enligt 1177 är den vanligaste formen av färgblindhet när du har svårt att skilja på rött och grönt. Har man röd-grön färgblindhet kan det även vara svårt att skilja på blått och lila samt grönt och brunt.

Du behöver därför tänka på vilka färger du använder när du layoutar så att din information kan uppfattas och bli tydlig för alla.

Det finns även personer som är helt färgblinda eller har gul-blå färgblindhet. Dessa typer av färgblindhet är enligt 1177 mycket ovanliga.

Färgblindhet 1177

Läs mer

Kolla in vår sida om kontraster

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