Förenklad beskrivning av WCAG-kriteriet 1.4.3

Designa med tillräckliga kontraster

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 förgrund och bakgrund har förhållandet 4,5:1. Därför har WCAG-standarden detta förhållande som grundkrav. Kontrastvärdet kan mätas med hjälp av programvara.

Större text (till exempel rubriker) är lättare att läsa, och för sådan är därför gränsvärdet 3:1.

Logotyper, dekorativa inslag och inaktiva funktioner är undantagna i riktlinjen. Innehåll i diagram och annan grafik som behöver kunna läsas eller tolkas bör dock uppfylla kontrastkraven.


Rekommendationer för kontrasterLänk hit

  • Lita inte på automatisk granskning av kontraster
  • Överträffa gärna gränsvärdena för kontrast

Lita inte enbart på automatisk granskning av kontrasterLänk hit

Observera att det inte alltid går att veta vilken position en text kommer att ha i förhållande till olika sidelement som finns i bakgrunden (färgade plattor, bilder och så vidare). Den beror på användarens 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.

Syntavla där översta raden har god kontrast medan de längre ner har avtagande kontrast. Längst ner är dessutom bakgrunden en spräcklig bild vilket gör läsning mycket svår.

Bilden visar en sorts syntavla där kontrasten är sämre längre ner. Allra svårast är det att urskilja text mot spräcklig bildbakgrund.


Överträffa gärna gränsvärdena för kontrastLänk hit

Det finns användare 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 brukar använda hjälpmedel för att öka kontrasten eller förstora texten.


Utdrag från WCAG-standardenLänk hit

Riktlinje 1.4 Urskiljbart: Gör det enklare för användare att se och höra innehåll, bland annat genom att skilja förgrund från bakgrund.

1.4.3 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: (Nivå AA)

  • 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.


Kommentarer (2)

  • Besökare skriver:

    Vad jag kan se finns inga riktlinjer för hur en markering av text bör se ut.
    Anledningen till mitt intresse för denna fråga är att t.ex. Göteborgs Universitetsbibliotek (UB.se) i sina resultatlistor från sökning har en ljusblå bakgrund och visar markerad text genom att göra bakgrunden vit, textens kulör är samma.
    Detta upplever jag lever inte upp till ett rimligt krav på användarvänlighet.
    (Dessutom går det inte att markera titeltexten om man inte påbörjar markeringen i texten innan titeln, alt. texten efter titeln.)

    • Pär Lannerö skriver:

      Det finns inget undantag i WCAG 2.0 för markerad text, vad jag vet. Därmed bör även markerad text uppfylla kontrastkraven. Men inte nödvändigtvis genom invertering. På den sida du länkar till hittar jag i och för sig ingen text med uppenbart bristande kontrast vid markering, men det spelar ingen roll för resonemanget.

      Jag håller med om att det är besvärligt att det inte går att markera text på sedvanligt sätt. Det ser ut att bero på att systemet använder sig av ganska avancerad scriptning som gör att webbläsaren inte följer sitt standardbeteende. Den som använder JavaScript mycket behöver vara extra noga med att testa användbarheten. Se https://webbriktlinjer.se/riktlinjer/93-gor-inte-webbplatsen-beroende-av-javascript/