Använd tillräcklig kontrast mellan text och bakgrund

Om riktlinjen

  • Innehåller lagkrav
  • EN 9.1.4.3
  • WCAG 1.4.3 (AA)

Område

Bra kontrast mellan text och bakgrund är avgörande för att alla ska kunna ta del av innehållet. Det gör texten tydlig och läsbar, vilket gynnar personer med synnedsättningar och säkerställer att den information du vill förmedla kan nå alla på ett likvärdigt sätt.

Därför behöver du ha god kontrast mellan text och bakgrund

Bra kontrast mellan text och bakgrund är viktigt för läsbarheten. Personer med nedsatt syn har ofta svårt att läsa text med bristande kontrast mot textens bakgrund. De flesta kan läsa brödtext på skärm om skillnaden i ljusintensitet mellan texten och bakgrunden har förhållandet 4,5:1. Större text (till exempel rubriker) är lättare att läsa även om kontrasten är sämre, därför är gränsvärdet lägre för sådan text (3:1)

Vad kräver lagen?

Kontrastvärden som behöver uppfyllas

Kontrastförhållandet mellan textfärgen och färgen på textens bakgrund ska vara minst 4,5:1.

Stor text

För stor text, vilket innebär minst 18 punkter (24 px) eller 14 punkter (19 px) och fetstil, är kravet på kontrastförhållandet minst 3:1.

Undantag från lagkraven

  • Text i logotyper
  • Oväsentlig text, exempelvis texten på en gatunamnsskylt som råkar synas i bakgrunden på ett fotografi.
  • Inaktiva komponenter i användargränssnittet.

Rekommendationer utöver lagkrav

Utöver det lagen kräver finns ett antal rekommendationer för hur du kan arbeta med kontrast för att förbättra digital tillgänglighet:

Säkerställ bra kontrast vid olika skärm- och textstorlekar

Ibland kan det vara svårt att veta vilken position en text kommer att ha i förhållande till olika objekt som finns i bakgrunden (exempelvis färgade bakgrunder eller bakgrundsbilder). Detta beror på personens val av textstorlek, skärmbredd, skalning av bilder med mera.

Var därför försiktig med till exempel bakgrundsbilder som vid en olycklig positionering skulle ge dålig kontrast, även om det ser bra ut med just din kombination av tecken- och skärmstorlek.

Överträffa gärna gränsvärdena för kontrast

Det finns personer som behöver kontrastförhållande ända upp till förhållandet 7:1 för att klara sig utan hjälpmedel. Där går gränsen för nivå AAA enligt WCAG 2.1. Personer som behöver ännu högre kontrast än så brukar använda hjälpmedel för att öka kontrasten eller förstora texten.

Så testar du kontrast

Automatiska kontroller kan ge en indikation på problematiska färgkombinationer. Men förlita dig inte enbart på automatiska verktyg, utan säkerställ att färgkoderna för de färger som används uppfyller kraven. Det finns många tjänster på webben som hjälper till att beräkna kontrastvärdet mellan två färger.

Utdrag ur WCAG

WCAG 1.4.3 (AA) Kontrast (minimum)

Den visuella presentationen av text och text i form av bild har ett kontrastvärde på minst 4,5:1 med följande undantag:

  • Stor text: Text i stor stil och bilder av text i stor stil har ett kontrastvärde på minst 3:1.
  • Oväsentlig: Text eller text i form av bild som är en del av en inaktiv komponent i ett användargränssnitt, är rent dekorativ, inte är synlig för någon, eller är en del av en bild som innehåller annat viktigt visuellt innehåll, har inga krav vad gäller kontrast.

Logotyper: Text som är en del av en logotyp eller ett varumärke har inget minimikrav vad gäller kontrast.

Därför länkar vi till WCAG på svenska och engelska

Relaterade riktlinjer

Använd tillräckliga kontraster i komponenter och grafik

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Senast uppdaterad: