Använd inte färg för att enbart förmedla information Att urskilja färger får inte vara det enda sättet för användaren att få nödvändig information. Till exempel ska ett meddelande om att ett fält inte har fyllts i korrekt inte enbart förmedlas genom att fältet blir rött. Felmeddelandet ska också finnas som text eller en tydlig symbol. Färger får naturligtvis används i webbinnehåll, färger kan ofta göra det lättare att särskilja element. Om till exempel rubrikernas färg skiljer sig från brödtextens färg möjliggör rubrikernas övriga format (större typsnitt och fetstil) ändå att läsaren får information om att det inte rör sig om en brödtext. Särskild noggrannhet krävs vid användning av färger i bilder som visualiserar numeriska data. Grafernas förklarande text ska placeras logiskt och vid behov kan olika former eller ytor utöver färg användas. Exempel 1: Stapeldiagram med förklaring av stapelns färger bredvid diagrammet Om personen som läser stapeldiagrammet inte kan urskilja färger, till exempel rött och grönt, hjälper det inte att förklara färgerna. I detta exempel uppfylls inte WCAG-kriteriet för användning av färger. Exempel 2: Stapeldiagram där stapelns förklaring syns under stapeln I detta exempel spelar det ingen roll om personen kan särskilja färgerna eller inte eftersom stapelns förklaring, dvs. årtalen, anges under stapeln. Du kan enkelt ta reda på om någon information förmedlas enbart via färg. Ändra webbsidan eller dokumentet på nätet till gråskala och se om du kan urskilja informationen. Det finns olika simulatorer för det här ändamålet. Mer information: WCAG 2.1 kriterium 1.4.1 Användning av färger Ljushetskontrast mellan text och bakgrund Texten på webben ska ha en tillräcklig färgskillnad mellan text och bakgrund, dvs. kontrast. Det är viktigt att kontrasten är tillräckligt hög så att alla kan läsa texten. Kontrast hjälper vid till exempel starkt solljus. Riktlinjerna för tillgängligt webbinnehåll (WCAG) anger kriterier för kontrast mellan text och bakgrund. Kontrastförhållandet mellan textens och bakgrundens färg ska vara minst 4,5:1. Om texten är stor (minst 18 punkter eller minst 14 punkter i fetstil) ska kontrasten vara minst 3:1. (Mer information om hur du ställer in textstorleken (på engelska)). Ljushetskontrasten måste också beaktas när något markeras som aktivt eller i andra situationer där kontrasten ändras. Om till exempel texten eller bakgrunden i en länk ändras när musen/pekaren förs över den, måste kontrasten fortfarande vara tillräcklig. Beräkna kontrastförhållande WCAG:s kontrastkriterier har kritiserats för att ett numeriskt värde inte alltid motsvarar läsarens upplevelse. En färgkombination kan verka tydlig trots att kontrastförhållandet är för lågt. Kontrastförhållandenas beräkning beaktar inte huruvida det är fråga om ljus text på mörk bakgrund eller tvärtom, trots att det har en betydelse för upplevelsen. För att webbinnehållets tillgänglighetskriterier ska uppfyllas måste WCAG 2.1-kriteriets beräkningsmodell användas. Maximal kontrast är mellan svart (HEX: #000000) och vitt (#FFFFFF) 21:1. Exempel på andra kontrastförhållanden: Kontrasten mellan den här gröna texten och den här vita bakgrunden är 2,8:1. (Grön #43B02A) Kontrasten mellan den här mörkgröna texten och den här vita bakgrunden är 5,42:1. (Grön #007864) Här är kontrasten mellan den svarta texten och den gröna bakgrunden 7.48:1. (Grön #43B02A) Även här är kontrasten mellan den gröna texten och den svarta bakgrunden 7,48:1. (Grön #43B02A) Du kan själv beräkna kontrastförhållandet med hjälp av räknaren på Contrast Checker på WebAIM.org. För att beräkna kontrastförhållandet behöver du färgernas HEX-, RGB-, eller HSL-värden. Om en länktext inte är understruken ska kontrasten mellan brödtexten och länktexten vara minst 3:1. WebAIM.org har en separat räknare för länkkontraster: Link Contrast Checker. Kontrastkravet inte gäller logotyper, men måste beaktas i andra textbilder. Kontrollera alltså kontrasten mellan texten och bakgrunden när du skapar eller använder informationsgrafik och olika diagram. Det är också viktigt att kontrasten mellan texten på webbplatsens knappar och bakgrundsfärgen är tillräckligt hög. WCAG-kriterium 1.4.3 Kontrast (minimum) Kontraster för grafiska komponenter WCAG 2.1 har också kontrastkrav för innehåll som inte är text. Då är det bland annat fråga om kontrasten mellan bakgrunden och knappar, eller stjärnor eller andra symboler med vilka användaren kan ge vitsord. Kravet gäller även diagram eller andra grafer som är viktiga för att förstå innehållet. WCAG-kriteriet 1.4.11 (Använd tillräckliga kontraster i komponenter och grafik) gäller diagram med olika färger bredvid varandra, såsom cirkeldiagram med olikfärgade sektorer. WCAG-kriteriet 1.4.11 Använd tillräckliga kontraster i komponenter och grafik (Obs! Översättning av myndigheten som övervakar tillgänglighet, det finns ingen officiell svensk översättning). Om det är viktigt att kunna urskilja färgerna för att förstå diagrammet måste två intilliggande färger ha kontrastförhållandet 3:1. Exempel på hur man beaktar kriterierna för färganvändning Exempel 3: Cirkeldiagram med sektorer vars konturer inte har en annan färg I det här exemplet bör man beräkna kontrastförhållandet mellan sektorernas olika färger och mellan sektorernas färger i förhållande till den vita bakgrunden. Till exempel är kontrasten mellan blått (#3757C6) och grönt (#5CB946) endast 2,53:1 och förhållandet mellan grönt och vitt 2,47:1. Diagrammet uppfyller således inte WCAG-kriteriet 1.4.11. Exempel 4: Cirkeldiagram med svarta konturer mellan sektorerna Eftersom konturerna mellan alla sektorer i cirkeldiagrammet är svarta behöver man endast beräkna kontrastförhållandet mellan den svarta konturens färg och sektorernas färger. Även de mörkaste sektorerna, såsom blått (#3757C6) och brunt (#7A653E), uppfyller kontrastkravet (förhållandet mellan blått och svart är 3,34:1 och förhållandet mellan brunt och svart är 3,75:1). Detta diagram uppfyller WCAG-kriteriet 1.4.11. Observera atta visa prosentsatser hjälper läsare som kan ha svårt att skilja mellan blåa och bruna sektorerna. Att använda svart kontur mellan olika delar av diagrammet är ofta ett bra sätt att uppnå tillräckligt hög kontrast. Exempel 5 har svart kontur runt staplarna i stapeldiagrammet. Ovanför staplarna står också värdet som staplarna representerar. För att förklara staplarna har bokstäver använts som hjälp, eftersom förklaringen inte skulle få plats vågrätt vid staplarna. Den här lösningen fungerar oavsett färgerna kan särskiljas eller inte. Exempel 5: Stapeldiagram med svart kontur runt staplarna. Bilder med informationen ska alltså beakta följande kriterier: WCAG 1.4.1, användning av färger; WCAG 1.4.3, kontrast mellan text och bakgrund; WCAG 1.4.11 användning av tillräckliga kontraster i komponenter och grafik. Därutöver bör man även säkerställa att kriteriet om alternativ text (WCAG 1.1.1) uppfylls.