Många snygga sajter är svåra att läsa. Ljusgrå text på vit bakgrund ser modernt ut i designprogrammet men försvinner i solljus på en mobil. Tillgänglig design handlar om att fler ska kunna använda det ni byggt – och det är ofta enklare att fixa än man tror.

Vad menas med tillgänglig design?

Tillgänglighet betyder att en sajt fungerar även för personer med till exempel nedsatt syn, färgblindhet eller som sitter i en buss i starkt ljus. Det är inte en nischfråga: en stor andel av befolkningen har någon form av synnedsättning, och nästan alla läser ibland på en liten skärm under dåliga förhållanden. Gör ni det lättare för dem gör ni det bättre för alla.

Standarden som styr det här heter WCAG (Web Content Accessibility Guidelines). Det är ett internationellt regelverk för hur webb ska göras tillgänglig. För många offentliga aktörer i Sverige är det lagkrav, men även privata företag tjänar på att följa det.

Vad är färgkontrast och varför spelar det roll?

Färgkontrast är hur tydligt text skiljer sig från sin bakgrund. Mäts som ett förhållande, till exempel 4,5:1. Ju högre tal, desto större skillnad. Svart text på vit bakgrund har mycket hög kontrast; ljusgrå text på vit har låg.

WCAG sätter dessa riktvärden för normalstor text:

  • Minst 4,5:1 för vanlig brödtext (nivå AA, den vanligaste att sikta på).
  • Minst 3:1 för stor text (ungefär 24 px och uppåt, eller 19 px fetstil).
  • Minst 7:1 om ni vill nå den strängare nivån AAA.

Hur testar jag kontrasten – gratis?

Du behöver inte räkna själv. Det finns gratisverktyg där du klistrar in textfärgen och bakgrundsfärgen och får ett svar direkt:

  • WebAIM Contrast Checker – en webbsida där du matar in två färgkoder och ser om de klarar AA och AAA.
  • Inbyggda verktyg i webbläsaren. I Chrome och Firefox finns utvecklarverktyg som visar kontrastvärdet när du inspekterar text.
  • Figma-tillägg om ni designar där, som kontrollerar kontrast direkt i designfilen.

Ett snabbt arbetssätt: ta era viktigaste textfärger och bakgrunder, kör dem genom WebAIM, och justera tills de når minst 4,5:1.

Vad mer än kontrast påverkar läsbarheten?

Kontrast är halva jobbet. Det här gör också stor skillnad:

  • Textstorlek. Sikta på minst 16 px för brödtext på webb. Mindre än så blir jobbigt för många.
  • Radlängd. Ungefär 50–75 tecken per rad är behagligt. Väldigt långa rader gör att ögat tappar bort sig.
  • Radavstånd. Lite luft mellan raderna (ungefär 1,5 gånger textstorleken) gör texten lättare att följa.
  • Undvik text i bilder. Text som är en bild kan inte förstoras eller läsas upp av skärmläsare.
  • Förlita er inte enbart på färg. "Det röda fältet är fel" funkar inte för färgblinda – lägg till en ikon eller text.

Är det inte massa extrajobb?

Sällan. Det mesta handlar om val ni ändå gör: vilken grå, hur stor text, hur mycket luft. Att välja en lite mörkare grå kostar inget extra men kan vara skillnaden mellan en sajt som halva mobilanvändarna kisar mot och en som bara fungerar. Och tillgängliga sajter tenderar att vara renare och tydligare – något som gynnar både kunder och sökmotorer.

Tillgänglighet är inte en svår funktion man bygger på slutet. Det är en serie små, bra val genom hela designen.

Vill ni ha en sajt som fungerar för alla?

På ZORC bygger vi webbplatser med tillgänglighet inbyggd från start – rätt kontrast, läsbar text och struktur som fungerar för skärmläsare. Är ni osäkra på om er nuvarande sajt håller måttet, hör av er så gör vi en genomgång och pekar ut vad som är enkelt att förbättra.