# Fargevalg til nettsteder: gi hver farge en oppgave

[Canonical HTML page](https://gradiently.design/nb/guide/website-color-scheme)

Et nettsted trenger færre farger enn du tror, og hver trenger en oppgave. Gi dem roller og sjekk dem mot hverandre, så holder hele nettstedet seg konsekvent når det vokser.

## The short version

- Et nettsteds fargevalg fungerer best som en kort rolleliste: sidebunn, flate, tekst, dempet tekst, kant, aksent og statusfarger.
- De fleste nettsteder trenger én merkevareaksent, hovedsakelig til knapper og lenker, mens nøytrale farger gjør resten.
- WCAG krever kontrast på minst 4,5:1 for vanlig tekst og 3:1 for stor tekst og grensesnittdeler som inndatafeltets kant.
- Å lagre farger som egendefinerte CSS-egenskaper, eller designtokens, lar hele nettstedet bytte tema ved å erstatte ett verdisett.
- Et mørkt tema er et eget verdisett for de samme rollene, ikke en invertering av det lyse.

Godt **fargevalg til nettsteder** er ikke en moodboard med fem favorittfarger. Det er en kort liste roller med én farge hver: sidebunn, hevede flater, brødtekst, roligere tekst, kanter, én aksent til handlinger og rødt, ravgult og grønt til status. Velg merkevareaksenten først, bygg rolige nøytrale toner rundt, sjekk kontrasten i hvert tekstpar og lagre resultatet som CSS-variabler, så hele nettstedet bruker samme verdier.

## Rollene alle nettsteder trenger

| Rolle | Brukes til | Tommelfingerregel |
| --- | --- | --- |
| Bunn | Sidebakgrunnen | Et svakt fargeskjær virker mykere enn rent hvitt eller svart |
| Flate | Kort, paneler, menyer | Ett trinn lysere enn bunnen i lyst tema, enda lysere i mørkt |
| Tekst | Overskrifter og brødtekst | Svært høy kontrast mot bunn og flate |
| Dempet tekst | Bildetekster, etiketter, metadata | Fortsatt minst 4,5:1 mot bunnen |
| Kant | Skillelinjer og feltkanter | Dekorative skiller kan være svake; feltkanter trenger 3:1 |
| Aksent | Knapper, lenker, valgte tilstander | Merkevarefargen brukt sparsomt, så den betyr «handle her» |
| Status | Feil, advarsler, suksess | Rødt, ravgult og grønt tilpasset aksenten |

Sju roller dekker de fleste nettsteder. Navngi farger etter rolle fremfor fargetone, så et senere merkevarebytte blir én endring.

## Slik velger du nettstedets farger

1. **Begynn med én aksent** Merkevarefargen din eller fargen du vil at folk skal forbinde med deg. Har du ingen, hjelper [velge merkevarefarger](https://gradiently.design/nb/guide/how-to-choose-brand-colors).
2. **Ton de nøytrale mot den** Gråtoner med et hint av aksentens fargetone føles beslektet. En blågrønn merkevare får kjølige, litt blå gråtoner; en terrakottamerkevare får varme, kremaktige.
3. **Velg lyst, mørkt eller begge** Velg temaet flest besøkende vil se først, og design det fullt før du begynner på det andre.
4. **Sjekk alle tekstpar** Tekst på bunn, tekst på flate, dempet tekst på begge og hvitt på aksentknappen. Rett alt under 4,5:1.
5. **Bruk 60, 30, 10** Omtrent 60% bunn, 30% flater og tekst, 10% aksent. [60 30 10-regelen](https://gradiently.design/nb/guide/60-30-10-rule) forklarer balansen.

## Tre nettstedspaletter å starte fra

- Bunn: #f7f9fb
- Flate: #ffffff
- Tekst: #14202b
- Dempet tekst: #52606d
- Feltkant: #8a96a3
- Blågrønn aksent: #0f766e

Rolig klinikk, lyst. Tekst på bunn gir omtrent 15,7:1, dempet tekst 6,1:1, hvitt på blågrønn knapp 5,5:1, og feltkanten når akkurat 3:1 på hvitt.

- Krembunn: #fbf6ef
- Havreflate: #efe4d6
- Espressotekst: #2a1f17
- Dempet tekst: #635e68
- Terrakottaaksent: #b4441c

Varm kafé, lyst. Espresso på krem gir omtrent 15:1; hvitt på terrakotta omtrent 5,5:1, så knappetekst er leselig.

- Nattbunn: #0f0e17
- Hevet flate: #1a1926
- Tekst: #ecebf3
- Dempet tekst: #a5a3b8
- Syrinaksent: #a78bfa

Nattstudio, mørkt. Brukket hvit fremfor rent hvit tekst reduserer blending; syrinaksenten gir omtrent 7:1 mot bunnen, så bruk mørk tekst på syrinknapper.

## Kontrastregler som holder nettstedet leselig

[WCAGs kontrastretningslinjer](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) setter minstemålet: 4,5:1 for vanlig tekst, 3:1 for stor tekst, omtrent 24 px eller 19 px fet, og 3:1 for grensesnittkomponenter som feltkanter og meningsbærende ikoner. [WebAIMs kontrastkontroll](https://webaim.org/resources/contrastchecker/) tester alle par. [Fargekontrastguiden](https://gradiently.design/nb/guide/color-contrast-accessibility) dekker årsakene og særtilfellene.

### Vanlige feil

- Lysegrå plassholdertekst som eneste etikett
- Hvit tekst på lys merkevarefarge som gul eller himmelblå
- Lenker som bare skilles fra brødtekst med farge
- En lys kant som eneste avgrensning av et skjemafelt
- Feilmeldinger som bare vises i rødt

### Løsninger

- Ekte etiketter over felt, dempet tekst med 4,5:1
- Mørk tekst på lyse aksenter, eller en dypere aksentnyanse
- Understrek lenker i brødtekst, eller gjør dem fete
- Feltkanter med 3:1 mot bakgrunnen
- Et ikon eller ord ved siden av fargen

## Skriv fargevalget som tokens

Lagre hver rolle én gang som en egendefinert CSS-egenskap og bruk bare disse variablene i stilene. Da endres mørkt tema, sesongkampanje eller ny profil i én verdiblokk fremfor gjennom et søk i alle filer. Dette er kjernen i [designtokens](https://gradiently.design/nb/guide/design-tokens).

```css
:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }
```

Roller fremfor fargetoner. Merk at `--on-accent` bytter fra hvitt til nesten svart, fordi en lys syrinknapp trenger mørk tekst.

## Mørk modus er en egen palett

Å invertere en lys palett fungerer sjelden. Mettede aksenter lyser for sterkt på svart, skygger forsvinner og rent hvit tekst blender. Bygg mørk modus som et andre verdisett: nesten svart bunn med et fargeskjær, flater som blir lysere når de heves, mykere tekst og en aksent lysnet til god kontrast. [Design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design) går dypere.

## Hvor merkevarefargen brukes utover knapper

Brukes aksenten bare på knapper, kan nettstedet virke generisk. Løsningen er ett sted merkevaren får uttrykke seg, som toppbildet, et fremhevet felt eller bunnteksten. En rik gradient i merkevarens fargefamilie fungerer godt der, mens resten av siden er rolig og leselig.

Et bredt toppbilde for en fysioterapiklinikk med kort overskrift på en rik gradient

Ett uttrykksfullt felt i 1920×1080 bærer merkevaren; resten av nettstedet bruker de rolige rollene over.

En Mark fra Gradiently kan være dette uttrykksfulle laget: en bakgrunn ingen andre har, som velger tekstfarge fra egen palett for hver linje og holder overskriftene leselige. Se [fargeharmoni](https://gradiently.design/nb/guide/color-harmony) og [design av toppseksjonen](https://gradiently.design/nb/guide/hero-section-design) for mer om kombinasjoner.

## FAQ

### Hvor mange farger bør et nettsted ha?

Vanligvis én merkevareaksent, tre til fem nøytrale farger til bunn, flater, tekst og kanter, og tre statusfarger. Flere aksenter gjør det vanskeligere å se hva som er klikkbart.

### Hvordan velger jeg farger til nettstedet?

Begynn med merkevareaksenten, ton nøytrale gråfarger mot den, velg lyst eller mørkt tema og sjekk at alle tekstpar har minst 4,5:1 i kontrast.

### Hvilken kontrast trenger nettstedstekst?

WCAG krever minst 4,5:1 for vanlig tekst og 3:1 for stor tekst og grensesnittdeler som feltkanter.

### Bør en nettstedbakgrunn være rent hvit?

Det er ikke nødvendig. En svakt farget brukket hvit virker ofte roligere og lar hvite kort skille seg ut som flater.

### Hvordan legger jeg til mørk modus i fargevalget?

Definer hver fargerolle som en egendefinert CSS-egenskap, og legg til et andre verdisett i en `prefers-color-scheme: dark`-mediespørring.