Hvordan kontrastere bakgrunn og forgrunnsfarger i webdesign

click fraud protection

Hva du skal vite

  • Bruk diagrammet i denne artikkelen for å bestemme de beste kombinasjonene av bakgrunns- og forgrunnsfarger for websidesign.
  • Bruk et online verktøy som CheckMyColors.com for å teste nettstedets farger og rapportere om kontrastforholdet mellom elementene på siden.
  • Bruk et verktøy som ContrastChecker.com for å teste valgene dine mot Retningslinjer for tilgjengelighet på nettinnhold.

Denne artikkelen forklarer hvordan du effektivt kan skape kontrast mellom bakgrunns- og forgrunnsfarger i webdesign.

Hvordan lage sterk kontrast

Noen farger kan være lyse og vises levende på en bestemt bakgrunnsfarge, for eksempel blå på svart, men de er dårlige kontrastvalg. Hvis du for eksempel skulle lage en side i all blå tekst på svart bakgrunn, ville leserne oppleve anstrengelse i øyet veldig raskt.

Studer diagrammet nedenfor for å få en følelse av de beste kombinasjonene av bakgrunn / forgrunn.

Fargekontrastbord
Lifewire / Jeremy Girard

Det er regler og beste fremgangsmåter for kontrast, men som designer må du alltid evaluere disse reglene for å sikre at de fungerer i ditt spesielle tilfelle.

instagram viewer

Bruk Online Contrast Checker Tools

I tillegg til din egen designfølelse, kan du prøve noen verktøy på nettet for å teste nettstedets fargevalg. CheckMyColors.com vil teste alle nettstedets farger og rapportere om kontrastforholdet mellom elementene på siden.

I tillegg, når du tenker på fargevalg, bør du også vurdere tilgjengeligheten til nettsteder og personer som har former for fargeblindhet. WebAIM.org kan hjelpe med dette, som det kan ContrastChecker.com, som vil teste valgene dine mot Retningslinjer for tilgjengelighet på nettinnhold.

Hvorfor er kontrast viktig?

Sterk kontrast spiller en viktig rolle i suksessen til nettsteds design. Tilstrekkelig kontrast sikrer en kvalitetsbrukeropplevelse og lettere lesbarhet som vil bidra til et langsides suksess. Nettsteder som er for lave i kontrast, kan imidlertid være vanskelige å lese og bruke, noe som vil ha en negativ effekt på effektiviteten til nettstedet.

Selv om det kan være enkelt å bestemme hvilke farger som ikke fungerer bra sammen, er det et tøffere spørsmål å bestemme hvilke farger som pares effektivt, både i motsetning til andre og innenfor utformingen av en nettsted.

Merkevarestandarder og kontrasterende fargevalg

Kontrast er bare en av faktorene du bør vurdere når du velger farger for nettstedsdesignet. Når du velger farger, må du sannsynligvis også være oppmerksom på merkevarestandardene for klienten, enten det er et selskap, en annen organisasjon eller til og med et individ. Selv om fargepaletter kan være i samsvar med organisasjonens merkevarelinjer, kan de ikke oversettes godt for online presentasjon.

Hva betyr de forskjellige fargene for grafiske kunstnere?

For eksempel er gule og lyse greener veldig utfordrende å bruke effektivt på nettsteder. Hvis disse fargene er i selskapets retningslinjer for merkevare, vil de sannsynligvis bare trenge å brukes som aksentfarger, siden det er vanskelig å finne farger som står i kontrast til noen av dem.

Tilsvarende, hvis merkevarefargene dine er svarte og hvite, betyr dette stor kontrast, men hvis du har et nettsted med lange mengder tekst, en svart bakgrunn med hvit tekst kommer til å gjøre lesing veldig til en anstrengende opplevelse til tross for den iboende styrken av kontrast mellom svart og hvit. I dette tilfellet anbefales det å invertere fargene ved å bruke svart tekst på en hvit bakgrunn. Det er kanskje ikke så visuelt interessant, men det er et langt bedre valg av kontrast og lesbarhet.

instagram story viewer