Förenklad beskrivning av WCAG-kriteriet 1.4.1

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

Använd gärna färger, men låt inte färgskillnader vara det enda sättet att urskilja information utan komplettera med exempelvis text, mönster eller någon annan visuell indikation.

Färger är mycket användbara för att förhöja användbarhet och estetik. Men vissa användare kan inte uppfatta färgskillnader, till exempel på grund av färgblindhet eller för att de använder en monokrom skärm eller skärmläsare. Använd gärna färger, men låt inte färgskillnader vara det enda sättet att urskilja information utan komplettera med exempelvis text, mönster eller någon annan visuell indikation.


Rekommendationer för användning av färgerLänk hit

Komplettera betydelsebärande färgskillnader med någon annan synlig skillnad:

  • Ikoner eller liknande grafiska element kan ibland passa 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 bland annat 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.
  • Semantisk kodning är ofta ett bra men otillräckligt komplement: Skärmläsare presenterar ofta den semantiska informationen, men det är inte alla användare som har skärmläsare.

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.


ExempelLänk hit

Den amerikanska regeringens stilguide använder en kombination av färger, ikoner och text för att presentera olika kategorier av meddelanden för användaren:

Den amerikanska regeringens mall kombinerar färger med symboler och text.

Bredbandskartan presenteras information med hjälp av färgade rutor. Samma information visas även med text när användaren markerar rutan. Vid behovsanalysen framkom det att vissa användare önskade just röd-grön färgskala, vilket är problematiskt för personer med färgblindhet. Lösningen fick bli att användaren själv kan välja färgschema.

Skärmbild från Bredbandskartan

Observera att Bredbandskartan använder mönster för ett andra lager av information. Därmed är det svårt att använda mönster för att särskilja rutor i det första lagret.


Framhäv länkar grafisktLänk hit

Användarna måste enkelt kunna skilja en textlänk från text som inte är länkad. Enligt W3C är det inte godtagbart att enbart använda färgskillnad för markering av länkar. Se därför till att länkar skiljer sig grafiskt från övrig text, till exempel genom understrykning, placering, kontrast, symbol eller storlek.

Undantag för länkar i menyer och listor

Länkar i menyer behöver inte vara understrukna, så länge användarna förstår att de är klickbara. Det är inte heller nödvändigt att skilja på besökta och icke-besökta länkar i menyer.

Länkar i listor behöver inte vara understrukna, eftersom det kan göra det svåra att läsa.

Fler rekommendationer för utformning av 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. Se R140. Markera tydligt vilket fält eller element som är i fokus.

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.
  • Skapa god kontrast mellan länktext och bakgrundsfärg.
  • Använd olika färger för besökta och icke-besökta länkar.

Se även R34. Gör länkar, klickbara ytor och menyer användbara för alla.


Utdrag från WCAG-standardenLänk hit

Riktlinje 1.4 Urskiljbart: Gör det enklare för användare att se och höra innehåll, bland annat genom att skilja förgrund från bakgrund.

1.4.1 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. (Nivå A)

Anmärkning: Detta framgångskriterium tar specifikt upp färgperception. Andra typer av perception behandlas i Riktlinje 1.3 inklusive automatisk åtkomst av kod för färg och annan visuell presentation.


MätbarhetLänk hit

Testa genom att ställa in din skärm på monokrom presentation eller gråskala.

Verktyg som till exempel RGBlind kan användas för att simulera färgblindhet på en webbplats.

Kommentarer till denna riktlinje

Kommentarer (0)


    Om denna riktlinje

    Den är relevant för DOS-lagen.

    Status på vår webbplats


    (Då uppdateras status i checklistorna.)

    Om WCAG

    WCAG (Web Content Accessibility Guidelines) är den standard som bland annat webbdirektivet och DOS-lagen bygger på. Se sidan Följ standarder för tillgänglighet.

    WCAG 2.1 saknar ännu svensk översättning, men för de formuleringar som är identiska i version 2.0 och 2.1 citeras den officiella översättningen av version 2.0. Utdraget kan dock innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

    Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).