Använd tillräcklig kontrast mellan text och bakgrund
Bra kontrast mellan text och bakgrund är viktigt för läsbarheten, särskilt för personer med nedsatt synförmåga.
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. Se R156. Använd tillräckliga kontraster i komponenter och grafik.
Rekommendationer för kontrasterLänk hit
- Lita inte på automatisk granskning av kontraster
- Överträffa gärna gränsvärdena för kontrast
- Överväg att låta användaren välja kontraster
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.
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.
Överväg att låta användaren välja kontrasterLänk hit
För vissa användare underlättar låga kontraster eller inverterade färger (exempelvis mörk bakgrund istället för ljus). Överväg därför att låta användarna själva kontrollera kontrastförhållanden och färgskalor. Detta är inte nödvändigt för att uppfylla WCAG, men kan för vissa personer öka tillgängligheten.
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 till denna riktlinje
Kommentarer (2)
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.)
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/
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.