Fargebruk på web

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.

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.

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.

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!