# Sterke fargepaletter som fortsatt er lette å lese

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

Klare farger er lette å bli glad i og lette å gjøre uleselige. Trikset er å vite hvilke sterke farger som vil ha svart tekst, hvilke som vil ha hvit, og å gi hele paletten et rolig sted å hvile.

## The short version

- En sterk fargepalett bruker svært mettede farger som knallrosa, mandarin, sitron, elektrisk blå og klar grønn.
- Klare gule, grønne, cyan, petrol og oransje farger er lyse farger, så de trenger mørk tekst i stedet for hvit.
- Klare røde og rosa farger måler rundt 3,5:1 mot hvitt, som ikke består WCAG AA for brødtekst, så sett liten tekst på dem i svart og spar hvitt til store overskrifter.
- To sterke farger med lik lyshet kant i kant ser ut til å vibrere, så skill dem med en nøytral farge eller en tydelig forskjell i lyshet.
- Hver sterk palett trenger et rolig anker, som regel nesten svart eller en varm, brukket hvit, som bærer teksten og gir fargen rom.

En **sterk fargepalett** forblir lesbar når du behandler hver klar farge etter lysheten, ikke etter hvor høylytt den er. Sitron `#FFD60A`, klar grønn `#34C759`, akvablå `#00C2FF` og mandarin `#FF7A00` er alle så lyse at de trenger nesten svart tekst. Knallrosa `#FF2D87` og valmuerød `#FF3B30` havner i en vanskelig mellomposisjon: svart tekst består, men hvit fungerer bare til store overskrifter. Legg til én rolig ankerfarge, gi hver sterk farge sin egen plass, og en palett som ser ut som en godtebutikk blir en du faktisk kan sette ord på.

## Hvilke sterke farger trenger svart tekst

Metning får en farge til å føles kraftig, men lesbarheten avhenger av lysheten. Mange sterke farger er mye lysere enn de ser ut, og derfor føles hvit tekst på klar grønn eller gul høylytt og er likevel vanskelig å lese. Tabellen under måler elleve sterke farger mot hvitt og mot nesten svart `#111111`.

| Farge | Hex | Med hvit tekst | Med svart tekst |
| --- | --- | --- | --- |
| Sitron | `#FFD60A` | 1,41:1 | 13,38:1, bruk svart |
| Akvablå | `#00C2FF` | 2,07:1 | 9,14:1, bruk svart |
| Mintpetrol | `#00D1B2` | 1,95:1 | 9,68:1, bruk svart |
| Klar grønn | `#34C759` | 2,22:1 | 8,51:1, bruk svart |
| Mandarin | `#FF7A00` | 2,61:1 | 7,23:1, bruk svart |
| Valmuerød | `#FF3B30` | 3,55:1 | 5,32:1, bruk svart |
| Knallrosa | `#FF2D87` | 3,51:1 | 5,37:1, bruk svart |
| Bringebær | `#E0115F` | 4,76:1, bruk hvit | 3,97:1 |
| Elektrisk fiolett | `#8B3DFF` | 4,99:1, bruk hvit | 3,78:1 |
| Koboltblå | `#1D4ED8` | 6,70:1, bruk hvit | 2,82:1 |
| Signalrød | `#C81D11` | 5,77:1, bruk hvit | 3,27:1 |

WCAG AA krever 4,5:1 for brødtekst og 3:1 for stor tekst. Bringebær og elektrisk fiolett er på grensen: hvitt består, men så vidt.

