Kontrast och läsbarhet — siffrorna som gäller.

Det vanligaste designfelet vi ser på svenska småföretagssajter är inte fult. Det är ljusgrå text på vit bakgrund, för att det ser stilrent ut i designverktyget på en ljusstark skärm i ett mörkt rum.

Sedan läser någon sidan i en bil i solsken på en fyra år gammal telefon och ser ingenting.

Kraven, i siffror

Kontrastförhållande mäts från 1:1 (osynligt) till 21:1 (svart på vitt). Gränsvärdena nedan kommer från WCAG nivå AA; WebAIM:s genomgång av kontrastkravet förklarar hur förhållandet räknas fram.

Vad	Krav (AA)	Strängare (AAA)
Brödtext	4,5:1	7:1
Stor text — ≥ 24 px, eller ≥ 18,66 px fetstil	3:1	4,5:1
Knappkanter, ikoner, fältgränser, diagram	3:1	—
Logotyper och rent dekorativ grafik	Inget krav	—

AA är den nivå lagstiftningen bygger på och den du ska sikta på. AAA är rimligt för sidor med mycket löptext.

Varför det inte längre är frivilligt

Två saker har hänt:

• Offentlig sektor i Sverige omfattas sedan 2019 av lagen (2018:1937) om tillgänglighet till digital offentlig service, som kräver WCAG 2.1 nivå AA. Det gäller myndigheter, kommuner, regioner och en del offentligt finansierad verksamhet — Digg är tillsynsmyndighet.
• Tillgänglighetsdirektivet (EAA, 2019/882) trädde i kraft i juni 2025 och breddar kraven till en rad privata tjänster mot konsument — e-handel, banktjänster, transport, biljettbokning med mera. Mikroföretag med färre än tio anställda och begränsad omsättning är delvis undantagna för tjänstedelen.

Även om just ditt företag skulle falla utanför är kontrast den billigaste tillgänglighetsåtgärd som finns: den ändrar en handfull färgvärden och kostar ingenting i design.

De andra läsbarhetssiffrorna

Kontrast är den som mäts. Tre till betyder nästan lika mycket:

Egenskap	Riktvärde	Varför
Textstorlek, brödtext	16 px eller mer	Under 16 px zoomar mobila webbläsare in vid fältfokus
Radavstånd	1,5× textstorleken	Ögat hittar tillbaka till nästa rads början
Radlängd	50–75 tecken	Längre rader tappar man bort sig på; kortare hackar sönder läsningen
Styckeavstånd	≥ 1,5× radavståndet	Ger ögat en viloplats

Radlängden är den som oftast går fel på en bred skärm. Text som löper över hela en 27-tumsskärm är oläsbar oavsett hur bra kontrasten är. Sätt en maxbredd på textspalten — kring 70ch är en bra utgångspunkt.

Fem fel att titta efter på din egen sajt

1. Ljusgrå brödtext. Färger som #999 eller #aaa på vitt underkänns alltid. #767676 är den ljusaste grå som klarar 4,5:1 mot vitt — kontrollera själv i WebAIM Contrast Checker.
2. Text ovanpå foto. Kontrasten varierar över bilden. Lägg en mörkläggande övertoning under texten, eller flytta ut texten.
3. Platshållartext som etikett. Platshållare renderas ljusgrå av webbläsaren och underkänns nästan alltid. Använd riktiga etiketter ovanför fältet.
4. Länkar som bara skiljs med färg. Färgblindhet drabbar ungefär åtta procent av män. Stryk under länkar i löptext.
5. Inaktiverade knappar utan förklaring. De får vara lågkontrast, men då måste det stå någonstans varför knappen inte går att trycka på.

Mät din egen sajt på fem minuter

1. Öppna sidan i Chrome, högerklicka på texten → Inspektera.
2. Klicka på färgrutan bredvid color i stilpanelen. Kontrastförhållandet står utskrivet, med bockar för AA och AAA.
3. Gör om det på: brödtext, dämpad text, knapptext, länkar och sidfot. Sidfoten är nästan alltid sämst — den är designad för att vara diskret.
4. Kör sedan Lighthouse-fliken → Tillgänglighet för en helsvep. Den fångar kontrast, saknade fältetiketter och rubriknivåer som hoppar.

Går du igenom de fyra stegen hittar du i regel tre till fem fel på en vanlig småföretagssajt, och de flesta är lösta med en ändrad färgkod.