Det skrives mye om fargepsykologi i webdesign, om at blått signaliserer tillit og rødt skaper hastverk. Det er ikke helt feil, men det er langt mindre viktig enn tre andre ting: at teksten er lesbar, at fargene brukes konsekvent, og at det er tydelig hva som er klikkbart.
Vi har aldri sett et prosjekt der fargevalget avgjorde om løsningen ble en suksess. Vi har sett flere der dårlig kontrast gjorde at folk ikke fikk gjort det de kom for.
Kontrast er det eneste som er målbart
Dette er ikke en smakssak, det er et krav. Tekst skal ha et kontrastforhold på minst 4,5 til 1 mot bakgrunnen, og stor tekst minst 3 til 1.
Lysegrå tekst på hvit bakgrunn ser elegant ut i en designskisse på en god skjerm i et godt opplyst rom. Den er tilnærmet uleselig for mange eldre brukere, for folk med nedsatt syn, og for alle som sitter ute i sollys. Det er en betydelig del av besøkende for de fleste bedrifter.
Er nettsiden rettet mot allmennheten, er dette dessuten lovpålagt i Norge gjennom kravet om WCAG på nivå AA. Mer om det i skap en inkluderende nettside.
Kontrast er enkelt å sjekke. Verktøy finnes gratis, og det tar minutter. Gjør det før designet godkjennes, ikke etter at siden er bygget.
Bruk få farger, konsekvent
En god palett trenger ikke være stor. I praksis holder det med én hovedfarge, én aksentfarge som brukes sparsomt, og en skala av gråtoner.
Det viktigste er at fargene betyr noe. Hvis aksentfargen brukes på knapper, skal den ikke også brukes på overskrifter, for da slutter den å signalisere at noe er klikkbart. Når alt er fremhevet, er ingenting fremhevet.
Dette er også grunnen til at en nettside med mange farger ofte føles rotete uten at man helt kan si hvorfor. Øyet leter etter mønstre, og finner det ikke.
Farge alene skal aldri bære informasjon
Rundt åtte prosent av menn har en form for fargeblindhet, og for de fleste av dem er rødt og grønt vanskelig å skille.
Det betyr at en status som bare vises som en rød eller grønn prikk, ikke kommuniserer for alle. Legg til et ikon, en tekst eller en form i tillegg. Det samme gjelder feilmeldinger i skjemaer: rød ramme rundt feltet er ikke nok, det må også stå hva som er galt.
Dette er en av de vanligste feilene vi finner når vi gjennomgår eksisterende løsninger, og en av de enkleste å rette.
Aksentfargen bør være reservert
Den mest praktiske regelen vi bruker: velg én farge som betyr "her skal du klikke", og bruk den bare til det.
Da slipper brukeren å lære seg hvordan akkurat din side fungerer. Vedkommende ser fargen og vet hva den betyr, uten å tenke. Det er hele poenget med god design, at folk ikke trenger å tenke på grensesnittet.
Samme prinsipp gjelder for farger som varsler. Rødt bør bety at noe er galt, ikke være en dekorativ farge et annet sted på siden.
Mørk modus er blitt en forventning
Særlig blant yngre brukere forventes det at løsningen fungerer i mørk modus. Det er relativt rimelig å ta hensyn til når designet lages, og betydelig dyrere å legge på i etterkant.
Vær samtidig oppmerksom på at kontrastkravene gjelder begge veier. Lys grå tekst på mørk bakgrunn er like uleselig som det motsatte, og mørk modus som ikke er sjekket, er ofte verre enn ingen mørk modus.
Fargene bør defineres ett sted
Dette er teknisk, men det har praktisk betydning for deg som kunde.
Når fargene er definert som variabler ett sted i koden framfor spredt utover, kan hele profilen justeres uten å endre hundre filer. Det betyr at en fremtidig oppdatering av den visuelle profilen er en liten jobb framfor et prosjekt.
Spør leverandøren om dette. Svaret sier noe om hvor ryddig løsningen er bygget.
Kort sagt
Sjekk kontrasten. Bruk få farger og gi dem en betydning. La aldri farge være eneste bærer av informasjon. Og reserver én farge for handlinger.
Gjør du det, spiller det mindre rolle om hovedfargen er blå eller grønn.
Vil du ha en gjennomgang av en løsning dere har, eller hjelp med en ny? Se hvordan vi jobber med design og nettsider, eller ta kontakt.