Använd tillräckliga kontraster i komponenter och grafik

Om riktlinjen

  • Innehåller lagkrav
  • EN 9.1.4.11
  • WCAG 1.4.11 (AA)

Område

Kontraster är viktiga för att kunna ta del av innehåll på en webbsida eller app. Därför behöver exempelvis ikoner, fokusmarkering, diagram och infografik synas ordentligt mot bakgrunden och intilliggande objekt.

Därför ska du använda tillräckliga kontraster

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.

Vad kräver lagen?

För grafiska objekt och komponenter ska kontrastförhållandet mellan delar som behöver kunna särskiljas från varandra visuellt, exempelvis färgen på objektet och färgen på bakgrunden som omger det, vara minst 3:1.

Grafiska objekt och komponenter ska kunna uppfattas av alla

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) samt flödesscheman, infografik och andra bilder. Kravet gäller även exempelvis symboler, pilar och linjer i en graf, om dessa objekt är informationsbärande.

Även dynamiska visuella effekter, exempelvis fokusmarkeringar, ska ha tillräckliga kontraster.

Exempel på grafik och komponenter

  • Knappar
  • Formulärfält
  • Ikoner
  • Illustrationer
  • Diagram
  • Flödesscheman
  • Infografik
  • Symboler
  • Pilar
  • Linjer
  • Fokusmarkering

Kontrast är alltid viktigt i de fall den grafiken eller komponenten är informationsbärande.

Informationsbärande delar av illustrationer och annat grafiskt innehåll

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.

Exempel: ikon med flera färger

Mörkgrön ikon med vit ringklocka. Bakom ikonen är det ljusgrönt.

Ringklockan är en enkel ikon som ligger inuti en cirkel. I det här fallet räknas enbart ringklockan som grafiskt element eftersom användaren kan tolka ikonen utan ringen. Kraven på kontrast gäller endast klockan mot den gröna bakgrunden. Cirkelns kontraster mot bakgrunden är inte relevanta i detta fall.

Exempel: ikon med flera grafiska objekt

Rosa nedåtriktad pil med en vit Euro-symbol på. Bakgrunden är ljusgrå.

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 ljusgrå bakgrunden (vilket det inte är) och eurosymbolen mot den rosa bakgrunden. De grafiska objekten är pilformen och eurosymbolen.

Exempel: diagram med flera linjer

Tre kurvor i ett diagram, en brun, en grön och en rosa.

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 ovan har alla linjer och punkter godtagbara kontraster. Om överlappet mellan kurvorna är litet, som i detta fall, är det inte nödvändigt med kontraster färgerna emellan.

Exempel: tårtdiagram

Två tårtdiagram: ett har otillräckliga kontraster och inget mellanrum mellan de olika bitarna. Det andra diagrammet har tillräcklig kontraster och skiljelinje mellan de olika bitarna.

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.

Undantag från lagkraven

Det finns ett antal undantag från kontrastkraven avseende grafiska objekt och komponenter:

  • 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.
  • När en komponent är inaktiv (”utgråad”).
  • När enbart användarprogrammet bestämmer komponentens utseende, utan någon påverkan från utvecklaren.
  • 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.

Rekommendationer utöver lagkrav

Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:

Ge alla komponenter tydliga visuella gränser

Inmatningsfält, knappar och andra komponenter ska ha tydliga visuella gränser med tillräckliga kontraster mot den intilliggande bakgrunden. Om det finns text eller bild i komponenten är det inget krav att det finns någon visuell gräns, men det är att rekommendera.

Så testar du kontraster i grafik och komponenter

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.

Kontrollera att färgen för fokusmarkeringar har tillräcklig kontrast mot bakgrundsfärgen.

För komponenter behöver du säkerställa att antingen färgen på komponentens bakgrund eller dess kantlinje har tillräcklig kontrast till färgen som omger komponenten.

Det finns tjänster på webben som hjälper till att beräkna kontrastvärdet mellan två färger. Pipettverktyg och webbläsarnas utvecklarverktyg kan vara till hjälp för att ta reda på färgkoder.

Utdrag ur WCAG

WCAG 1.4.11 (AA) Användning av färger

Den visuella presentationen av följande, har ett kontrastförhållande på minst 3:1 till intilliggande färger:

Användargränssnittskomponenter

Visuell information som krävs för att urskilja användargränssnittskomponenter och deras tillstånd, med undantag för inaktiva komponenter eller där utseendet hos komponenten helt bestäms av användarprogrammet.

Grafiska objekt

Delar av grafik som krävs för att förstå innehållet, förutom när en specifik presentation är nödvändig för den information som förmedlas.

Originaltext på engelska: Success Criterion 1.4.11 Non-text Contrast (w3.org) Länk till annan webbplats.

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

Relaterade riktlinjer

Hjälpte denna information dig?

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

Senast uppdaterad: