Accentfarve: sådan vælger du den, der gør arbejdet

En accentfarve er den lille, kontrasterende farve i en palet, der peger på det, der betyder noget: knappen, du skal trykke på, prisen, det ene ord i en overskrift. For at vælge en, der gør arbejdet, skal du tage udgangspunkt i dine basisfarver og vælge noget, der tydeligt adskiller sig fra dem i nuance, lysstyrke eller mætning, og så bruge den sparsomt. I den velkendte 60-30-10-fordeling er den de ti procent. Jo sjældnere den optræder, desto mere betyder hver gang.

Hvad en accentfarve er til

Det meste af et design er basis- og støttefarver: baggrunde, paneler, tekst. Accenten er undtagelsen, der fortæller øjet, hvor det skal hen. Det gør den til den mest funktionelle farve, du ejer. På et website markerer den den primære handling; på en plakat lander den på datoen; i et brand bliver den den detalje, folk husker, et farvet punktum eller en enkelt lys stribe.

60-30-10-reglen giver proportionerne: cirka tres procent dominerende farve, tredive procent sekundær og ti procent accent. Se de ti som et loft, ikke et mål. Mange af de bedste layouts bruger langt mindre.

Sådan vælger du en accentfarve

Kontrast er hele jobbet. Se på dine basis- og sekundærfarver og spørg, hvordan de ligner hinanden, og gør så accenten ulig dem på mindst én kraftig måde.

1. 1

   Kontrast i nuance

   Vælg fra den modsatte side af farvehjulet. Palet i marine og turkis tåler varme accenter som koral eller rav; varme paletter tåler blå eller grøn. Komplementærfarver er det klassiske valg.

2. 2

   Kontrast i lysstyrke

   På en mørk basis en lys accent; på en bleg basis en dyb. En dæmpet palet af grå kan lige så godt tåle en sort accent som en klar.

3. 3

   Kontrast i mætning

   Blandt bløde, støvede farver læses én mættet farve som accenten, selv om den deler deres nuance. En lerpalet med en ren cinnoberaccent er et godt eksempel.

4. 4

   Test den i dens virkelige størrelse

   En accent er som regel lille. Tjek den som en knaptekst eller en tynd understregning, ikke som en stor farveprøve, fordi små farveflader ser mørkere og mattere ud.

Hvor du bruger accenten, og hvor ikke

Klare accenter som lime, gul og mint består ofte ikke som tekst på hvid. Brug dem som fyldfarver med mørk tekst ovenpå, og tjek hvert par mod retningslinjerne for farvekontrast: mindst 4,5:1 til brødtekst og 3:1 til stor tekst og interfacedele.

Et hurtigt eftersyn hjælper, hvis accenten har bredt sig overalt. Tag et skærmbillede af din forside eller en uges opslag, slør det lidt, og se, hvor accenten optræder. Lander dit øje på tre eller fire steder på én gang, så nedgradér alle på nær det vigtigste til en sekundær farve. Lander det ingen steder, ligger accenten sandsynligvis for tæt på basis og har brug for mere kontrast i nuance eller lysstyrke.

CSS-egenskaben accent-color

På nettet farver accent-color indbyggede formularfelter i én linje: afkrydsningsfelter, radioknapper, skydere og statuslinjer. Den understøttes i de nuværende versioner af de store browsere; MDN's reference har detaljerne.

: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 */
}

Browsere kan justere farven på flueben eller håndtag inde i et felt, så det forbliver læseligt mod din accent, så test både lyse og mørke accenter. For resten af et sites farver, se website-farveskema.

Accenter på gradienter og fotografier

På en rig baggrund har en accent mere at konkurrere med. Hent den uden for baggrundens farvefamilie: en varm accent på en kold gradient eller en næsten hvid på en farverig. I Gradiently vælger Automatisk tekstfarve lys eller mørk skrift til hver linje ud fra Markens egen palet, så ordene forbliver læselige, når baggrunden bevæger sig, og din accent kun har sit ene job at gøre. For mere om paletter bygget omkring én stærk farve, se tech-farvepaletter.