Vi tilbringer mer og mer av livene våre online, og mange av oss er avhengige av visuelle markører på nettet. Webdesignere gjør oss til lags ved å bruke farge som eneste måte å formidle informasjon til brukeren. Når vi fyller ut skjemaer feil, merkes det med rødt. Når vennene våre logger seg på for å chatte, oppstår det grønne sirkler ved navnet deres.

Dette kan virke som en god tilnærming for å beholde et minimalistisk design med få visuelle markører, men i praksis er det helt feil: Siden blir mindre brukervennlig for de fleste brukerne, og absolutt ubrukelige for de som er fargeblinde. Dette kan få direkte konsekvenser for bedriften din, siden  1 av 12 menn, og 1 av 200 kvinner har en eller annen form for fargeblindhet, noe som utgjør 4% av verdens befolkning.

La oss med en gang gjøre det klart at ingen kommer til nettstedene våre som ufør. De kan ha funksjonsnedsettelser, men vi gjør dem uføre ved å sette hindre i veien for dem. Om vi ikke liker å bortvise potensielle kunder, burde vi passe på at det vi tilbyr passer med evnene til brukerne våre, ikke motsatt. La oss se på noen måter vi kan passe på at vi legger til rette for brukerne våre.

Ikke bare kommuniser med farge

Det å bruke farge til å kommunisere med er ikke en dårlig idé i seg selv. For noen kunder er det å tolke farger den raskeste måten å oppfatte visuell informasjon. Andre brukere, derimot, blir ekskludert av denne tilnærmingen. Så tommelfingerregelen er at du bør ha andre visuelle markører enn farge.

Heldigvis finnes det mange andre måter å skille visuelt mellom komponenter på nettet. Vurder å få designet ditt til å fungere ved å variere:

  • Mønster
  • Fyll
  • Størrelser
  • Kanter
  • Ikoner
  • Mellomrom

Grayscale mockup of common web components: A line chart with different patterns for each line. A pie chart using different sizes for each slice. A circular progress diagram with the main part solid and another part a dotted or dashed.

I disse eksemplene er alle de visuelle komponentene betegnet som universelt utformede, uansett om du legger til farge eller ikke. For farge er ikke det eneste som skiller.


Her har vi samlet noen eksempler på firmaer som får dette til.

Eksempel: Trello

Administrasjonsverktøyet Trello er svært avhengig av farger. For å komme rundt dette har de lagt til en innstilling som heter "Fargeblindvennlig modus". Da legges unike mønster til prosjektfargene, slik at hver del blir fremhevet om du har fargeblindhet eller ikke.

Screenshot of the Trello web app. It has 3 swimlanes: To do, Doing, and Done. Each has a number of sub-tasks marked with solid colored bars representing categories.
Et Trello-brett med fargeblindvennlig modus skrudd av.

Screenshot of the Trello web app. It has 3 swimlanes: To do, Doing, and Done. Each has a number of sub-tasks marked with differently patterned bars representing categories. Some patterns have dots, some have dashes, some have zig-zag lines.
Et Trello-brett med fargeblindvennlig modus skrudd på.

Eksempel: Spotify

Musikkappen Spotify bruker klikkbare ikoner, men legger til en grønnfarge på ikoner som som er aktivert. For bedre å kunne skille mellom aktivert og deaktivert, har Spotify lagt til en grønn prikk under aktiverte ikoner.

Screenshot of the Spotify app playing "Colors" by the artist Beck. Buttons that are activated turn from white to green, but they also show a green dot below them.Screenshot of the Spotify app playing "Colors" by the artist Beck. Buttons that are activated turn from white to green, but they also show a green dot below them.
Spotify bruker visuell kommunikasjon på en universelt utformet måte, slik at det ikke er behov for å trykke på behovet for å sjekke om det er aktivert.

Eksempel: Slack

Som eksempel på hvordan man viser en brukers status, kan man bruke Slack, den populære kommunikasjonsappen. Når noen er online blir dette markert med en helt grønn sirkel ved navnet deres, mens de som er offline har bare har omrisset av en sirkel. Siden sirkelformene er ulike, er vi ikke bare avhengige av fargene.

Screenshot of the Slack app. Online users are marked with a full green circle. Offline users are marked with just a gray circular outline.
I Slack-appen har brukere som er online en grønn sirkel ved navnet sitt, og offline-brukere har et omriss av en sirkel.

Bruk gråskala-testen

Når designerne våre, i Siteimprove, er i tvil om de skal bruke farger, prøver vi å bruke en teknikk kalt gråskala-test. Fremgangsmåten er svært enkel: Fjern alle fargene fra designet eller rammeverket, slik at alt ses i gråskala. Kan du fortsatt forstå hva designet prøver å kommunisere? Vil en utenforstående også kunne gjøre det?

A screenshot of wireframes in grayscale to show how design without colors can work

Eksempel på et rammeverk som fungerer uten farger.

Noen designere har gjort det til en vane å lage den første skissen i svart-hvitt. Ved å gjøre det lar de seg ikke distrahere av fargevalg, og fokuserer heller på grunnstrukturen. Som en hyggelig bonus slipper de også hodepinen det er å prøve å ta fargeblindhet i betraktningen mot slutten av designprosessen.

Legger vi et gråskala-filter på de tre casene vi har sett på, er det tydelig at de fortsatt fungerer, og ikke avhenger av spesifikke farger.


Spotify bruker prikker under knapper for å vise at de er aktivert. Trello bruker mønster til å skille mellom prosjektfarger. Slack bruker en hel sirkel for å vise at en bruker er online, mot et omriss av en sirkel for de som er offline.

Vårt nyeste verktøy: The Accessibility Explorer

Dersom du ikke selv er fargeblind, er det vanskelig å kunne oppdage slike feil i designet. Vi i Siteimprove mener at det burde være lettere å gjøre digitale produktet universelt utformede, og derfor oppgraderer vi Accessibility-produktet vårt med Accessibility Explorer.

Screenshot of the Siteimprove Accessibility Page Report. The Accessibility Explorer popover is expanded showing options to start one of 3 filters: Total color blindness. Red-green color blindness. Blue-yellow color blindness.

Siteimproves Accessibility siderapport med forskjellige filtreringsalternativer: Total fargeblindhet. Rødgrønn fargeblindhet. Blå-gul fargeblindhet.

Med Accessibility Explorer kan du oppleve nettstedet ditt i ulike fargespekter, ut fra ulike typer fargeblindhet. Det er også mulig å vise en nettside i gråskala, som er slik mennesker med en mer alvorlig form for fargeblindhet ser verden. Dette nye verktøyet kommer til å gjøre det lettere for deg å teste nettstedet, og å identifisere problemer som påvirker mange av brukerne dine.

Screenshot of the Siteimprove Accessibility Page Report. The Accessibility Explorer popover is expanded showing options to start one of 3 filters: Total color blindness. Red-green color blindness. Blue-yellow color blindness.

Siteimproves Accessibility siderapport med rødgrønn fargeblindhetsfilter. 

Når du unngår bare å være avhengig av farge, gjør du nettstedet mer brukervennlig for alle. Brukerne dine kan velge mellom flere metoder for raskt å interagere med innholdet ditt. Det gjør at produktet ditt fungerer bra for folk med ulik kulturell bakgrunn, der farger har ulik betydning. Det er også bra for folk som arbeider i sollys, eller folk som har aktivert nattmodus, som ofte får farger til å bli mindre gjenkjennelige.

Vi tror at bra design er noe som skjer når du ser det fra mange ulike perspektiv, og bra design vet du at alle har nytte av.