Färg och kontrast i webbutiken: testa och rätta

22 oktober 2026

Textkontrast 4,5:1, kanter och ikoner 3:1 och information som bara ges med färg: så mäter du och rättar kontrasten i din webbutik, med exempel.

Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om Lag (2023:254) om vissa produkters och tjänsters tillgänglighet, vänd dig till Post- och telestyrelsen (PTS).

Ljusgrå text på vit bakgrund ser snygg ut på en skärm inomhus. På en mobil i solljus, eller för den som ser sämre, går den inte att läsa. Då försvinner det som kunden behöver för att köpa: priset, lagerstatusen, leveranstiden och felmeddelandet i kassan. Här går vi igenom tre WCAG-kriterier om färg, vilka ställen i en webbutik som oftast brister och hur du mäter och rättar dem.

Tre kriterier om färg

Namnen nedan är hämtade från våra kriteriesidor, som bygger på W3C:s och Digg:s svenska översättningar.

1.4.3 Kontrast (minimum) (nivå AA): text ska ha kontrasten 4,5:1 mot bakgrunden.
1.4.11 Använd tillräckliga kontraster i komponenter och grafik (nivå AA): det som behövs för att se och använda en kontroll ska ha minst 3:1 mot färgerna intill.
1.4.1 Användning av färger (nivå A): färg får inte vara det enda sättet att visa information.

Kontrasten räknas som ett förhållande mellan hur ljusa två färger är, från 1:1 (samma färg) till 21:1 (svart mot vitt). Siffran avrundas inte uppåt: 4,49:1 klarar inte kravet 4,5:1.

Textens kontrast: 4,5:1 och 3:1

Vanlig text ska nå 4,5:1 mot sin bakgrund. Stor text räcker med 3:1. W3C räknar text som stor från 18 punkter, eller 14 punkter i fetstil. I CSS motsvarar det 24 pixlar respektive cirka 18,5 pixlar (W3C räknar 1 punkt som 1,333 pixlar). Brödtext, priser i normal storlek, länkar och text på knappar är alltså nästan alltid vanlig text.

Ett par värden att jämföra, mot vit bakgrund:

#999999 ger 2,84:1 och klarar inte kravet.
#767676 ger 4,54:1 och klarar det precis.
#595959 ger 7,0:1.

Undantagen är få. Text i en logotyp eller ett varumärkesnamn har inget kontrastkrav. Det har inte heller text i en inaktiv komponent, ren dekoration eller text som inte syns. W3C skriver dessutom att låg kontrast på grund av varumärkets färger inte är ett undantag. Ligger butikens profilfärg på 2:1 mot vitt får den inte användas till text.

Knappar, fält och ikoner: 3:1

Kriterium 1.4.11 gäller det som inte är text. Kanten på ett inmatningsfält, en ikon som fungerar som knapp, markeringen som visar vald storlek och fokusramen ska ha minst 3:1 mot färgerna intill. W3C:s exempel: har fältet vit insida, mörk kant och vit sida runt om, är den intilliggande färgen sidans bakgrund utanför fältet. Mät kanten mot den. Inaktiverade kontroller är undantagna.

Ett vanligt fall är en ljusgrå fältram i kassan:

