Färgval med tillräcklig kontrast

Kontrast
Rosa, blått eller kanske grönt? Färgvalen för din grafiska profil eller din grafik är oändliga. Men se till att ge färgerna tillräcklig kontrast, så att så många som möjligt kan ta del av ditt innehåll.

Idag finns verktyg så att du enkelt kan skapa grafik i exempelvis Canva. Kanske bygger du din egen webbplats? Eller använder AI, de tekniska förutsättningarna ger möjlighet till kreativitet. Men glöm inte kontrasten mellan dina färgval så att viktig information blir läsbar även för den som har en synnedsättning. 

Kontrast handlar om skillnaden mellan ljusa och mörka delar.

Hög kontrast: Svart och vitt bredvid varandra, eller starka färger.
Låg kontrast: Mjuka övergångar, liknande färgtoner exempelvis ljusgrått mot vitt.

De senaste åren har det också förekommit en trend med matta färgskalor, och företag som arbetar inom klimat- och miljöområdet vill gärna ha en naturlig och mjuk färgskala. Detta är något som kan försvåra att uppnå en tillräcklig kontrast, då dessa har låg kontrast.

Färgval och tillgänglighet

För att en text ska vara lätt att läsa och tillgänglig även för de med en synnedsättning bör det finnas tillräckligt hög kontrast mellan text- och bakgrundsfärg. Eller i informationsbärande grafik som diagram eller navigation på en webbplats.

Att arbeta med tillgänglighet handlar om att vara inkluderande och inte diskriminerande mot personer med funktionsnedsättning. Du vet förmodligen inte om dessa ingår i din målgrupp, och det finns betydligt fler än du kanske tror som påverkas av ditt färgval. 

Cirka 8 procent av alla män och 1 procent av alla kvinnor beräknas ha ett defekt färgseende. 

Begreppet färgblindhet är något missvisande då personer oftast ser färger men enskilda färger kan vara förvrängda. Och kontrasten mellan olika färger kan därför bli svårare att uppfatta.

Synnedsättningar kan delas in i tre olika grupper:

  • Permanent – exempelvis vid medfödd blindhet eller sjukdomar.
  • Temporär – exempelvis på grund av en tillfällig skada som ögoninflammation. Eller av migrän som påverkar synfältet, trötthet eller påverkan av läkemedel.
  • Situationsbaserad – miljön eller omgivningen begränsar tillfälligt synen, exempelvis att läsa från en skärm i starkt solljus. Eller att vistas i en mörk lokal eller att bländas av reflekterande ytor.

Situationsbaserade funktionsnedsättningar kan drabba vem som helst, inte bara personer med en medicinsk diagnos. Dessa visar hur viktig tillgänglig design är för alla människor i olika situationer.

Måste mitt färgval vara tillgängligt?

Det korta svaret är ja.

Offentlig verksamhet som kommuner och myndigheter har lagkrav på sig att vara tillgängliga och måste uppfylla kraven på kontrast enligt Webbtillgänglighetsdirektivet. 

Från och med juni 2025 omfattas även privata företag av krav på tillgänglighet, när den Europeiska tillgänglighetslagen (EAA) börjar gälla. Den omfattar privata företag som har digitala tjänster eller produkter exempelvis appar och webbplatser.

Företag måste då se till att deras tjänster uppfyller tillgänglighetskrav, liknande WCAG 2.1 (webbriktlinjer för digital tillgänglighet). Små företag som har färre än 10 anställda eller omsätter max 2 miljoner euro i kan i vissa fall undantas från de nya EAA-kraven. Det kan dock fortsatt anses som diskriminering.

Så det bästa är att uppfylla kraven, för varför skulle du inte vilja vara inkluderande och nå så många som möjligt?

Så mäts kontrast

När du tagit fram ett urval med färger du vill arbeta med kan du kan lätt mäta kontrasten mellan två färger. För att förstå resultatet behöver du veta lite mer om hur du ska tolka en mätningen. 

Att mäta kontrast har blivit en del av en webbstandard för tillgänglighet (WCAG). Standarden rekommenderar att färger på webbplatsen ska uppfylla en viss färgkontrast för att vara tillgänglig. Det är en standard för webbplatser men användbar för alla typer av digitala produkter och bilder med grafik och text.

Kontrasten mellan två färger har ett siffervärde vilket omvandlas till fyra olika nivåer för kontrast: ej godkänd, A, AA, AAA. Exempelvis nivån AA för liten text kräver ett siffervärde på 4,5:1. Du behöver dock inte hålla reda på siffrorna utan det viktigaste är att du ser vilken A-nivå du når eller inte når. För att skapa god kontrast mellan text och bakgrund har offentlig verksamhet kravet på sig att uppnå minst nivå AA. Något jag rekommenderar alla att uppnå.

Tre exempel med färgad bakgrund och ett kryss i en annan färg som har dålig kontrast.
Färgkombinationer med låg kontrast som inte når AA-nivå.

