Kort fortalt
- 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.
På denne side
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.
#FFD60AMed hvid tekst
Med sort tekst
#00C2FFMed hvid tekst
Med sort tekst
Hex
#00D1B2Med hvid tekst
Med sort tekst
Hex
#34C759Med hvid tekst
Med sort tekst
#FF7A00Med hvid tekst
Med sort tekst
Hex
#FF3B30Med hvid tekst
Med sort tekst
#FF2D87Med hvid tekst
Med sort tekst
#E0115FMed hvid tekst
Med sort tekst
Hex
#8B3DFFMed hvid tekst
Med sort tekst
#1D4ED8Med hvid tekst
Med sort tekst
Hex
#C81D11Med hvid tekst
Med sort tekst
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, 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
- Poolfest: aqua
#00C2FF, skarp grøn#34C759, citron#FFD60A, hvid#FFFFFF, dyb marineblå#0B1F3Atil 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
#FFF8ECmed sort#111111må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
#2F6BFFmå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 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.
En kraftig baggrund med ord direkte ovenpå: overskriften overlever, detaljelinjen forsvinder.
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 forklarer forskellen.
Flere kombinationer finder du i levende gradienter og neongradienter. Den fulde vejledning om kontrast står i farvekontrast.
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 forklarer, hvad du kan forvente.
Spørgsmål, folk stiller
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.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil