Sterke fargepaletter som fortsatt er lette å lese

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.

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, for sterke farger som bare skiller seg i fargetone kan se like ut for noen lesere.

Seks sterke fargepaletter med hex-koder

• 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. 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. 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. 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. 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 hjelper her: anker 60, hovedfarge 30, aksenter 10.

5. 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.

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 forklarer forskjellen.

Vil du ha flere kombinasjoner, se livlige gradienter og neongradienter. Full veiledning om kontrast finner du i fargekontrast.

É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 forklarer hva du kan forvente.