Förenklad beskrivning av WCAG-kriteriet 1.4.11

Använd tillräckliga kontraster i komponenter och grafik

Personer med nedsatt syn har ofta svårt att urskilja visuella kontraster mellan exempelvis en symbol och dess bakgrund, och riskerar därför att missa information. Designa därför webbplatsen så att komponenter i gränssnittet och informationsbärande grafik har tillräckliga kontraster. Som komponenter räknas till exempel knappar och formulärfält. Som grafiska objekt räknas exempelvis ikoner och betydelsefulla delar av illustrationer och diagram (till exempel kurvor och pilar).

Denna riktlinje liknar Använd tillräcklig kontrast mellan text och bakgrund (R126) (som motsvarar WCAG-kriteriet 1.4.3). Men nu gäller alltså motsvarande krav även för innehåll som inte är text.

Utkast publicerat 2018-08-17

Riktlinjen bygger på, och är skriven för att underlätta tillämpning av, ett av 12 nya kriterier i WCAG 2.1 som blev internationell standard (W3C-rekommendation) den 5 juni 2018.

Kom gärna med synpunkter, antingen i kommentarsfunktionen sist på sidan, med epost till info@webbriktlinjer.se, eller i Facebookgruppen webbriktlinjer.


Rekommendationer för kontraster i innehåll som inte är textLänk hit

  • Ge gränssnittskomponenter tydliga visuella gränser.
  • Gör helst även inaktiva element urskiljbara för alla.
  • Använd god kontrast för informationsbärande delar av illustrationer och annat grafiskt innehåll, så långt det är rimligt.

Ge gränssnittskomponenter tydliga visuella gränserLänk hit

Inmatningsfält, knappar och andra komponenter ska ha tydliga visuella gränser med tillräckliga kontraster mot den intilliggande bakgrunden. Detta gäller oavsett om de är skräddarsydda eller skapade med standardelement i html.

Kontrastvärdet ska vara minst 3:1.

Om ni använder dynamiska visuella effekter, till exempel för att visa vilket element som är i fokus, ska även dessa ha tillräckliga kontraster.


Gör helst även inaktiva element urskiljbara för allaLänk hit

Kraven i WCAG 2.1 på tillräckliga kontrastvärden gäller inte för inaktiva komponenter och element, alltså sådana som ibland är “utgråade” för att signalera att de för närvarande inte kan användas. Det kan till exempel gälla en skicka-knapp som inte kan aktiveras förrän ett formulär är ifyllt, eller funktionalitet som enbart erbjuds i en dyrare version av en tjänst.

Ibland, till exempel efter en avvägning mellan olika behov av tillgänglighet, kan det vara nödvändigt att använda detta undantag från kontrastkraven: Genom att framhäva vissa och tona ner andra element under olika delar av en process, men alltid låta elementen finnas på samma plats, går det till exempel att öka igenkänning och därmed kognitiv tillgänglighet. Ett gränssnitt med många komponenter kan vara svårt att använda om inaktiva delar är lika framträdande som aktiva.

Men i enlighet med principen om universell utformning rekommenderar vi att så långt som möjligt även användare med nedsatt syn ska kunna urskilja och förstå de element som förekommer i gränssnittet. Indikera därför helst att ett element är inaktivt på något annat sätt än med dålig kontrast. Till exempel kan en “utgråad” känsla uppnås även med godtagbara kontraster, ett felmeddelande kan användas för att ge bra information, och det går även att lägga till text eller grafik som visar att ett element är inaktivt.

Några exempel

Här är några exempel kodade med html. Deras utförande varierar något beroende på din plattform. Vilken lösning passar dig?

Inaktiva knappar

(Klicka på knappen för att visa meddelandet.)

Aktiv knapp, som jämförelse


Använd god kontrast för informationsbärande delar av illustrationer och annat grafiskt innehållLänk hit

Förutom att interaktiva komponenter behöver vara urskiljbara är det viktigt att alla användare kan uppfatta budskap som kommuniceras genom ikoner, diagram, flödesscheman, kartor, infografik och andra bilder.

WCAG-kravet på tillräckliga kontraster (3:1) gäller därför, med några undantag, även för de grafiska objekt som är informationsbärande. Till exempel symboler, pilar och linjer i en graf. När det gäller enklare grafik såsom enfärgade ikoner, räknas hela ikonen som ett grafiskt objekt. Grafik som består av flera linjer, färger och former räknas som flera grafiska objekt. Se exempel nedan:

Blå ikon med vit telefonlur. Bakom ikonen är det gult.
Telefonikonen är en enkel ikon som ligger inuti en cirkel. I det här fallet räknas enbart telefonen som grafiskt element eftersom användaren kan tolka ikonen utan ringen. Kraven på kontrast gäller endast telefonen mot den blå bakgrunden. Cirkelns kontraster mot bakgrunden är inte relevanta i detta fall.

Blå neråtriktad pil. På pilen en gul euro-symbol. Bakgrunden är vit.
Symbolen för fallande eurokurs kan förstås genom att tolka nedåtpilen och valutasymbolen för euro. I detta fall behöver det vara tillräckliga kontrastvärden mellan själva pilformen mot den blå bakgrunden och eurosymbolen mot den vita bakgrunden. De grafiska objekten är pilformen och eurosymbolen.

I ett diagram behöver användaren kunna skilja på själva linjerna och punkterna som markerar ett värde. Av den anledningen är varje linje och punkt ett grafiskt objekt och behöver ha ett kontrastvärde på 3:1 mot bakgrunden. I exemplet nedan har alla linjer och punkter godtagbara kontraster förutom den heldragna. Om överlappet mellan kurvorna är litet, som i detta fall, är det inte nödvändigt med kontraster färgerna emellan.

Tre kurvor (röd, blå och ljust grön) i ett diagram.

För att förstå ett tårtdiagram behöver användaren skilja ut de olika tårtbitarna från varandra. Varje tårtbit i diagrammet är ett grafiskt element i sig. När du skapar ett tårtdiagram kan du behöva ta hänsyn både till kontrasten mellan eventuell text och bakgrunden och till kontrasten mellan de olika tårtbitarna. Ett sätt att säkerställa tillräcklig kontrast mellan tårtbitarna är att använda en skiljelinje eller mellanrum.

Två tårtdiagram. Det ena har bra kontraster.


Vilka grafiska objekt är undantagna riktlinjen?Länk hit


En helt svartvit eller “monokrom” webb har förstås utmärkta kontrastvärden, men bara i sällsynta fall är det funktionellt och estetiskt önskvärt. Vi behöver nyanserna, även om det finns personer som på grund av exempelvis synskada, dåliga ljusförhållanden eller begränsningar i utrustning har nedsatt förmåga att urskilja alla kontraster. Därför finns det ett antal undantag från kontrastkraven avseende grafiska objekt:

  • När grafiken endast tillför ett estetiskt värde som inte behöver förstås eller uppfattas av användaren.
  • När informationen är tillgänglig i någon annan form, till exempel i text eller tabell i anslutning till grafiken.
  • När objektet är en del av en logotyp eller ett varumärke.
  • När grafiken kan förlora sin innebörd om färgerna ändras. Detta gäller till exempel flaggor eller fotografier av människor eller naturen.
  • Framställningar med syfte att visa hur någonting faktiskt ser ut, som blir missvisande om färgerna förändras. Till exempel skärmdumpar och medicinska diagram som använder färgskalor som finns i naturen.


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.11 Non-text Contrast The Visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components: Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

(Nivå AA)


MätbarhetLänk hit

Fundera på vilka delar av varje ikon, diagram, illustration och bild som behöver uppfattas för att kunna förstå budskapet. Se till att dessa delar har tillräcklig kontrast mot intilliggande färger.

Tips på verktyg för mätning av kontraster.


TerminologiLänk hit

I det relevanta WCAG-kriteriet 1.4.11 används termen grafiskt objekt (graphical object) på det sätt som beskrivs ovan, alltså för betydelsebärande delar av bilder och diagram. I andra sammanhang förekommer det att termen “grafiskt element” används med samma innebörd. Ordet “element” har dock en specifik innebörd i uppmärkningsspråk som HTML, och därför har vi valt att inte använda det för något annat här.

Infografik (eng. infographics) kallas en visualisering framtagen med syfte att det ska gå snabbt och enkelt att få en förståelse och överblick av information. Sveriges kommunikatörer har publicerat en infografik om infografik, med en sammanfattande text på svenska för den som inte kan uppfatta eller förstå bildinnehållet.



Kommentarer (0)