Kontrast och läsbarhet

Färgkontrast handlar om skillnaden i ljushet mellan text och dess bakgrund. Tillräcklig kontrast är avgörande för att text ska vara läsbar – inte bara för personer med synnedsättning utan även i vardagliga situationer som starkt solljus på en mobilskärm eller en äldre bildskärm med blekt färgåtergivande.

WCAG 2.1 har tre framgångskriterier som rör kontrast:

  • 1.4.3 Kontrast (minimum) – Nivå AA – Kräver kontrastförhållande 4.5:1 för normal text och 3:1 för stor text
  • 1.4.6 Kontrast (förbättrad) – Nivå AAA – Kräver 7:1 respektive 4.5:1
  • 1.4.11 Kontrast för icke-textuellt innehåll – Nivå AA – Kräver 3:1 för gränssnittskomponenter och grafisk information

Vad räknas som "stor text"?

Stor text definieras som text som är minst 18 punkter (24 pixlar) eller 14 punkter (18,66 pixlar) i fetstil. Stor text har lägre kontrastkrav (3:1) eftersom större bokstäver är lättare att urskilja.

Det är viktigt att notera att "punkter" här avser CSS-punkter, inte fysiska punkter. Det innebär att en webbplats som använder font-size: 24px uppfyller definitionen av stor text.

Så beräknas kontrastförhållandet

Kontrastförhållandet beräknas med en formel baserad på den relativa luminansen hos de två färgerna. Förhållandet anges som ett tal mellan 1:1 (ingen kontrast – identiska färger) och 21:1 (maximal kontrast – svart mot vitt).

Du behöver aldrig räkna ut detta manuellt. Det finns gott om verktyg som gör beräkningen åt dig:

  • WebAIM Contrast Checker – Ett enkelt webbverktyg där du anger två färgkoder
  • Colour Contrast Analyser – Ett gratisprogram från The Paciello Group som kan plocka färger direkt från skärmen
  • Webbläsarens utvecklarverktyg – Chrome och Firefox visar kontrastförhållandet direkt i färgväljaren i Elements-panelen

Vanliga kontrastproblem

Grå text på vit bakgrund

Den vanligaste bristen vi ser. Ljusgrå text (#999999 eller liknande) mot vit bakgrund ger ofta ett kontrastförhållande runt 2.8:1 – långt under kravet. Lösningen är att använda en mörkare grå, exempelvis #595959 som ger 7:1 kontrast.

Platshållartext i formulär

HTML-platsshållartext (placeholder) har ofta extremt låg kontrast. Webbläsarnas standardstil för placeholder-text uppfyller sällan WCAG-kraven. Lösning: stila placeholder-texten med mörkare färg, men kom ihåg att placeholder aldrig ska ersätta etiketter.

Text på bilder

Text som placeras ovanpå fotografier har varierande kontrast beroende på bildens innehåll. Delar av texten kan vara läsbar medan andra delar försvinner mot bakgrunden. Lösning: använd en halvtransparent bakgrund bakom texten eller en textskugga.

Länkar som bara skiljer sig i färg

Länkar som enbart särskiljs från löptext genom färg (utan understryknings- eller fettmarkseffekt) kan vara svåra att identifiera för personer med nedsatt färgseende. WCAG 1.4.1 kräver att färg inte är det enda sättet att förmedla information. Lösning: kombinera färg med understrykning eller annan visuell markering.

Kontrast för icke-textuellt innehåll

Sedan WCAG 2.1 finns krav på kontrast även för gränssnittskomponenter och grafisk information (1.4.11). Det innebär att exempelvis:

  • Formulärfält – Kantlinjen runt ett textfält ska ha minst 3:1 kontrast mot bakgrunden
  • Knappar – Knappens kant eller bakgrund ska ha tillräcklig kontrast
  • Ikoner – Ikoner som förmedlar information (inte dekorativa) behöver 3:1 kontrast
  • Diagram och grafer – Datapunkter och linjer ska vara urskiljbara

Praktiska tips för bättre kontrast

  1. Välj färgpaletten tidigt – Kontrollera kontrastförhållanden redan i designfasen, inte i efterhand.
  2. Testa med verktyg – Förlita dig inte på ögonmåttet. Skillnaden mellan 4.4:1 och 4.6:1 kan vara omärklig visuellt men avgörande för efterlevnaden.
  3. Tänk på mörkt läge – Om din webbplats har dark mode, kontrollera kontrasten i båda lägena.
  4. Undvik att förlita dig enbart på färg – Använd även mönster, ikoner och text för att komplettera färgkodad information.
  5. Automatisera kontroller – Inkludera kontrastkontroller i er granskning av webbplatsen för att fånga regressioner tidigt.

God kontrast är inte bara ett tillgänglighetskrav – det förbättrar läsbarheten för alla besökare och signalerar professionell design.