Hoppa till innehållet
Nightwave

Gratis verktyg

Kontrastkontroll för text och bakgrund.

Skriv in färgerna så ser du kontrasten och om den klarar WCAG 2.1 nivå AA, som webbutiker ska uppfylla enligt tillgänglighetslagen. Klarar färgerna inte kraven får du förslag på en närliggande färg som gör det.

Hexkod, till exempel #1a1a1a.

Hexkod, till exempel #1a1a1a.

Fri frakt över 499 kr. Leverans inom 2-4 vardagar. Normal text, 16 pixlar.

Stor text, 24 pixlar

Fet stor text, 19 pixlar

Lägg i varukorgen

Kontrast

3,45:1

Normal text, nivå AA (minst 4,5:1, WCAG 1.4.3)
Klarar inte
Stor text, nivå AA (minst 3:1, WCAG 1.4.3)
Klarar
Ikoner, fält och knappkanter (minst 3:1, WCAG 1.4.11)
Klarar
Normal text, nivå AAA (minst 7:1, WCAG 1.4.6)
Klarar inte
Stor text, nivå AAA (minst 4,5:1, WCAG 1.4.6)
Klarar inte

Förslag på textfärg: #767676 (4,54:1)

Förslag på bakgrundsfärg: #232323 (4,55:1)

01 · Kraven

Så läser du resultatet.

Gränserna kommer från WCAG 2.1, som standarden EN 301 549 hänvisar till för webbinnehåll.

  • Normal text: 4,5:1

    Brödtext, priser, länkar och texter på knappar. Kravet på nivå AA i WCAG 1.4.3, som webbutiker ska klara.

  • Stor text: 3:1

    Text från 24 pixlar, eller från cirka 18,7 pixlar i fetstil (18 respektive 14 punkter). Rubriker och stora priser hamnar ofta här.

  • Grafik och gränssnitt: 3:1

    Ikoner som behövs för att förstå sidan, kanter på fält och knappar och fokusmarkeringen, mot det som ligger intill (WCAG 1.4.11).

  • AAA: 7:1 och 4,5:1

    Den högre nivån krävs inte av lagen, men ger bättre läsbarhet, till exempel i starkt ljus på mobilen.

02 · I webbutiker

Vanliga kontrastfel.

Det här är de ställen där kontrasten oftast brister i webbutiker. Kontrollera dem först.
Omfattas din webbutik av lagen?
  • Ljusgrå platshållartext i sökfältet och i kassan.
  • Överstrukna ordinarie priser och små ljusgrå texter om frakt och leveranstid.
  • Text ovanpå produktbilder och kampanjbanners, där kontrasten varierar över bilden.
  • Vit text på knappar i ljusa färger, till exempel orange, gult eller ljusgrönt.
  • En fokusmarkering som knappt syns när man navigerar med tangentbordet.
  • Kanter på formulärfält som är så ljusa att fältet inte syns.

Vanliga frågor.

Svaren bygger på WCAG 2.1 och lagen (2023:254).
Hur räknas kontrastförhållandet?
Med färgernas relativa luminans enligt WCAG: (L1 + 0,05) / (L2 + 0,05), där L1 är den ljusare färgen. Resultatet går från 1:1, samma färg, till 21:1, svart mot vitt. Värdet ska inte avrundas uppåt: 4,49:1 klarar inte kravet 4,5:1.
Vilken nivå måste en webbutik klara?
WCAG 2.1 nivå AA, via standarden EN 301 549, om webbutiken omfattas av lagen (2023:254). För text betyder det minst 4,5:1, och minst 3:1 för stor text. Ikoner, kanter på fält och knappar och fokusmarkeringen ska ha minst 3:1 mot det som ligger intill.
Har logotyper och inaktiva knappar något kontrastkrav?
Nej. Text som är en del av en logotyp eller ett varumärke har inget kontrastkrav enligt WCAG 1.4.3, och inte heller text i inaktiva knappar, ren dekoration eller text som inte syns.
Räcker det att kontrollera färgerna här?
Kontrollen visar om ett färgpar klarar kraven. På en riktig sida ligger text ofta på bilder och toningar, eller byter färg när man håller muspekaren över den. Månadsgranskningen i AccessAudit mäter kontrasten på alla element på upp till 30 sidor i en riktig webbläsare.
Sparas färgerna?
Nej. Allt räknas i din webbläsare och inget skickas till oss. Färgerna står i adressen, så att du kan dela resultatet med en länk.

Hur är kontrasten i resten av butiken?

Gratistestet visar de viktigaste bristerna på några sekunder. Med abonnemanget (1 990 kr/mån exkl. moms) mäter vi kontrasten på upp till 30 sidor i en riktig webbläsare varje månad.
Testa butiken gratisLäs om abonnemanget

AccessAudit är en teknisk granskning mot WCAG 2.1 nivå AA, den nivå som standarden EN 301 549 hänvisar till för webbinnehåll. Automatiska tester hittar inte alla brister, och tjänsten är inte juridisk rådgivning. Vi kan inte intyga att en webbplats uppfyller lagen.