Färgblindhet och webben

Ishihara test exempel

Vad ser du när du kollar på bilden ovan? Om du inte ser siffran 74 utan bara ser färgade cirklar eller någon annan siffra har du troligen någon form av färgblindhet, eller som det mer korrekt kallas generelt, defekt färgseende.

Den vanligast förekommande versionen är deuteranopia (röd-grön färgblindhet) och förekommer i varierande grad hos 6% av männen. Den mildare formen kallas deuteranomali (defekt grönseende) och är vanligare förekommande.

färghjul
Ett exempel för dom som inte har färgblindhet hur skillnaden ser ut för dom med deuteranopia

Varför ska då vi som front-end utvecklare ha personer med färgblindhet i åtanke när vi designar och väljer ett färgschema för våra hemsidor? En anledning är att c:a 8% av männen och 1% av kvinnorna har någon form av defekt färgseende.

Hur ska vi som front-end utvecklare göra för att inte skapa hemsidor som är omöjliga för färgblinda att navigera?
Jo, vi kan använda oss av något som kallas färglära (color theory), med kunskaper om färglära och hur olika färger komplimenterar och kontrasterar varandra kan vi underlätta inte bara för de med färgblindhet utan även se till att texter och liknande blir lätt lästa för alla som går in för att läsa hemsidans innehåll. T.ex. undvik att ha text som är snarlik bakgrundsfärgen.

Det finns flera sätt att testa din hemsida för färgblinda:
– Senaste versionerna av Photoshop har ett filter för de vanligaste förekommande varianterna och du kan redan i design stadiet testa hur ditt färgschema håller ihop för färgblinda. – Program som Color Oracle och hemsidor som Colblindor och liknande kan hjälpa dig simulera hur en person med någon form av defekt färgseende ser på din hemsida.

Men den viktigaste lösningen är att med analyser och undersökningar, sitta med en person med defekt färgseende och testa hur den personen hanterar din hemsida för att få en mer korrekt inblick i hur den personen hanterar att navigera på en hemsida.

Vad tar jag med mig vidare från det jag nu läst om färgblindhet?

Att det är viktigt att tänka på att t.ex. deuteranopia och deuteranomali förekommer ganska ofta bland män och att man har i åtanke när man bygger hemsidor för denna användargrupp, att ca 6% av de som besöker sidan inte kan se skillnad på rött och grönt, vilket gör det viktigt att tydliggöra med olika nyanser vad som är vad t.ex. eller att med text eller form visa vad som är vad.

Även jag som inte har färgblindhet, men är närsynt, kan ha nytta av att mina hemsidor och andras har bra kontrastrika innehåll som gör hemsidorna lätta att läsa och inte gör det jobbigt för ögonen att läsa en text. Man måste ha i åtanke för användarens skull att det finns många olika personer som kommer besöka dina hemsidor och att ta emot feedback för att förbättra hemsidans tillgänglighet och användbarhet.

Källor: Tuts+ – Designing For, and As, a Color-Blind Person, Svenska Wikipedia – Defekt färgseende, Colblindor – All about Color Blindness, An introduction to color thoery for Web Designers

5 svar till “Färgblindhet och webben”

  1. Hej Tobias! intressant att du gick på djupet med färgblindhet, det var ngt som jag inte tänkte på. Ska ha detta i åtanke i framtiden…. ngt vägverket säkert tänker på väldigt mkt vid arbetet med trafikskyltar och liknande. Det finns så mycket att tänka på med gränssnitt…. verkar ju vara ett assvårt yrke det här 🙂

  2. Very good article, Tobias! I didn’t know so many people suffer from a form of color blindness or related conditions. The info on the way we can use Photoshop to test our designs work optimally for the color blind is really, really valuable. thanks a lot for sharing.

    I like the way you structured your article, very clear and concise, and the way you made use of relevant images for the subject. Really nicely done!

  3. Hej Tobias, jag gillar verkligen ditt inlägg. Jag tycker det är bra att du fokuserade dig just på personer som lider av färgblindhet istället för att skriva bara generellt om synnedsättning. Dessutom är din presentation här på WordPress jättefin – clean och användarvänlig 🙂

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *