# Lyse farvepaletter, der stadig er læsbare

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

Stærke farver er lette at elske og lette at gøre ulæselige. Tricket er at vide, hvilke kulører der vil have sort tekst, hvilke der vil have hvid, og at give hele paletten et sted at hvile.

## The short version

- En lys farvepalette bruger stærkt mættede farver som pink, mandarin, citron, elektrisk blå og skarp grøn.
- Lyse gule, grønne, cyan, turkise og orange farver er lyse kulører, så de skal have mørk tekst og ikke hvid.
- Skarpe røde og pink farver måler omkring 3,5:1 mod hvid, hvilket ikke består WCAG AA til brødtekst, så sæt lille tekst på dem i sort og gem hvid til store overskrifter.
- To stærke farver med samme lysstyrke, der støder op til hinanden, ser ud til at vibrere, så skil dem med en neutral farve eller en tydelig forskel i lysstyrke.
- Enhver lys palette har brug for et roligt anker, som regel en næsten sort eller en varm offwhite, der bærer teksten og giver farverne luft.

En **lys farvepalette** er læsbar, når du behandler hver stærk farve efter dens lysstyrke og ikke efter, hvor højt den råber. Citron `#FFD60A`, skarp grøn `#34C759`, aqua `#00C2FF` og mandarin `#FF7A00` er alle lyse nok til, at de kræver næsten sort tekst. Pink `#FF2D87` og valmuerød `#FF3B30` ligger i et akavet mellemrum: sort tekst består, men hvid virker kun til store overskrifter. Tilføj en rolig ankerfarve, giv hver stærk farve sin egen plads, og en palette, der ligner en slikbutik, bliver til en, du faktisk kan sætte ord på.

## Hvilke stærke farver kræver sort tekst

Mætning får en farve til at føles stærk, men læsbarhed afhænger af lysstyrke. Mange stærke farver er langt lysere, end de ser ud, og derfor føles hvid tekst på skarp grøn eller gul højlydt og er alligevel svær at læse. Tabellen herunder måler elleve stærke farver mod hvid og mod næsten sort `#111111`.

| Farve | Hex | Med hvid tekst | Med sort tekst |
| --- | --- | --- | --- |
| Citron | `#FFD60A` | 1,41:1 | 13,38:1, brug sort |
| Aqua | `#00C2FF` | 2,07:1 | 9,14:1, brug sort |
| Mintturkis | `#00D1B2` | 1,95:1 | 9,68:1, brug sort |
| Skarp grøn | `#34C759` | 2,22:1 | 8,51:1, brug sort |
| Mandarin | `#FF7A00` | 2,61:1 | 7,23:1, brug sort |
| Valmuerød | `#FF3B30` | 3,55:1 | 5,32:1, brug sort |
| Pink | `#FF2D87` | 3,51:1 | 5,37:1, brug sort |
| Hindbær | `#E0115F` | 4,76:1, brug hvid | 3,97:1 |
| Elektrisk violet | `#8B3DFF` | 4,99:1, brug hvid | 3,78:1 |
| Kobolt | `#1D4ED8` | 6,70:1, brug hvid | 2,82:1 |
| Signalrød | `#C81D11` | 5,77:1, brug hvid | 3,27:1 |

WCAG AA kræver 4,5:1 til brødtekst og 3:1 til stor tekst. Hindbær og elektrisk violet er tæt på grænsen: hvid består, men kun lige.

