Färg och kontrast

In English

För att skapa tillgängligt innehåll på webben behöver du vara medveten om hur valet av färger och kontrast påverkar tillgängligheten. Du behöver också ha kännedom om och följa de riktlinjer som finns.

Du som till exempel stått i starkt solsken och försökt ta del av en webbplats på en mobilskärm förstår hur viktigt det är med tydliga kontraster. För personer med exempelvis färgblindhet kan en webbplats upplevas på precis samma sätt även när de sitter på arbetsplatsen eller hemma vid sin dator.

Du som publicist har ett ansvar

När du publicerar innehåll ansvarar du för att säkerställa att det du publicerar på webben är tillgänglighetsanpassat. Till din hjälp finns ett flertal verktyg och mallar, men du behöver vara observant på att det inte alltid räcker att använda sig av till exempel Lunds universitets grafiska profil eller styleguide för garanterad webbtillgänglighet.

Tips på hur du kan arbeta med färg och kontrast

Använd dig av färger som skapar starka kontraster mellan bakgrund och innehåll. Det gäller både text, bild och grafik.
Använd gärna färger och färgskillnader för att höja användbarheten och upplevelsen, men tänk på att urskilja information på mer än ett sätt. Du behöver komplettera färgskillnader med text, mönster och/eller grafiska element som linjer eller ikoner.
Använd kombinationer av färgerna grön, röd och brun med försiktighet. Många personer med exempelvis färgblindhet har svårt för att särskilja dem.

Exempel på hur du kompletterar ditt innehåll för att särskilja information

Här visar vi två exempel som visar hur du kan förbättra tillgängligheten när du arbetar med exempelvis informationsgrafik. I det första exemplet används bara färgskillnader för att särskilja informationen. I det andra har man använt sig av konturlinjer och valt att placera texten på ett sätt som förtydligar.

Ett diagram som visar bristande kombination av färger ur tillgänglighetsperspektiv. Grafik. — I det här diagrammet används endast färger för att särskilja information. För en färgblind person kan det vara omöjligt att skilja på de olika delarna i diagrammet.

Diagram med konturlinjer för att exemplifiera tillgänglighetsanpassande attribut — I det här diagrammet har man förbättrat kontrasten och särskiljer informationen med både färgskillnader och konturlinjer. Man har också valt att placera texten på ett sätt som förtydligar ytterligare.

Riktlinjer för färger och kontraster

Verktyg för att kontrollera kontraster

Kontakt

Vid Lunds universitet finns en tillgänglighetsexpert och ett team som du kan kontakta genom vårt kontaktformulär.

Du kan också gå med i Teams-nätverket för webbpublicister vid Lunds universitet. I nätverket finns en kanal för webbtillgänglighet.

Gå direkt till kanalen för webbtillgänglighet