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.
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.
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:
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.
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 vita bakgrunden och eurosymbolen mot den blå 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.
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.
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)
Fördjupning och relaterade riktlinjerLänk hit
- Blogginlägg om kontraster i inaktiva element.
- Utkast till presentation om tillgängliga kartor, tabeller och diagram (pdf, 0,8 MB).
- Beskriv med text allt innehåll som inte är text (R115) (motsvarar WCAG-kriterium 1.1.1)
- Använd tillräcklig kontrast mellan text och bakgrund (R126) (motsvarar WCAG-kriterium 1.4.3)
- Använd inte enbart färg för att förmedla information (R124) (motsvarar WCAG-kriterium 1.4.1)
- Använd text, inte bilder, för att visa text (R128) (motsvarar WCAG-kriterium 1.4.5)
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 till denna riktlinje
Kommentarer (10)
Vad gäller för skuggor? Kan jag skilja objekt mot varandra genom tillräcklig kontrast i skuggor?
Vad gäller om jag vill skilja en vit yta med skugga ifrån en vit bakgrund?
Måste skuggans färg ha kontrasten minst 3:1, eller mer? Hur många pixlar måste skuggan vara? Måste skuggan vara runt hela ytan, samma skugga runt hela ytan eller kan skuggan vara mindre i ex toppen?
Bra fråga! Min spontana tolkning är att en skugga kan vara tillräcklig om någon del av skuggan (minst 1px bred) har kontrasten 3:1 mot de färger som finns på ömse sidor om skuggan. Det väsenliga är att användare med nedsatt syn ska kunna identifiera användargränssnittskomponenter. Om skuggan gör komponenten identifierbar fast den inte har 3:1 i kontrast längst upp borde det vara okej.
Någon som har en avvikande uppfattning?
I diagrammet med linjer tror jag att även linjen med prickar bryter mot kontrastregeln att det ska vara 3:1 den är 2,5;1
Tack, helt riktigt! Bilden är nu korrigerad.
Hur blir det med inputfält? T.ex. har sökfältet på den här sidan ju för låg kontrast mot bakgrunden. Å andra sidan är där ju en tydlig instruerande text`(Med god kontrast.)
Hej! Tack för din kommentar om inputfält. Om jag förstår dig rätt menar du att sökfältets bakgrund har för låg kontrast mot sidans bakgrund? Det är ok, för om en komponents bakgrundsfärg, kantlinje eller droppskugga ger tillräcklig kontrast mot omgivande färger finns inga specifika krav på kontrast mellan bakgrunden och kantlinjen.
Hej!
Hur ska man tänka när man tex har ett stapel- eller cirkeldiagram med ett flertal parametrar (dvs färger/grafikelement) låt säga fyra olika, räcker det då att varje parameter har tillräcklig kontrast mot vitt (om man lägger in vitt emellan varje del), eller behöver färgerna ha tillräcklig kontrast mot varandra också? Vi har ofta diagram med många olika parametrar där vi lägger parameternamnen under diagrammet då de ej får plats inne i diagrammet.
Om man tex skulle skriva ut parameterförklaringar till det blå/röda cirkeldiagrammet ni visar ovan, räcker det att göra det via små färgrutor med parameternamnen under diagrammet för att vara tillgängligt? Det ser inte ut som att färgerna har 3:1 kontrast mot varandra, men det är alltså ok?
Hej Rebecka.
Utan att ha tagit del av det exempel du beskriver i din frågeställning så kan jag enbart ge dig ett generellt svar. Jag ska likväl försöka besvara din fråga efter bästa förmåga.
Kartor och diagram är generellt svårt att göra fullt tillgängligt. Det viktiga är att presentera informationen på ett sätt som blir enkelt att ta till sig för den som ska ta del av diagrammet.
Ett enkelt sätt är att presentera informationen i en tabell i anslutning till kartan eller diagrammet. Tabellen gör informationen mer överskådlig för de som av olika anledningar har svårt att ta del av en grafisk framställning.
Ex: Om ni har ett stapeldiagram med fyra staplar så kan samma information presenteras som en tabell med fyra rader och två kolumner där den vänstra kolumnen innehåller värdet/texten på X-axeln under respektive stapel och den högra kolumnen innehåller stapelns värde. Samma sak gäller för ett cirkeldiagram.
För en enklare graf kan det ibland räcka med att beskriva informationen som brödtext i anslutning till grafen.
Ni behöver dock, så långt det är möjligt, även göra själva grafen tillgänglig. Jag har som sagt inte tagit del av ert exempel. Min rekommendation är därför att ni genomför egna användartester för att hitta den visuella utformning som passar bäst i just ert fall. Ta fram de koncept du beskriver i din fråga och låt personer med nedsatt syn, t.ex. nedsatt förmåga att se kontraster eller färger, få avgöra hur tydliga graferna är. Kom även ihåg att genomföra tester med personer som har kognitiva svårigheter då dessa personer har andra utmaningar kring information i form av grafer och diagram.
Hej, hur är det med skiljestreck så kallade ”dividers” i en undermeny. Om dessa ska klara kontrastvärdet så blir det väldigt randigt. För mig som som ej har någon funktionsnedsättning så blir det ”grötigt” och svårt att differentiera text från linjer.
Hej Fredrik.
Allt ska ha ett kontrastvärde på minst 3:1. Om du har element med ett lägre kontrastvärde så kan du i praktiken betrakta dessa element som osynliga. Då uppstår frågan varför man vill ha element på sidan som är osynliga.
Ni behöver alltså välja mellan att ha synliga element (med en lägsta kontrast på 3:1) eller att använda element som många kommer uppfatta som osynliga.
Tillgänglighet handlar om så mycket mer än att bistå personer med funktionsnedsättningar. Hur upplever användaren er meny om solen lyser på skärmen, om användaren har en billigare skärm eller om det är mörkt och användaren därför sänkt skärmens ljusstyrka för att inte störa andra i samma rum?
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.