En brugbar tommelfingerregel: den lyse side af farvehjulet fra orange over gul og grøn til cyan tager sort, og det gør de varmeste pink og røde farver også. Den dybe side fra blå over violet til karmoisin tager hvid. Hvis du designer til en bred målgruppe, så læs også [farvepaletter til farveblinde](https://gradiently.design/da/guide/color-blindness-design), for stærke farver, der kun adskiller sig i kulør, kan se ens ud for nogle læsere.

## Seks lyse farvepaletter med hex-koder

- Varm hvid: #fff8ec
- Pink: #ff2d87
- Mandarin: #ff7a00
- Citron: #ffd60a
- Blæk: #111111

Frugtbod. Tre varme stærke farver mellem en varm hvid og en sort. Den sorte bærer al tekst, mens de stærke farver bærer former og store ord.

- Natviolet: #1a1033
- Mintturkis: #00d1b2
- Citron: #ffd60a
- Pink: #ff2d87
- Lilla hvid: #f4f1ff

Spillehal. En mørk bund får de stærke farver til at gløde, og alle tre består AA mod den: citron med 12,76:1, mintturkis med 9,23:1 og pink med 5,13:1.

- **Poolfest:** aqua `#00C2FF`, skarp grøn `#34C759`, citron `#FFD60A`, hvid `#FFFFFF`, dyb marineblå `#0B1F3A` til tekst.
- **Folkeskole:** kobolt `#1D4ED8`, signalrød `#C81D11`, citron `#FFD60A`, papir `#FAF7F0`, sort `#111111`.
- **Risotryk:** fluorescerende pink `#FF48B0`, blå `#0078BF`, gul `#FFE800`, avispapir `#F2EFE6`, sort `#1A1A1A`.
- **Tropisk:** hindbær `#E0115F`, mango `#FFA51F`, palme `#00A86B`, sand `#F6EBD9`, kakao `#2B1B14`.

## Sådan holder du en lys palette læsbar

1. **Vælg først et anker** Vælg en næsten sort eller en varm offwhite, og lad den dække det meste af fladen. Varm hvid `#FFF8EC` med sort `#111111` måler 17,89:1, så alle ord sat i sort kan læses.
2. **Sæt tekst i ankeret, ikke i en stærk farve** Brødtekst hører hjemme i ankerfarven. De stærke farver kan bære en overskrift eller et enkelt stort tal, hvor tærsklen på 3:1 for stor tekst gælder.
3. **Skil stærke farver med ens lysstyrke** Pink ved siden af en elektrisk blå som `#2F6BFF` måler 1,28:1, og kanten ser ud til at flimre. Sæt hvid, sort eller luft imellem, eller par en lys farve med en dyb.
4. **Begræns, hvor mange stærke farver der rører ordene** Tre stærke farver i en palette er rigeligt, og kun én bør ligge bag en tekstblok. [60-30-10-reglen](https://gradiently.design/da/guide/60-30-10-rule) hjælper her: anker 60, førende stærk farve 30, accenter 10.
5. **Tjek den på en telefon udendørs** Stærke farver blegner i sollys og på skærme med lav lysstyrke. Kan ordene stadig læses på en dæmpet telefon, virker paletten.

Et lyst sommerudsalgsopslag, hvor den lille understøttende tekst går tabt mod den stærke baggrund

En kraftig baggrund med ord direkte ovenpå: overskriften overlever, detaljelinjen forsvinder.

Det samme lyse sommerudsalgsopslag med tydelig tekst på hver linje mod et roligere område bagved

De samme farver, men baggrunden falder til ro bag teksten. Stadig lyst, og hver linje kan læses.

Versionen til højre er det, Gradiently gør som standard. En Mark ved, hvor dine ord står, tager sin travleste farve væk fra dem og vælger lys eller mørk skrift linje for linje, så du kan holde en palette højlydt uden en boks eller skygge bag teksten.

## Lyse gradienter uden en grå midte

Blander du to stærke farver fra modsatte sider af hjulet i almindelig sRGB, bliver midten grå eller brun. Vælg enten naboer, eller bed browseren interpolere i oklch, som holder midten mættet. [Gradientinterpolation](https://gradiently.design/da/guide/gradient-interpolation) forklarer forskellen.

- Pink til citron: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Aqua til grøn: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Pink til aqua i oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Pink glød mod natten: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

Stærke farver, der er naboer, blander rent. Modsætninger forbliver levende, når de interpoleres i oklch.

Flere kombinationer finder du i [levende gradienter](https://gradiently.design/da/guide/vibrant-gradients) og [neongradienter](https://gradiently.design/da/guide/neon-gradients). Den fulde vejledning om kontrast står i [farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility).

En advarsel, hvis paletten skal trykkes: de mest elektriske skærmfarver, især aqua, pink og skarp grøn, ligger uden for, hvad almindelig CMYK-trykfarve kan gengive, og de kommer mærkbart matte tilbage fra trykkeriet. Bed om et prøvetryk, eller regn med spot- eller neonfarver. [RGB mod CMYK](https://gradiently.design/da/guide/rgb-vs-cmyk) forklarer, hvad du kan forvente.

## FAQ

### Hvad er en lys farvepalette?

Et sæt stærkt mættede farver som pink, mandarin, citron, aqua og skarp grøn, som regel afbalanceret med et neutralt anker til tekst.

### Skal jeg bruge hvid eller sort tekst på stærke farver?

Brug sort på lyse stærke farver som gul, orange, grøn, aqua og turkis, og også på pink og valmuerød. Brug hvid på dybe farver som kobolt, violet, hindbær og signalrød.

### Hvorfor ser nogle stærke farver ud, som om de vibrerer?

To mættede farver med samme lysstyrke side om side, som pink og elektrisk blå, får kanten mellem dem til at flimre. Skil dem med en neutral farve, eller ændr lysstyrken på den ene.

### Hvor mange stærke farver skal en palette have?

To eller tre stærke farver plus en eller to neutrale er rigeligt. Kun én stærk farve bør ligge bag en tekstblok.

### Er stærke farver dårlige for tilgængeligheden?

Ikke i sig selv. Problemerne opstår, når tekst på stærke farver har for lidt kontrast, så tjek hvert tekstpar mod WCAG, og hold brødteksten i et mørkt eller lyst anker.