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

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:

På 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.

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.

Fördjupning och relaterade riktlinjerLänk hit

• Använd mönster som komplement till. färgskillnad (W3C)
• R126. Använd tillräcklig kontrast mellan text och bakgrund
• R156. Använd tillräckliga kontraster i komponenter och grafik
• R140. Markera tydligt vilket fält eller element som är i fokus
• R34. Gör länkar, klickbara ytor och menyer användbara för alla

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.