Hopp til hovedinnhold

Fargebruk på web

Publisert
Ansatt sitter foran en PC og jobber med farger til en kunde.
Det er flere grep du kan gjøre på nettsiden din for å sikre at den er universelt utformet, slik at alle dine besøkende får mulighet til å benytte siden uten å støte på problemer. Ett av dem er riktig fargebruk. Heng med videre for å lære mer om temaet og hva du selv kan gjøre for at nettsiden er tilgjengelig for alle!
Universell utforming handler om å tilgjengeliggjøre nettsider for alle, uavhengig av funksjonsevne, alder og utdanningsnivå. På den måten gjør vi det mulig for at alle kan delta på lik linje, som gir gevinst for både samfunnet, virksomheter og ikke minst brukeren.

Ønsker du å vite mer om hvorfor universell utforming er viktig? Da anbefaler vi at du tar en titt innom en av våre tidligere artikler som omhandler temaet, les mer om universell utforming.

Hvorfor er det viktig at farger fungerer godt på web?


Sørger du for at farger på nettsiden din fungerer godt på web, vil også det gi økt brukervennlighet og mer fornøyde kunder. Du sørger for at alle brukergrupper får samme mulighet til å bruke nettsider på lik linje, blant annet personer med nedsatt fargesyn eller fargeblindhet. Husk at kunder ofte blir kjent med bedriften din på nett, og du bør derfor skape et godt førsteinntrykk allerede her for å få de til å velge akkurat deg og din bedrift. Da er brukervennlighet og universell utforming viktige faktorer.

Og som ikke det var nok - god brukervennlighet er også et viktig element dersom du ønsker å dukke opp ved Google-søk! I og med at Google blir mer og mer opptatt av å fremme nettsider med god brukervennlighet, vil det være viktig og positivt om du fokuserer på universell utforming på nettsiden din.


God kontrast mellom tekst og bakgrunn gjør det enklere å benytte en nettside


Ved tilstrekkelig kontrast mellom tekst og bakgrunn på nettsider vil det være mulig å lese tekst for personer med nedsatt syn og fargesyn. I tillegg blir det mye enklere for alle å lese tekst med god kontrast om du for eksempel leser på liten skjerm, ser på avstand, har lite lys på skjermen, eller står ute i skarpt lys.

Når vi snakker om god kontrast, gjelder det hovedsakelig for tekst og bakgrunnsfarge. Eksempler på dette kan være overskrifter, lenketekster, hjelpetekster eller brødtekst. Elementer som tekst i logo og grafiske fremstillinger omfatter ikke dette. Anbefalingen er at man holder seg innenfor et kontrastforhold på 4,5:1. Se fremstilling nedenfor av hvilke kontrastforhold som oppfyller kravene og hvilke som ikke gjør det ved bruk av lilla tekst mot lilla bakgrunn.


Illustrasjon av hvilke kontrastforhold som oppfyller kravene til universell utforming. Bruk av ulike varianter av lilla tekstfarge på lilla bakgrunn.

Bruk flere virkemidler enn kun farge for å formidle informasjon


Hvis du ønsker å formidle informasjon eller vise til en handling brukeren skal gjøre på nettsiden din, bør du ha flere visuelle virkemidler enn bare farge. Dette er viktig i lenketekster, diagrammer, skjemaelementer og feilmeldinger.

Ved for eksempel lenketekster, bør du sørge for at lenketeksten skiller seg ut med er enn bare farge. Her kan du for eksempel bruke fet tekst eller understrek. Dermed muliggjør du at flere personer får med seg informasjonen du ønsker å formidle. Diagrammer bør ha ledetekst som beskriver de ulike kakestykkene, som vist i bildet under.



Illustrasjon av et diagram og hvordan man bør formidle informasjon ved å bruke ledetekst som beskriver ulike kakestykker.

Hva kan du selv gjøre for å sikre at fargene dine fungerer godt på web?


For å undersøke om fargene på nettsiden din fungerer optimalt, bør du ta et dypdykk inn i nettsiden og teste på om alt fungerer som det skal. Sjekk om skjemaelementer og feilmeldinger, lenker og diagrammer skiller seg ut med mer enn en farge, ved å supplere med tekst eller ikoner.

For å undersøke om kontrasten mellom tekst og bakgrunn er god nok, er det flere verktøy du kan benytte. Vi benytter blant annet Colour Contrast Analyser (CCA), en anbefaling fra uutilsynet. Denne krever nedlastning på din datamaskin, og fungerer både på Windows og Mac. Det finnes også en rekke verktøy du kan bruke direkte i din nettleser, som ikke krever nedlastning. Et verktøy du kan benytte da er Colour Contrast Checker.

Tips! For å sikre at farger kan fungere godt på digitale flater, er vårt tips at du lager flere versjoner av en farge. I bedriftens designmanual, en håndbok som beskriver bedriftens visuelle identitet og merkevare, kan du sette opp ulike regler for bruk av fargepaletten. En type regel kan være å lage en oversikt over lysere og mørkere versjoner av en hovedfarge, som vist i bildet under. På denne måten kan du bruke en farge på flere måter. I vårt forslag har vi tatt utgangspunkt i lilla. Her vil de lyseste fargene fungere godt sammen med svart tekst, mens de aller mørkeste fargene fungerer med hvit. Inspirasjonen vår er hentet fra Ruters designmanual og deres fargepalett.

 


Illustrasjon av en fargepalett i lilla farge, med bruk av lysere og mørkere varianter.

Nysgjerrig på hva mer du kan gjøre for å sørge for at din nettside er universelt utformet og brukervennlig?


Det kommer flere interessante og spennende artikler om universell utforming. Følg med på våre nettsider og sosiale mediekanaler for å holde deg oppdatert!

 

Står du fast eller trenger hjelp med å sikre at fargene dine fungerer godt på web? 

Vi kan bistå med å gi deg og din bedrift anbefalinger på fargebruk på web. Ta kontakt på hei@netspire.no for å høre hvordan vi kan hjelpe deg! Hos oss møter du blant annet vår interaksjonsdesigner, Jorun, som har fagkunnskap om temaet. 
Ansatte står foran PC-skjermer og diskuterer.