För till exempel grafiska element som fyller en funktion till exempel statistik eller delar av navigering på en webbplats bör även dessa uppfylla AA nivån. Rent dekorativa element måste inte uppfylla kravet.

Testa kontrasten

Det finns webbplatser där du gratis och enkelt kan testa kontrasten mellan färger. Det du behöver få fram är hexkoden för de färger du vill mäta. Hexkoden anges med ett # och består sedan av sex siffror eller bokstäver.

Det kan exempelvis se ut så här #2F1981. I majoriteten av de program där du kan tänkas arbeta med färger kommer du att hitta denna kod. Till exempel i Office, Photoshop, Canva eller på din webbplats.

När du mäter kontrast mäter du två olika färger mot varandra. Detta innebär att desto fler färger du valt desto fler möjliga kombinationer finns det som du behöver testa.

Exempel med beige bakgrund och svart text med tummen upp och vit text med tummen ned.
Glöm inte bort att även testa med svart och vit text om du använder det. Ett vanligt förekommande fel är användandet av vit text på för ljus bakgrund.

Använd ett webbverktyg och testa kontrasten

När du hittat koderna för dina hexfärger besök en webbplats där du kan mäta kontrast. Här är tre olika:

Samtliga sidor fungerar på liknande sätt du fyller i en hexfärg som ska vara bakgrund och en som ska vara text.

Beroende på vilken sida du använder för att mäta kontrast kan resultatet se lite olika ut. Kontrast kan presenteras som ett värde i siffror men det viktigaste du vill veta är vilken A-nivå som färgerna tillsammans når. Rekommendationen är som sagt att nå nivå AA. Oftast visas också resultatet som grönt för godkänt eller rött för icke godkänt.

Så sätt igång och testa alla variationer av dina färger och se vilka som får godkänt och inte. På den första länken kan du också få förslag som liknar det du mätt men uppfyller kraven på kontrast.

Få mejl om företagande

Under 2025 fokuserar jag på att utveckla Något kommunikation. I mina månadsmejl delar jag med mig av vad jag testar, vad som fungerar eller inte fungerar och hur jag försöker bygga ett företag som håller över tid, och är hållbart för mig som företagare. Vill du följa med på resan?

Mitt färgval har inte tillräcklig kontrast

Om dina färger inte når upp till AA behöver du kanske göra något åt saken. Vad du behöver göra kan variera. Använder du många färger kommer du få acceptera att visa kombinationer av färger inte kan användas tillsammans. Se till att det finns några användbara kombinationer dock. Misslyckas du på alla behöver du nog tänka om ditt färgval.

Ibland kan det räcka med att göra mindre justeringar av dina valda färger. Den ena kanske behöver bli lite ljusare medan den andra lite mörkare för att kontrasten ska bli tillräcklig.

Dokumentera gärna ned vilka som fungerar och inte i till exempel en grafisk profil.

Schema som visar 5 färger och vilka kombinationer som uppfyller kraven.
Exempel på dokumentation över kontrast från grafisk profil för ASSITEJ Sverige.

Lycka till med att skapa ett kontrastrikt och tillgängligt färgval! Vill du få hjälp att ta fram eller justera ditt företags eller organisations färger för att skapa bättre kontrast tveka inte att kontakta mig.

Foto av:  Joel Staveley / Unsplash

Om Emil

Du vill göra skillnad för människor, klimatet eller miljön. Men att formulera det, paketera det och få det att nå fram känns svårt. Jag hjälper dig att bygga en webbplats, hitta ett visuellt uttryck eller få fram de rätta orden.

Mina tjänster
Senaste inlägg
BLOGGKategorier
Du kanske också vill läsa
Logotyp Elementor

Vad är Elementor?

Har du snubblat över namnet Elementor i samband med en webbplats? Elementor är en så kallad page-builder, ett verktyg för att bygga och redigera sidor på en webbplats....
Frågetecken

Förbättra ditt företags hemsida med rätt frågor

Första intrycket är viktigt även när det gäller din webbplats. Du kanske inte får en andra chans att förvandla en besökare till en kund. Därför är det viktigt att det är tydligt vad ditt företag gör...
Tre olika bilder på keramik i gröna nyanser.

Moodboard – och varför den kan vara ett problem

En moodboard är ett sätt att samla inspiration och få idéer, men också presentera riktningen för en design för andra. Den är ett inspirationskollage av bilder. Ett bra verktyg för den designer som skapar det, men...

Få mejl om företagande

Under 2025 fokuserar jag på att utveckla Något kommunikation. I mina månadsmejl delar jag med mig av vad jag testar, vad som fungerar eller inte fungerar och hur jag försöker bygga ett företag som håller över tid, och är hållbart för mig som företagare.

Vill du följa med på resan?

Ett kuvert som blir ett pappersflygplan