Använd inte enbart färg för att förmedla information

Det är viktigt att använda mer än bara färg för att förmedla information på webbsidor eftersom alla inte kan se färger på samma sätt. När du kombinerar olika sätt, som text eller ikoner, för att förmedla information blir det lättare för alla att ta till sig informationen.

Därför ska du använda mer än enbart färg för att förmedla information

Färger är mycket användbara för att förhöja användbarhet och estetik. Men vissa personer kan inte uppfatta färgskillnader, till exempel på grund av:

  • färgblindhet
  • nedsatt syn
  • att de använder monokrom skärm (monokrom kallas en yta som enbart har en kulörton).

Du behöver därför komplettera färg med andra visuella indikatorer.

Vad kräver lagen?

Komplettera färg med annat visuellt element

Använd gärna färger, men låt inte färgskillnader vara det enda sättet att urskilja information.

Om färg används för att förmedla information, indikera en handling, fråga om återkoppling eller särskilja ett visuellt element behöver detta förmedlas även på ett sätt som inte förlitar sig på färgskillnader.

Exempel: länkar

Det är inte godtagbart att enbart använda färgskillnad för markering av länkar.

Länkar ska skilja sig grafiskt från övrig text, genom exempelvis:

  • understrykning
  • placering
  • symbol
  • storlek.

Undantag från lagkraven

Länkar i menyer behöver inte indikeras med annat än färg, så länge användarna förstår att de är klickbara.

Länkar i länklistor behöver inte heller indikeras. Understrukna länkar i en lista kan göra det svårt att läsa.

Rekommendationer utöver lagkrav

Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:

Utforma visuellt tydliga länkar

Aktiva länkar kan göras tydligare till exempel genom ändrad bakgrundsfärg. Det hjälper alla användare men framför allt personer som navigerar med tangentbordet. Oavsett vilket sätt ni väljer för att lyfta länkar grafiskt, tänk på detta:

  • Ge textlänkar samma färg på hela webbplatsen.
  • Använd olika färger för besökta och icke-besökta länkar.

Se upp med vissa färger

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.

Komplettera betydelsebärande färgskillnader

Ikoner

Ikoner eller liknande grafiska element kan ibland passa bra som komplement till färgskillnader.

Text

Färgskillnader mellan textelement kan kompletteras med understrykning, ram, fetstil, kursivering eller annat teckensnitt. Var särskilt noga med att framhäva länkar.

Ibland kan färgskillnader kompletteras med skriven text som ger motsvarande information.

Kartor och diagram

Färgskillnad mellan ytor i bland annat kartor och diagram kan kompletteras exempelvis med mönster, inramning, kontrastskillnad eller text. Använd mönster som komplement till färgskillnad (W3C).

Linjer

Linjer kan exempelvis göras streckade, prickade, streckade eller dubbeldragna.

Semantisk kodning

Semantisk kodning kan behövas men är ofta otillräckligt som komplement: skärmläsare kan presentera den semantiska informationen, men semantisk kodning hjälper inte personer som inte använder skärmläsare.

Exempel: färg i kombination med ikoner och text

Nedan använder vi en kombination av färger, ikoner och text för att presentera olika kategorier av meddelanden till användaren

Så testar du färg som enda visuell indikation

Du kan få en indikation av hur färg används på en webbplats genom att ställa in din skärm på monokrom presentation eller gråskala.

Verktyg som till exempel RGBlind (rgblind.se) Länk till annan webbplats. kan användas för att simulera hur en webbplats kan upplevas av en person med färgblindhet.

Utdrag ur WCAG

WCAG 1.4.1 (A) Användning av färger

Färg används inte som det enda visuella sättet att förmedla information, indikera en handling, fråga om återkoppling eller särskilja ett visuellt element.

Därför länkar vi till WCAG på svenska och engelska

Relaterade riktlinjer

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Senast uppdaterad: