10. Grafikskolan

Att skapa webbsidor som fungerar för färgblinda

2011-01-30 19:48 #0 av: MichaelE

I Sverige finns det ca 350 000 färgblinda och alla färgblinda på olika sätt. I följande artikel kommer jag gå i genom vad man bör tänka på när man bygger upp en hemsida.

När vi skapar hemsidor tänker vi oftast på att den ska fungera i alla webbläsare, följa standarder samt att den kan visas på olika operativsystem eller mobiler.

Det finns även en del restriktioner om hur man skapar hemsidor som ska fungera för dem som är blinda eller har dålig syn och använder sig av en skärmläsare. Detta kan testas genom att använda webbläsare som Lynx som enbart visar text vilket ger en vägledning till hur en skärmläsare kommer att läsa sidan.

Men hur gör man när man ska skapa en hemsida som fungerar för färgblinda?

När man pratar om färgblindhet så pratar man oftast om att vara färgblind på grönt eller rött medan ett fåtal är färgblinda på blått - vissa har även en kombination av dessa.

blind.png

Genom att titta på färgcirklarna till höger kan vi se hur färgblinda upplever de olika färgerna beroende på vilken typ av färgblindhet människor har.

Utifrån dessa bilder kan man komma fram till att följande färger inte ska användas tillsammans vid text mot färgade bakgrunder:

  • Använd inte blått och violett (lila)
  • Använd inte rött och grönt
  • Använd inte orange och grönt
  • Använd inte gult och vitt
  • Använd inte gult och grönt
  • Använd inte grönt och blått

Men hur vet man ifall färgerna man använder på en hemsida upplevs utav en färgblind?

Detta är inte så svårt som man kan tro, man kan bland annat använda sig av följande gratissajt som har många inställningar angående färgblindhet (visar bara en färg i taget):

Color Scheme Designer

Man kan även använda sig utav följande två program (ca pris SEK inom parantes) som kan testas i 30 dagar, dessa kan visa flera färger samtidigt i olika typer av färgblindhet:

ColorSchemer Studio 2 $49.99 (310 kr)

Color Impact 4 $59.95 (370 kr)

Color Impact är dock strået vassare än ColorSchemer Studio.

Om du har Photoshop och vill kunna se hur en färgblind skulle uppleva din hemsida så har du tur.

Jag har utvecklat ett Photoshop-dokument som har tre olika lager som med hjälp av selektivt färgfilter återskapar färgblindheten för rött, grönt och blått (lagren har samma namn som färgblindheten, dock på engelska).

Varje lager återskapar dem var för sig och du kan även blanda dem för att återskapa andra typer av färgblindhet (förutom total färgblindhet). Notera att detta är en approximation för hur det kommer se ut för dem som har detta funktionshinder men är ändå till stor hjälp vid.

I inlägg #1 visas ett exempel från två olika templates från Dream Template där man lätt kan se vilken layout som fungerar för färgblinda (den högra) medan den andra kommer skapa svårigheter (den vänstra).

 

I inlägg #2 finns pdf-filen som du kan klippa in en skärmdump utav din hemsida och slå på och av de olika lagren för att se hur just din hemsida kommer att upplevas.

Skapad av: MichaelE

Källa: Färgblind.se

 

Anmäl
2011-01-30 19:54 #1 av: MichaelE

Bild från två designtemplates från Dream Template renderade i olika typer av färgblindhet.

Anmäl
2011-01-30 20:04 #2 av: MichaelE

Photoshop-dokumentet som du kan använda för att testa ifall din fungerar för färgblinda:

ColorBlind.psd (800 kB)

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.