# Aksentfarge: slik velger du den som gjør jobben

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

Aksenten er den minste delen av en palett og den delen folk legger merke til først. Slik velger du en som skiller seg fra basisfargene, holder den sjelden nok til at den virker, og setter den i CSS.

## The short version

- En aksentfarge er en kontrasterende farge brukt i små mengder for å trekke oppmerksomheten mot det viktigste elementet, som en knapp, en pris eller et ord i en overskrift.
- I 60 30 10-regelen er aksenten de ti prosentene, og det er sjeldenheten som gjør den effektiv.
- En god aksent skiller seg fra basisfargene på minst én tydelig måte: fargetone, lyshet eller metning.
- En aksent som brukes til mange forskjellige oppgaver, slutter å signalisere noe, så gi den én hovedrolle.
- I CSS farger egenskapen accent-color innebygde avkrysningsbokser, radioknapper, glidebrytere og fremdriftsindikatorer.

En **aksentfarge** er den lille, kontrasterende fargen i en palett som peker på det som betyr noe: knappen du skal trykke på, prisen, det ene ordet i en overskrift. For å velge en som gjør jobben starter du fra basisfargene og velger noe som tydelig skiller seg fra dem i fargetone, lyshet eller metning, og så bruker du den sparsomt. I den kjente 60 30 10-fordelingen er den de ti prosentene. Jo sjeldnere den dukker opp, desto mer betyr hver gang den gjør det.

## Hva en aksentfarge er til for

Det meste av et design er basis- og støttefarger: bakgrunner, paneler, tekst. Aksenten er unntaket som forteller øyet hvor det skal gå. Det gjør den til den mest funksjonelle fargen du har. På et nettsted markerer den hovedhandlingen; på en plakat lander den på datoen; i en merkevare blir den detaljen folk husker, et farget punktum eller én enkelt klar stripe.

[60 30 10-regelen](https://gradiently.design/nb/guide/60-30-10-rule) gir proporsjonene: rundt seksti prosent dominerende farge, tretti prosent sekundærfarge, ti prosent aksent. Se på de ti som et tak, ikke et mål. Mange av de beste oppsettene bruker langt mindre.

Et stående innlegg som annonserer åpent sent på fredager, med en liten etikett over overskriften

I et innlegg som dette hører aksenten hjemme på ett sted, for eksempel den lille etiketten over overskriften, og ingen andre steder.

Et stående listeinnlegg med tittelen Tre ting du bør ta med til en workshop

Samme prinsipp i et listeinnlegg: hvis aksenten dukker opp, markerer den bare overskriften.

## Slik velger du en aksentfarge

Kontrast er hele jobben. Se på basis- og sekundærfargene dine og spør hva de har til felles, og gjør så aksenten ulik dem på minst én tydelig måte.

1. **Kontrast i fargetone** Velg fra motsatt side av [fargesirkelen](https://gradiently.design/nb/guide/color-wheel). Paletter i marine og petrol tar varme aksenter som korall eller rav; varme paletter tar blått eller grønt. [Komplementærfarger](https://gradiently.design/nb/guide/complementary-colors) er det klassiske valget.
2. **Kontrast i lyshet** På en mørk base, en lys aksent; på en blek base, en dyp en. En dempet palett av gråtoner kan like gjerne ta en svart aksent som en klar en.
3. **Kontrast i metning** Blant myke, støvete farger leses én mettet farge som aksenten, selv om den har samme fargetone. En leirepalett med en ren sinoberrød aksent er et godt eksempel.
4. **Test den i riktig størrelse** En aksent er som regel liten. Sjekk den som knappetekst eller en tynn understrek, ikke som en stor fargeprøve, fordi små fargeflater ser mørkere og mattere ut.

- Marinebase, korallaksent: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Sandbase, dypblå aksent: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Skogbase, safranaksent: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Syrinagrå base, rød aksent: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Svart base, limeaksent: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Blushbase, koksgrå aksent: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Seks paletter tegnet i omtrent 70, 20 og 10 prosent. Hver aksent skiller seg fra basen i fargetone, lyshet eller begge.

## Hvor du skal bruke aksenten, og hvor du ikke skal

| Bruk den til | Hold den unna |
| --- | --- |
| Hovedknappen eller handlingsoppfordringen | Sekundær- og avbryt-knapper |
| Ett nøkkelord, en pris eller en dato | Hele avsnitt med brødtekst |
| Aktive tilstander: gjeldende fane, et valgt element | Hvert ikon i en verktøylinje |
| Små merkevaredetaljer: en strek, en prikk, et klistremerke | Store bakgrunner bak lang tekst |
| Fremhevinger i et diagram: den ene serien som betyr noe | Alle seriene i et diagram samtidig |

En aksent med én hovedoppgave beholder betydningen. Når den er på alt, skiller ingenting seg ut.

> **En aksent er ikke en feilfarge** Er aksenten din rød, tenk over hvordan den står ved siden av feilmeldinger. Brukere kan lese en rød knapp som destruktiv. Noen merkevarer med røde aksenter bruker en annen rødfarge til feil, eller viser feil med et ikon og tekst i tillegg til farge.

Klare aksenter som lime, gult og mint fungerer ofte dårlig som tekst på hvitt. Bruk dem som fyll med mørk tekst over, og sjekk hver kombinasjon mot retningslinjene for [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility): minst 4,5:1 for brødtekst og 3:1 for stor tekst og grensesnittelementer.

En rask gjennomgang hjelper hvis aksenten har sneket seg inn overalt. Ta et skjermbilde av forsiden eller en uke med innlegg, gjør det litt uskarpt og se hvor aksenten dukker opp. Lander øyet på tre eller fire steder samtidig, degraderer du alle unntatt det viktigste til en sekundærfarge. Lander det ingen steder, ligger aksenten sannsynligvis for nær basen og trenger mer kontrast i fargetone eller lyshet.

## CSS-egenskapen accent-color

På nettet farger `accent-color` innebygde skjemakontroller på én linje: avkrysningsbokser, radioknapper, glidebrytere og fremdriftsindikatorer. Den støttes i gjeldende versjoner av de store nettleserne; [MDN sin referanse](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) har detaljene.

```css
:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}
```

Én aksentvariabel brukt til skjemakontroller og hovedknappen, med en dypere nyanse til tekstlenker så de består kontrastkravet på hvitt.

Nettlesere kan justere fargen på haken eller håndtaket inne i en kontroll for å holde den lesbar mot aksenten din, så test både lyse og mørke aksenter. For resten av fargene på et nettsted, se [fargeskjema for nettsider](https://gradiently.design/nb/guide/website-color-scheme).

## Aksenter på gradienter og fotografier

På en rik bakgrunn har en aksent mer å konkurrere med. Hent den fra utenfor bakgrunnens fargefamilie: en varm aksent på en kjølig gradient, eller nesten hvitt på en fargerik en. I Gradiently velger Auto-tekstfarge lys eller mørk tekst for hver linje fra Markens egen palett, så ordene forblir lesbare mens bakgrunnen beveger seg, og aksenten din trenger bare å gjøre sin ene jobb. For mer om paletter bygget rundt én sterk farge, se [fargepaletter for teknologi](https://gradiently.design/nb/guide/tech-color-palettes).

## FAQ

### Hva er en aksentfarge i design?

En kontrasterende farge brukt i små mengder for å trekke oppmerksomheten mot det viktigste elementet, som en knapp, et nøkkelord eller en pris.

### Hvor mye av et design bør være aksentfarge?

Rundt ti prosent på det meste, etter 60 30 10-regelen. Mange sterke design bruker mye mindre.

### Hvordan velger jeg en aksentfarge til paletten min?

La den skille seg tydelig fra basisfargene i fargetone, lyshet eller metning, og test den i den lille størrelsen den faktisk skal vises i.

### Hva gjør accent-color i CSS?

Den bestemmer fargen på innebygde avkrysningsbokser, radioknapper, glidebrytere og fremdriftsindikatorer, så skjemakontroller matcher merkevaren uten egen styling.

### Kan en merkevare ha mer enn én aksentfarge?

Ja, men hver bør ha en egen oppgave, for eksempel én for handlinger og én for fremhevinger. To aksenter som gjør samme jobb, opphever hverandre.