# Farveskemaer til websites: sådan vælger du farver til en side

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

Et website har brug for færre farver, end du tror, og hver af dem skal have en opgave. Giv dem roller, tjek dem op mod hinanden, så forbliver hele siden ensartet, mens den vokser.

## The short version

- Et farveskema til et website virker bedst som en kort liste af roller: sidens bund, flader, tekst, dæmpet tekst, kanter, accent og statusfarver.
- De fleste websites har brug for én brandaccent, brugt mest til knapper og links, mens neutrale farver klarer resten.
- WCAG kræver et kontrastforhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst og dele af brugerfladen som kanter på inputfelter.
- Når farver gemmes som CSS custom properties, eller design tokens, kan et helt website skifte tema ved at bytte ét sæt værdier.
- Et mørkt tema er et separat sæt værdier til de samme roller, ikke en omvending af det lyse.

Et godt **farveskema til et website** er ikke et moodboard med fem yndlingsfarver. Det er en kort liste af roller, hver udfyldt af én farve: sidens bund, hævede flader, brødtekst, mere afdæmpet tekst, kanter, én accent til handlinger og rød, rav og grøn til status. Vælg din brandaccent først, byg rolige neutrale farver omkring den, tjek kontrasten i hver tekstkombination, og gem så resultatet som CSS-variabler, så hele siden bruger de samme værdier.

## De roller, ethvert website har brug for

| Rolle | Bruges til | Tommelfingerregel |
| --- | --- | --- |
| Bund | Sidens baggrund | Let tonet i stedet for helt hvid eller sort føles blødere |
| Flade | Kort, paneler, menuer | Et trin lysere (lyst tema) eller lysere endnu (mørkt tema) end bunden |
| Tekst | Overskrifter og brødtekst | Meget høj kontrast mod bund og flade |
| Dæmpet tekst | Billedtekster, etiketter, metadata | Stadig mindst 4,5:1 mod bunden |
| Kant | Skillelinjer og kanter på inputfelter | Dekorative skillelinjer kan være svage; kanter på inputfelter skal have 3:1 |
| Accent | Knapper, links, valgte tilstande | Din brandfarve, brugt sparsomt, så den betyder “gør noget her” |
| Status | Fejl, advarsler, succes | Rød, rav, grøn, afstemt, så de passer til din accent |

Syv roller dækker de fleste websites. Navngiv farver efter rolle, ikke kulør, så det er én rettelse at skifte brandfarve senere.

## Sådan vælger du farver til et website

1. **Start med én accent** Din brandfarve, eller den, du vil have folk til at forbinde med dig. Har du ikke en, hjælper [sådan vælger du brandfarver](https://gradiently.design/da/guide/how-to-choose-brand-colors).
2. **Tone de neutrale farver mod den** Grå med et strejf af accentens kulør føles beslægtet med den. Et petrolfarvet brand får kølige, let blålige grå; et terrakottabrand får varme, cremede.
3. **Vælg lyst, mørkt eller begge** Vælg det tema, de fleste besøgende ser først, og design det færdigt, før du begynder på det andet.
4. **Tjek hver tekstkombination** Tekst på bund, tekst på flade, dæmpet tekst på begge, hvid på accentknappen. Ret alt under 4,5:1.
5. **Brug 60, 30, 10** Cirka 60 % bund, 30 % flader og tekst, 10 % accent. [60 30 10-reglen](https://gradiently.design/da/guide/60-30-10-rule) forklarer balancen.

## Tre farvepaletter til websites at starte fra

- Bund: #f7f9fb
- Flade: #ffffff
- Tekst: #14202b
- Dæmpet tekst: #52606d
- Inputkant: #8a96a3
- Petrolaccent: #0f766e

Rolig klinik, lys. Tekst på bund er omkring 15,7:1, dæmpet tekst 6,1:1, hvid på den petrolfarvede knap 5,5:1, og inputkanten når lige 3:1 på hvid.

- Cremebund: #fbf6ef
- Havreflade: #efe4d6
- Espressotekst: #2a1f17
- Dæmpet tekst: #635e68
- Terrakottaaccent: #b4441c

Varm café, lys. Espresso på creme er omkring 15:1; hvid på terrakotta omkring 5,5:1, så knaptekster forbliver læsbare.

- Natbund: #0f0e17
- Hævet flade: #1a1926
- Tekst: #ecebf3
- Dæmpet tekst: #a5a3b8
- Syrenaccent: #a78bfa

Natstudie, mørk. Råhvid tekst i stedet for helt hvid mindsker blænding; syrenaccenten er omkring 7:1 på bunden, så brug mørk tekst på syrenfarvede knapper.

## Kontrastregler, der holder et website læsbart

[WCAG’s retningslinjer for kontrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) sætter minimum: 4,5:1 for normal tekst, 3:1 for stor tekst (omkring 24 px, eller 19 px fed) og 3:1 for komponenter i brugerfladen som kanter på inputfelter og ikoner, der bærer betydning. [WebAIM’s kontrasttjek](https://webaim.org/resources/contrastchecker/) tester ethvert par. Vores [guide til farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility) dækker begrundelserne og grænsetilfældene.

### Almindelige fejl

- Lysegrå pladsholdertekst brugt som eneste etiket
- Hvid tekst på en bleg brandfarve som gul eller himmelblå
- Links, der kun adskiller sig fra brødteksten ved farven
- En bleg kant som eneste omrids af et formularfelt
- Fejlbeskeder, der kun vises med rødt

### Løsninger

- Rigtige etiketter over felterne, dæmpet tekst på 4,5:1
- Mørk tekst på lyse accenter, eller en dybere nuance af accenten
- Understreg links i brødtekst, eller gør dem fede
- Kanter på inputfelter med 3:1 mod deres baggrund
- Et ikon eller ord ved siden af farven

## Sådan koder du dit farveskema som tokens

Gem hver rolle én gang som en CSS custom property, og brug kun de variabler i dine styles. Så er et mørkt tema, en sæsonkampagne eller et rebrand en ændring i én blok værdier, ikke en søgning gennem hver fil. Det er kerneideen i [design tokens](https://gradiently.design/da/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, ikke kulører. Bemærk, at `--on-accent` skifter fra hvid til næsten sort, fordi en lys syrenfarvet knap har brug for mørk tekst.

## Dark mode er sit eget skema

Det virker sjældent at vende en lys palet om. Mættede accenter gløder for kraftigt på sort, skygger forsvinder, og helt hvid tekst blænder. Byg dark mode som et andet sæt værdier: en næsten sort bund med et strejf af kulør, flader, der bliver lysere, jo højere de ligger, blødere tekst og en accent, der er gjort lysere, til den når kontrasten. [Design til dark mode](https://gradiently.design/da/guide/dark-mode-design) går dybere.

## Hvor brandfarven rækker ud over knapperne

Bruges accenten kun på knapper, kan siden føles generisk. Svaret er ikke mere accent overalt, men ét sted, hvor brandet får lov at være udtryksfuldt: hero-sektionen, et featurebånd eller footeren. En fyldig gradient i brandets farvefamilie virker godt der, mens resten af siden forbliver rolig og læsbar.

En bred hero-sektion til en fysioterapiklinik med en kort overskrift på en fyldig gradient

Ét udtryksfuldt bånd i 1920×1080 bærer brandet; resten af siden bruger de rolige roller ovenfor.

En Mark fra Gradiently kan være det udtryksfulde lag: en baggrund, ingen andre har, som vælger en skriftfarve fra sin egen palet til hver linje, så overskrifterne forbliver læsbare. Mere om kombinationer finder du i [farveharmoni](https://gradiently.design/da/guide/color-harmony) og [design af hero-sektioner](https://gradiently.design/da/guide/hero-section-design).

## FAQ

### Hvor mange farver skal et website have?

Som regel én brandaccent, tre til fem neutrale farver til bund, flader, tekst og kanter og tre statusfarver. Mere end én accent gør det sværere at se, hvad der kan klikkes på.

### Hvordan vælger jeg et farveskema til mit website?

Start med din brandaccent, tone neutrale grå mod dens kulør, vælg et lyst eller mørkt tema, og tjek, at hver tekstkombination har mindst 4,5:1 i kontrast.

### Hvilket kontrastforhold skal tekst på et website have?

WCAG kræver mindst 4,5:1 for normal tekst og 3:1 for stor tekst og dele af brugerfladen som kanter på inputfelter.

### Skal baggrunden på et website være helt hvid?

Det behøver den ikke. En ganske let tonet råhvid føles ofte roligere og lader hvide kort skille sig ud som flader.

### Hvordan tilføjer jeg dark mode til mit farveskema?

Definér hver farverolle som en CSS custom property, og giv så et andet sæt værdier inden i en `prefers-color-scheme: dark`-mediequery.