WCAG kontrastkrav: nivå AA och AAA förklarade

WCAG kontrastkrav avgör om din webbplats är läsvänlig för alla besökare, oavsett synförmåga. En kontrastkvot mäter skillnaden mellan textfärg och bakgrundsfärg. Ju högre kvot, desto lättare är texten att läsa — särskilt för personer med nedsatt syn eller färgblindhet.

WCAG 2.2, som blev en W3C-rekommendation den 5 oktober 2023, sätter minimikrav på kontrastkvoten för text och grafiska komponenter på webbplatser. Kraven delas in i nivåerna A, AA och AAA, där AA är den nivå de flesta svenska webbplatser ska uppfylla.

Vad är en kontrastkvot?

En kontrastkvot uttrycks som ett tal, till exempel 4,5:1. Första talet är ljusstyrkan i den ljusare färgen, det andra i den mörkare. Vit text på svart bakgrund ger 21:1, medan ljusgrå text på vit bakgrund kan hamna nere på 1,5:1 — långt under vad som är tillgängligt.

Ju lägre kontrastkvot, desto svårare är det att särskilja texten från bakgrunden. För den som har nedsatt syn, grå starr eller färgblindhet kan låg kontrast innebär att innehållet helt enkelt inte går att läsa.

WCAG 2.2 nivå AA — minimikraven

Nivå AA är den nivå som de flesta offentliga och privata webbplatser i Sverige bör uppfylla. Enligt WCAG 2.2 krävs följande kontrastkvoter på nivå AA:

4,5:1 för normal text
3:1 för stor text och grafiska komponenter, till exempel ikoner och knappar

Normal text är brödtext som inte uppfyller kriterierna för stor text. Stor text får lägre krav eftersom större bokstäver är lättare att särskilja även med svagare kontrast.

WCAG 2.2 nivå AAA — skärpta krav

Nivå AAA är den högsta tillgänglighetsnivån och ställer skärpta krav:

7:1 för normal text
4,5:1 för stor text

Nivå AAA är inte ett krav för alla webbplatser, men är en bra målbild för sajter som vänder sig till många äldre eller personer med funktionsnedsättning.

Vad räknas som stor text?

Inte all stor text får samma låga krav. Enligt WCAG räknas text som stor om den är:

minst 24 pixlar, eller
minst 18,66 pixlar i fetstil (motsvarande 18 respektive 14 punkter)

Endast text som uppfyller något av dessa kriterier får bedömas med den lägre kontrastkvoten 3:1 på nivå AA. All annan text måste nå 4,5:1.

Grafiska komponenter och användargränssnitt

Kontrastkraven gäller inte bara ren text. Grafiska komponenter som är nödvändiga för att förstå innehållet — till exempel ikoner, diagram, knappar och formulärfält — måste också ha en kontrastkvot på minst 3:1 mot bakgrunden på nivå AA.

Det innebär att en grå ikon på en vit bakgrund kan vara oläslig även om brödtexten i sig har tillräcklig kontrast. Alla interaktiva element behöver synas tydligt.

Lagen och tillgänglighet i Sverige

Lagen om tillgänglighet till digital offentlig service hänvisar till den europeiska standarden EN 301 549, som bygger på WCAG nivå AA. För offentliga aktörer innebär det att webbplatser och mobila appar ska uppfylla kraven på nivå AA.

Även privata företag som bedriver e-handel eller erbjuder banktjänster omfattas av lagen om vissa produkter och tjänsters tillgänglighet. Kontrast är en av de mest grundläggande delarna av tillgänglighet.

Vanliga misstag som sänker kontrasten

Det är lätt att hamna under gränsen, även med goda avsikter. Här är några vanliga problem:

Ljusgrå brödtext på vit bakgrund — ofta under 3:1
Placeholder-text i formulärfält som är för blek
Länkar som endast skiljer sig genom färg, utan kontrast till omgivande text
Knappar och ikoner i nyanser som smälter samman med bakgrunden
Text över bakgrundsbilder där kontrasten varierar

Så testar du kontrasten på din webbplats

Du kan kontrollera kontrastkvoten själv genom att ange hex-koderna för textfärg och bakgrund i en kontrastkontroll. Verktyget beräknar kvoten och visar om kombinationen klarar nivå AA och AAA.

Testa alltid både brödtext, rubriker, länkar, knappar och formulärfält. Tänk också på att kontrasten kan se annorlunda ut på olika skärmar och i olika ljusförhållanden.

Vanliga frågor om WCAG kontrastkrav

Gäller kraven alla webbplatser?

Nivå AA är ett lagkrav för offentliga webbplatser i Sverige. Privata sajter omfattas i viss mån av tillgänglighetslagen, men kontrast är ändå en bra målbild för alla som vill nå fler besökare.

Måste alla färger på sajten uppfylla kraven?

Inte all text omfattas. Ren dekorativ text, logotyper och inaktiva komponenter kan undantas. Men allt som är nödvändigt för att använda sajten bör uppfylla nivå AA.

Hur vet jag om min kontrast räcker?

Ange färgerna i en kontrastkontroll och jämför med kraven: 4,5:1 för normal text och 3:1 för stor text på nivå AA.

Vad händer om kontrasten är för låg?

Besökare med nedsatt syn kan svårt eller inte alls kunna läsa innehållet. För offentliga aktörer kan det också innebära att man inte följer tillgänglighetslagen.

Skillnaden mellan AA och AAA?

AA kräver 4,5:1 för normal text, medan AAA kräver 7:1. AAA är den högsta nivån och ett frivilligt mål för den som vill vara extra tillgänglig.