Kontraster

Vad säger lagen om kontraster?

Kontrastvärdet ska vara minst 3:1 i komponenter och grafik.

Kontraktsvärde mellan text och bakgrund.

Utdrag från Webbriktlinjer.

WCAG. 1.4.11 Använd tillräckliga kontraster i komponenter och grafik (nivå AA).

För nivå AA gäller:

• Text 4,5:1
• Stor text eller annan textstil 3:1 (18 pt eller 14 pt fetstil)

För nivå AAA gäller:

• Text 7:1
• Stor text eller annan textstil (18 pt eller 14 pt fetstil) 3:1

Utdrag från WCAG.

Goda kontraster är viktigt

Det är viktigt för läsbarheten och förståelsen att kontrasten mellan komponenter och grafik samt kontrasten mellan bakgrund och text uppnår goda kontrastvärden. Detta påverkar hur personer upplever ditt dokument eller din webbplats. Särskilt viktigt är goda kontrastvärden för personer med nedsatt synförmåga.

Det finns flera gratisverktyg du kan använda för att mäta kontraster, och här är några exempel:

• Color Contrast Checker extern länk
• Adobe Color extern länk

Använd tillräckliga kontraster i komponenter och grafik

Du behöver säkerställa att du uppnår goda kontrastvärden i de flesta former av grafiska element. Det finns några undantag och speciella regler kring exempelvis logotyper. Du hittar undantagen i WCAG.

För att exemplifiera tillräckliga kontraster i komponenter och grafik använder vi oss av ett cirkeldiagram från Webbriktlinjer.

Bild från webbriktlinjer.se.

För att uppnå tillräckliga kontraster i ett cirkeldiagram behöver du ta hänsyn till flera olika saker. Du behöver tänka på kontrasten mellan varje tårtbit, bakgrund och eventuell text på tårtbitarna.

Det första vi rekommenderar för att öka kontrasterna i cirkeldiagram är att lägga in en skiljelinje mellan de olika tårtbitarna. Bara genom denna enkla justering kommer läsbarheten förbättras markant.

Vi rekommenderar även att alltid placera text utanför tårtbiten. Har du texten i tårtbitarna blir det ytterligare en komponent du behöver testa, och det är inte säkert att den textfärg du vill ha uppnår goda kontrastvärden med alla tårtbitar.

Använd tillräcklig kontrast mellan text och bakgrund

Vi rekommenderar att du undviker att placera text på bild men ibland förstår vi att det önskas. Detta beror på att vi i våra användartester ofta ser att våra testpersoner har svårt att läsa texten för att bilden ”tar över” eller att texten upplevs ”i vägen” för bilden. Vad gäller text på färgad bakgrund så är det inte optimalt men inget vi anmärker på så länge kontrasterna mellan text och bakgrund uppnår goda värden.

Du kan skriva text på en bild eller en färgad bakgrund men då behöver du vara extra uppmärksam på kontrasterna.

Skriver du text på bild behöver du tänka över ditt bildval och placeringen av texten. Har du en bild med en blå himmel och en stor trädkrona bör du placera texten på himmel och inte på trädkronan. Trädkronan kan komma att upplevas rörig och då blir texten svårläst. Himmeln är lugnare för ögat att ta in och texten blir då mer lättläst.

Har du en färgad bakgrund behöver du tänka på att välja en lugn färg som inte tar för mycket energi att titta på. Ett exempel på en färg du bör undvika är klarröd.

Gemensamt för om du ha en bild eller färgad bakgrund är att du behöver ha en extra stor teckensnittsstorlek på din text.

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