Färgkontrast och WCAG: vad är kravet och hur mäter du det?

Kort svar. WCAG nivå AA kräver ett kontrastförhållande på minst 4,5:1 mellan text och bakgrund för vanlig text, och 3:1 för stor text och grafiska element (ikoner, fältramar). För låg kontrast är det överlägset vanligaste tillgänglighetsfelet i nätbutiker — och kan som tur är ofta åtgärdas i hela temat på en gång. Dessutom går det att mäta 100% exakt med programvara, så det finns inget att diskutera.

Varför är kontrast så viktigt?

Ljusgrå text på vitt ser stilrent ut på din skärm, men är svårläst för personer med nedsatt syn, för äldre besökare och för alla som tittar på en telefon i starkt solljus. En stor del av dina kunder tillhör minst en av de grupperna. Dålig kontrast kostar dig alltså bokstavligen läsbarhet — och därmed försäljning.

Vilka är de exakta WCAG-kontrastkraven?

Standarden skiljer på textstorlek och typ av element. Ju mindre bokstäver, desto skarpare måste kontrasten vara:

• Vanlig text (mindre än 24px, eller 18,66px i fetstil): minst 4,5:1.
• Stor text (från 24px, eller 18,66px i fetstil — det vill säga 18pt / 14pt bold): minst 3:1.
• Grafiska komponenter (ikoner, fältramar, aktiva knappramar): minst 3:1 i förhållande till angränsande färger (WCAG 1.4.11).

Kontrast uttrycks som ett förhållande: 1:1 är ingen kontrast, 21:1 är rent svart på vitt. Några vanliga kombinationer:

Hur mäter du kontrasten själv?

Du behöver varken gissa eller räkna med formler. Det finns tre tillförlitliga sätt:

1. En automatiserad skanning (rekommenderas). Verktyg som Seviranta beräknar kontrastvärdet för varje textelement på sidan i ett svep och markerar exakt kodrad för överträdelserna — inklusive det uppmätta värdet bredvid kravet.
2. Webbläsarens utvecklarverktyg. Högerklicka på text i Chrome eller Edge → "Inspektera"; färgväljaren visar ofta direkt kontrastförhållandet och WCAG-statusen.
3. En manuell kontrastkontroll. Fyll i de två hex-koderna så får du förhållandet. Praktiskt i designfasen, men tidskrävande för en hel live-sajt.

Hur åtgärdar du kontrastfel effektivt?

Det fina med kontrastfel: de styrs nästan alltid centralt. I Shopify, WooCommerce eller Magento är färgerna kopplade till globala variabler i ditt tema. Gör text- eller bakgrundsfärgen en nyans mörkare eller ljusare tills förhållandet stämmer, så uppfyller du kontrastkravet för hela nätbutiken på en gång.

Börja med din konverteringstratt: texten på "Lägg i varukorgen"- och "Till kassan"-knapparna, dina prisetiketter, menyposter och varningarna i kassan. Där finns den största vinsten. Detta är för övrigt ett av de 10 vanligaste tillgänglighetsfelen.

Varför löser en tillgänglighetswidget inte detta?

Många företagare hoppas kunna fixa kontrasten med en overlay-widget och dess "högkontrastknapp". Det räcker varken tekniskt eller juridiskt: tillsynsmyndigheter och AI-skrapor kontrollerar standardläget i din källkod. Uppfyller din CSS inte 4,5:1, så uppfyller du inte kravet — ett tillfälligt JavaScript-lager ändrar inte det. Varför en overlay-widget inte skyddar dig går djupare in på detta. Den enda hållbara vägen är att justera färgerna i ditt eget tema.

Vad förändras med WCAG 3.0 (APCA)?

I de kommande WCAG 3.0-riktlinjerna ersätts dagens matematiska kontrastformel av APCA (Advanced Perceptual Contrast Algorithm). APCA stämmer bättre överens med hur det mänskliga ögat faktiskt uppfattar kontrast — det tar hänsyn till typsnitt, tjocklek och sammanhang, i stället för enbart ljusheten hos två färger. Lägger du dig stadigt på 4,5:1-kravet i WCAG 2.1/2.2 i dag, står du väl förberedd även vid den övergången.

Se var din webbplats står

Nyfiken på vilka färger på din webbplats som ännu inte uppfyller kraven? Skanna en sida gratis. Du ser för varje ställe det uppmätta kontrastförhållandet bredvid kravet, med din webbplats verkliga färger — på under 60 sekunder, utan konto.