Baggrund i light mode
Baggrund i dark mode
960 px1920 px
Kontakt

Sådan vælger du farver til din virksomheds hjemmeside

Start med farver til baggrund, tekst og knapper. Her får du hjælp til at sammensætte en palette, der passer til din virksomhed og gør hjemmesiden let at læse.

En del af denne guideAf Stefan HilbertPubliceret Ca. 4 min. læsetid

1. Fordel roller, før du vælger nuancer

Saml først farverne fra logo og eksisterende materiale. Markér, hvilke der skal bevares, og hvilke der kan justeres. En identitetsfarve behøver ikke bruges til alt. Den kan skabe genkendelighed i illustrationer eller store flader, mens andre farver løser opgaven med tekst og knapper.

Et tænkt eksempel: En klinik har et logo i en lys grøn nuance. Klinikken kan beholde den grønne farve på udvalgte flader og bruge en mørkere tone til overskrifter. Det er mere fleksibelt end at kræve, at alle links skal have præcis samme lyse farve som logoet. Den konkrete kombination skal stadig måles og afprøves.

RollePraktisk opgaveEksempel på kontrol
BaggrundGive plads til indholdetVirker både korte og lange tekstafsnit?
TekstGøre forklaringen læsbarEr kontrasten målt mod baggrunden?
Primær handlingMarkere det vigtigste næste skridtSer samme handling ens ud på flere sider?
StatusForklare fejl, succes eller ventetidEr betydningen også beskrevet med ord?

Begynd gerne med en lille palette. Flere farver er kun nyttige, hvis der er flere opgaver at skelne mellem. I hovedguiden om visuelt udtryk kan du se, hvordan farvevalget hænger sammen med billeder, skrift og virksomhedens samlede retning.

2. Mål kontrasten på de rigtige kombinationer

Lys grå tekst på hvid baggrund kan være svær at læse. Forskellen mellem tekstens farve og baggrunden kaldes kontrast. Bed din designer om at måle den, så valget ikke kun afhænger af, hvad der ser godt ud på din egen skærm. Designeren kan bruge vejledningen om læsbar tekst og kontrast til at kontrollere farverne.

Gennemgå også de små tekster, knapper og overskrifter oven på billeder. En hvid overskrift kan være tydelig over et mørkt foto, men forsvinde over en lys himmel. Se derfor billedet på både mobil og computer, hvor beskæringen kan være forskellig.

En kontrastværdi er ikke hele vurderingen af læsbarhed. En tynd skrift, lille størrelse eller tæt linjeafstand kan stadig gøre teksten besværlig. Derfor skal kontrastkontrollen følges af en visuel prøve med det indhold, hjemmesiden skal vise. Guiden til skrifttyper hjælper dig med den del.

Undgå at konkludere, at en bestemt farve altid skaber tillid eller flere henvendelser. Jeres valg skal kunne begrundes i identitet, tydelighed og den konkrete brug. En standard for kontrast er heller ikke i sig selv en juridisk vurdering af din virksomheds hjemmeside.

3. Vis betydning med mere end farve

En rød kant om et felt forklarer ikke nødvendigvis, hvad kunden skal rette. Skriv eksempelvis “Indtast din mailadresse”, og forbind beskeden med feltet. Tilsvarende bør en gennemført handling bekræftes med tekst frem for kun at ændre en prik fra grå til grøn. W3C's kriterium om brug af farve forklarer, hvorfor farve ikke må være den eneste visuelle måde at formidle information på.

Prøv knapper og felter på flere måder: Før musen hen over dem, vælg dem med Tab-tasten, og lav en fejl i formularen. Kan du hele tiden se, hvor du er, og hvad du skal gøre? En knap skal være let at genkende, også før du peger på den.

Hvis hjemmesiden har lyst og mørkt tema, skal rollerne have passende værdier i begge. En lys gul markering kan fungere ét sted og forsvinde et andet. Kontrollér også billeder med gennemsigtig baggrund og logoets forskellige versioner. Det er nyttigt at dokumentere disse regler sammen med den øvrige visuelle identitet på hjemmesiden.

4. Godkend en side, ikke kun en palette

Lav en prøve med en overskrift, to tekstafsnit, et billede, et almindeligt link, en kontaktknap og en formularbesked. Se den på både mobil og computer. Vælg ikke ud fra farvefelter alene, for felterne viser hverken tekstmængden eller konkurrencen mellem handlinger.

  • Har hver farve en defineret opgave?
  • Er tekst og baggrund kontrolleret i de kombinationer, der faktisk bruges?
  • Kan links, valg og fejl forstås uden farven alene?
  • Kan du se, hvilken knap du peger på eller har valgt med Tab-tasten?
  • Er eventuelle lyse og mørke temaer gennemgået hver for sig?

Gem farvekoderne sammen med eksempler og tilladte kombinationer. Notér også kombinationer, der ikke skal bruges. Så har den næste redaktør eller udvikler noget mere brugbart end en liste med seks tilfældige nuancer. Har du brug for hjælp til at få reglerne omsat til sider, kan du se, hvordan vi arbejder med hjemmesider til virksomheder.

Skal vi se på din hjemmesides design?

Lad os afprøve din palette med rigtigt indhold, tydelige handlinger og læsbare farvekombinationer.

Tal med os om din hjemmeside