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äckligt med 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? 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. 

De senaste åren har det också delvis förekommit en trend med mer matta färgskalor, och företag som som arbetar med 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.

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äcklig 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. 

En synnedsättning kan vara permanent men också temporär på grund av exempelvis en tillfällig skada, eller migrän. Funktionsnedsättningar kan också vara situationsbaserat det vill säga att omgivningen påverkar. För synen skulle det kunna vara att försöka titta på en skärm utomhus.

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

Har du ett privat företag finns inget krav på att ditt färgval ska ha tillräcklig kontrast och vara tillgängligt. Men varför skulle du inte vilja vara inkluderande och nå så många som möjligt?

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

Vägledning för webbutveckling hos webbriktlinjer.se

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 mängd kontrast 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 även alla andra att uppnå.

Tre exempel med färgad bakgrund och ett kryss i en annan färg som har dålig kontrast.
Färgkombinationer 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

Mitt företag behöver utvecklas, därför kommer mina gratis månadsmejl under 2025 att fokusera på vad jag kan göra för att det ska ske. Jag delar med mig av vad jag gör, mina tankar och hur jag försöker att balansera den personliga hållbarheten. Följ med och låt dig inspireras!

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

Jag är grafisk designer och kommunikatör som hjälper företag och organisationer att kommunicera med mindre påverkan på klimat och miljö. Jag tror på marknadsföring och företagande utan att sälja sin själ, och drömmer om livet på landet. 

Senaste inlägg
BLOGGKategorier
Du kanske också vill läsa
Tryckpress

Att välja tryckeri

Ska du trycka en produkt? Välj ett tryckeri som arbetar för att minska sin egen och din trycksaks miljö- och klimatpåverkan. Det viktigaste för en trycksaks klimat- och miljöpåverkan ligger i materialvalet, men vilket tryckeri du...

Företagswebbplats – vad behöver du veta?

Att skapa en ny webbplats är ett stort arbete, framför allt om du som jag gillar kontroll över detaljerna. Här kommer tips för dig som funderar på en webbplats för ditt företag eller organisation. Jag går...
Ett pixligt L och ett utan pixlar.

Vektoriserad logotyp – vad är det tryckeriet ber om?

Du ska trycka upp din logotyp på en profilprodukt eller kanske en skylt men då säger tryckeriet att de vill ha en vektoriserad logotyp för att kunna trycka. Kanske säger de att de behöver en eps....

Få mejl om företagande

Mitt företag behöver utvecklas, därför kommer mina gratis månadsmejl under 2025 att fokusera på vad jag kan göra för att det ska ske. Jag delar med mig av vad jag gör, mina tankar och hur jag försöker att balansera den personliga hållbarheten.

Följ med och låt dig inspireras!

Ett kuvert som blir ett pappersflygplan