/* #dddddd mot vitt ger 1,35:1, fältet syns knappt */
input { border: 1px solid #dddddd; }

/* #949494 mot vitt ger 3,03:1 */
input { border: 1px solid #949494; }

W3C använder just #949494 mot vitt som exempel på en grå som precis når 3:1. Samma krav gäller fokusmarkeringen när du själv har format den. Mer om den i guiden Tangentbord och synligt fokus i webbutiken.

Information som bara ges med färg

Kriterium 1.4.1 handlar om något annat än kontrast. Det räcker inte att färgerna är tydliga om de är det enda som skiljer två saker åt. Den som är färgblind, ser dåligt eller använder skärmläsare missar skillnaden. Lägg till text, en ikon, en överstrykning eller en annan form.

Fel i kassan: en röd ram runt fältet säger inte vad som är fel. Skriv felmeddelandet som text vid fältet.
Lagerstatus: en grön eller röd prick behöver orden "I lager" eller "Slut".
Storlekar: en slutsåld storlek som bara är gråare ska också ha texten "slutsåld" eller vara överstruken.
Valt alternativ: markera med mer än en bakgrundsfärg, till exempel en tjock ram eller en bock.
Rabattpris: skriv ut vilket pris som gäller, inte bara rött mot grått.
Länkar i löptext: se nedan.

Länkar som bara skiljer sig i färg

Är en länk i löptext markerad bara med en annan färg, utan understrykning, gäller en särskild regel. W3C:s teknik G183 anger att länkfärgen då ska ha minst 3:1 mot färgen på den omgivande texten, och dessutom nå 4,5:1 mot bakgrunden som all annan text. Tekniken är ett sätt att uppfylla kriteriet, inte ett krav. W3C skriver att man ändå kan överväga ett ytterligare sätt att visa länken, som understrykning eller fetstil, eftersom mörka färger är svåra att skilja åt även vid 3:1. Det är det enklaste: understruken länk i löptext behöver ingen kontrast mot den omgivande texten.

.produkttext a { text-decoration: underline; }

Vanliga ställen i en webbutik

Rabattpriset i rött. Rent rött (#ff0000) mot vitt ger 3,99:1 och klarar inte 4,5:1. En mörkare röd som #d00000 ger 5,7:1.
Vit text på ljusa knappar. Vitt på orange (#ffa500) ger 1,97:1.
Text direkt på produktbilder och kampanjbanners. Kontrasten ändras över bilden. Ge texten en egen mörk eller ljus bakgrund.
Platshållartext i fält. Texten i ett fält är text och ska nå 4,5:1. Platshållaren ersätter dessutom inte en etikett.
Ljusgrå hjälptext om frakt, leveranstid och artikelnummer.
Knappar och ikoner i varumärkets färg. Mät dem, som alla andra färger.
Cookierutans val "Bara nödvändiga" i blekgrått bredvid en tydlig knapp. Läs mer i Cookierutan och tillgänglighet.

Så mäter du

Ta reda på två färger: textens och bakgrundens. I webbläsaren högerklickar du på texten, väljer Inspektera och läser färgen under Styles. Många webbläsares utvecklarverktyg visar kontrastvärdet när du klickar på färgrutan.
Skriv in färgerna i vårt kontrastverktyg. Det räknar kontrasten, visar den avrundad nedåt och säger om färgerna klarar normal text, stor text och grafik på nivå AA, och även den högre nivån AAA. Klarar paret inte 4,5:1 föreslår verktyget en färg med samma kulör som gör det, genom att bara ändra ljusheten. Verktyget räknar i din webbläsare och sparar ingenting.
Byt färgen i temat eller i butikens egen CSS och mät igen.

Var färgen ställs in beror på temat och plattformen. Vi har inte verifierat vad Shopifys, WooCommerces eller Wix hjälpsidor säger om detta, så vi anger ingen exakt väg här. Titta efter färginställningar i temats redigerare eller fråga den som byggt temat.

Verktyget mäter ett färgpar åt gången. Det ser inte text på bilder, toningar eller färger som ändras när pekaren är över dem. De fallen får du granska för hand.

Vad testerna kontrollerar

AccessAudits gratis test läser källkoden på upp till fem sidor och kontrollerar inte kontrast. Månadsgranskningen kör butiken i en riktig webbläsare med axe-core och kontrollerar bland annat kontrasten på upp till åtta länkar och knappar när pekaren är över dem och när de har fokus. Kanter på fält och information som bara ges med färg (1.4.11 och 1.4.1) går inte att avgöra automatiskt, och i checklistan står de som kontroller du gör själv.

Gör så här

Mät texten du använder oftast: brödtext, pris, rabattpris, hjälptext och text på knappar. Alla ska nå 4,5:1.
Mät kanten på fälten i kassan. Den ska nå 3:1.
Mät fokusramen och markeringen av valt alternativ. De ska nå 3:1.
Gå igenom varukorg och kassa och leta efter information som bara visas med färg. Lägg till text.
Understryk länkar i löptext.
Lägg texter på bilder på en egen bakgrund.
Mät om efter ändringen och testa sidan på mobilen utomhus.

Börja med kassan och knappen "Lägg i varukorg". Det är där ett kontrastfel kostar mest.

AccessAudits gratis test på butik.nightwave.se/tillganglighet kontrollerar upp till fem sidor i källkoden. Vill du ha löpande kontroll av kontrast, tangentbord och resten av butiken finns ett abonnemang för 1 990 kr per månad exklusive moms för upp till 30 sidor. Det är teknisk granskning mot WCAG, inte juridisk rådgivning.