En nyttig tommelfingerregel: den lyse siden av fargesirkelen, fra oransje via gult og grønt til cyan, tar svart, og det gjør også de mest intense rosa og røde fargene; den dype siden, fra blått via fiolett til karmosin, tar hvitt. Designer du for et bredt publikum, bør du også lese om [fargeblindvennlige paletter](https://gradiently.design/nb/guide/color-blindness-design), for sterke farger som bare skiller seg i fargetone kan se like ut for noen lesere.

## Seks sterke fargepaletter med hex-koder

- Varm hvit: #fff8ec
- Knallrosa: #ff2d87
- Mandarin: #ff7a00
- Sitron: #ffd60a
- Blekk: #111111

Fruktdisk. Tre varme, sterke farger mellom en varm hvit og en blekkfarge. Blekket bærer all tekst; de sterke fargene bærer former og store ord.

- Nattfiolett: #1a1033
- Mintpetrol: #00d1b2
- Sitron: #ffd60a
- Knallrosa: #ff2d87
- Syrinhvit: #f4f1ff

Spillehall. En mørk bunn får sterke farger til å gløde, og alle tre består AA mot den: sitron med 12,76:1, mintpetrol med 9,23:1, knallrosa med 5,13:1.

- **Bassengfest:** akvablå `#00C2FF`, klar grønn `#34C759`, sitron `#FFD60A`, hvit `#FFFFFF`, dyp marineblå `#0B1F3A` til tekst.
- **Barneskole:** koboltblå `#1D4ED8`, signalrød `#C81D11`, sitron `#FFD60A`, papir `#FAF7F0`, blekk `#111111`.
- **Risotrykk:** fluorescerende rosa `#FF48B0`, blå `#0078BF`, gul `#FFE800`, avispapir `#F2EFE6`, svart `#1A1A1A`.
- **Tropisk:** bringebær `#E0115F`, mango `#FFA51F`, palme `#00A86B`, sand `#F6EBD9`, kakao `#2B1B14`.

## Slik holder du en sterk palett lesbar

1. **Velg et anker først** Velg nesten svart eller en varm, brukket hvit og la den dekke mesteparten av flaten. Varm hvit `#FFF8EC` med blekk `#111111` måler 17,89:1, så hvert ord satt i blekk er lesbart.
2. **Sett tekst i ankeret, ikke i en sterk farge** Brødtekst hører hjemme i ankerfargen. Sterke farger kan bære en overskrift eller ett stort tall, der grensen på 3:1 for stor tekst gjelder.
3. **Skill sterke farger med lik lyshet** Knallrosa ved siden av en elektrisk blå som `#2F6BFF` måler 1,28:1, og kanten ser ut til å flimre. Legg hvitt, svart eller luft mellom dem, eller kombiner en lys sterk farge med en dyp.
4. **Begrens hvor mange sterke farger som berører ordene** Tre sterke farger i en palett er nok, og bare én bør ligge bak en tekstblokk. [60 30 10-regelen](https://gradiently.design/nb/guide/60-30-10-rule) hjelper her: anker 60, hovedfarge 30, aksenter 10.
5. **Sjekk den på en mobil utendørs** Sterke farger blekner i sollys og på skjermer med lav lysstyrke. Kan ordene fortsatt leses på en nedtonet mobil, fungerer paletten.

Et klart sommersalgsinnlegg der den lille støtteteksten forsvinner mot den sterke bakgrunnen

En høylytt bakgrunn med ordene rett oppå: overskriften overlever, detaljlinjen forsvinner.

Det samme klare sommersalgsinnlegget med hver tekstlinje tydelig mot et roligere område bak

De samme fargene, med bakgrunnen som roer seg bak teksten. Fortsatt sterk, og hver linje er lesbar.

Versjonen til høyre er det Gradiently gjør som standard. En Mark vet hvor ordene dine står, trekker den travleste fargen bort fra dem og velger lys eller mørk skrift linje for linje, så du kan beholde en høylytt palett uten boks eller skygge bak teksten.

## Sterke gradienter uten grå midte

Blander du to sterke farger fra hver sin side av fargesirkelen i vanlig sRGB, blir midtpunktet grått eller brunt. Velg enten naboer, eller be nettleseren interpolere i oklch, som holder midten mettet. [Gradientinterpolering](https://gradiently.design/nb/guide/gradient-interpolation) forklarer forskjellen.

- Rosa til sitron: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Akvablå til grønn: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Rosa til akvablå i oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Rosa glød mot natt: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

Sterke nabofarger blandes rent. Motsatte farger forblir klare når de interpoleres i oklch.

Vil du ha flere kombinasjoner, se [livlige gradienter](https://gradiently.design/nb/guide/vibrant-gradients) og [neongradienter](https://gradiently.design/nb/guide/neon-gradients). Full veiledning om kontrast finner du i [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility).

Én advarsel hvis paletten skal trykkes: de mest elektriske skjermfargene, særlig akvablå, knallrosa og klar grønn, ligger utenfor det vanlige CMYK-farger kan gjengi, og de kommer merkbart mattere tilbake fra trykkeriet. Be om et prøvetrykk, eller planlegg med spotfarger eller fluorescerende farger. [RGB og CMYK](https://gradiently.design/nb/guide/rgb-vs-cmyk) forklarer hva du kan forvente.

## FAQ

### Hva er en sterk fargepalett?

Et sett svært mettede farger som knallrosa, mandarin, sitron, akvablå og klar grønn, som regel balansert med et nøytralt anker for teksten.

### Bør jeg bruke hvit eller svart tekst på sterke farger?

Bruk svart på lyse, sterke farger som gul, oransje, grønn, akvablå og petrol, og også på knallrosa og valmuerød. Bruk hvit på dype, sterke farger som koboltblå, fiolett, bringebær og signalrød.

### Hvorfor ser noen sterke farger ut som de vibrerer?

To mettede farger med lik lyshet side om side, som knallrosa og elektrisk blå, får kanten mellom dem til å flimre. Skill dem med en nøytral farge eller endre lysheten på den ene.

### Hvor mange sterke farger bør en palett ha?

To eller tre sterke farger pluss én eller to nøytrale er nok. Bare én sterk farge bør ligge bak en tekstblokk.

### Er sterke farger dårlig for tilgjengelighet?

Ikke i seg selv. Problemene kommer fra tekst på sterke farger med for lite kontrast, så sjekk hvert tekstpar mot WCAG og hold brødteksten i et mørkt eller lyst anker.