Felle kleurenpaletten die leesbaar blijven

Een fel kleurenpalet blijft leesbaar als je elke felle kleur behandelt naar zijn helderheid en niet naar zijn luidheid. Citroen #FFD60A, felgroen #34C759, aqua #00C2FF en mandarijn #FF7A00 zijn allemaal licht genoeg om bijna zwarte tekst te vragen. Knalroze #FF2D87 en klaproosrood #FF3B30 zitten in een lastig midden: zwarte tekst haalt het, maar wit werkt alleen voor grote koppen. Voeg één rustige ankerkleur toe, geef elke felle kleur zijn eigen ruimte, en een palet dat op een snoepwinkel lijkt, wordt een palet waar je echt woorden op kunt zetten.

Welke felle kleuren zwarte tekst nodig hebben

Verzadiging laat een kleur sterk voelen, maar leesbaarheid hangt af van helderheid. Veel felle kleuren zijn veel lichter dan ze lijken, en daarom voelt witte tekst op felgroen of geel luid aan en is hij toch moeilijk te lezen. De tabel hieronder meet elf felle kleuren tegen wit en tegen bijna zwart #111111.

Een handige vuistregel: de lichte kant van het wiel, van oranje via geel en groen naar cyaan, neemt zwart, net als de felste roze en rode tinten; de diepe kant, van blauw via violet naar karmozijn, neemt wit. Ontwerp je voor een breed publiek, lees dan ook kleurenblindvriendelijke paletten, want felle kleuren die alleen in tint verschillen kunnen voor sommige lezers hetzelfde lijken.

Zes felle kleurenpaletten met hexcodes

• Zwembadfeest: aqua #00C2FF, felgroen #34C759, citroen #FFD60A, wit #FFFFFF, diep marineblauw #0B1F3A voor tekst.
• Basisschool: kobalt #1D4ED8, signaalrood #C81D11, citroen #FFD60A, papier #FAF7F0, inkt #111111.
• Risodruk: fluorescerend roze #FF48B0, blauw #0078BF, geel #FFE800, krantenpapier #F2EFE6, zwart #1A1A1A.
• Tropisch: framboos #E0115F, mango #FFA51F, palm #00A86B, zand #F6EBD9, cacao #2B1B14.

Zo houd je een fel palet leesbaar

1. 1

   Kies eerst een anker

   Kies een bijna zwart of een warm gebroken wit en laat dat het grootste deel van het oppervlak bedekken. Warm wit #FFF8EC met inkt #111111 meet 17,89:1, dus elk woord in inkt is leesbaar.

2. 2

   Zet tekst in het anker, niet in een felle kleur

   Lopende tekst hoort in de ankerkleur. Felle kleuren kunnen een kop of één groot getal dragen, waar de drempel van 3:1 voor grote tekst geldt.

3. 3

   Scheid felle kleuren van gelijke helderheid

   Knalroze naast een elektrisch blauw zoals #2F6BFF meet 1,28:1, en de rand lijkt te schemeren. Zet wit, zwart of ruimte ertussen, of combineer een lichte felle kleur met een diepe.

4. 4

   Beperk hoeveel felle kleuren de woorden raken

   Drie felle kleuren in een palet is ruim voldoende, en er mag er maar één achter een tekstblok zitten. De 60-30-10-regel helpt hierbij: anker 60, leidende felle kleur 30, accenten 10.

5. 5

   Controleer het op een telefoon buiten

   Felle kleuren verbleken in zonlicht en op schermen met lage helderheid. Als de woorden nog leesbaar zijn op een gedimde telefoon, werkt het palet.

Die rechterversie is wat Gradiently standaard doet. Een Mark weet waar je woorden staan, laat zijn drukste kleur daar wegzakken en kiest regel voor regel lichte of donkere letters, zodat je een palet luid kunt houden zonder kader of schaduw achter de tekst.

Felle verlopen zonder grijs midden

Meng je twee felle kleuren van tegenovergestelde kanten van het wiel in gewoon sRGB, dan wordt het midden grijs of bruin. Kies dan buurkleuren, of laat de browser interpoleren in oklch, wat het midden verzadigd houdt. Verloopinterpolatie legt het verschil uit.

Voor meer combinaties zie levendige verlopen en neonverlopen. Voor volledige contrastrichtlijnen lees je kleurcontrast.

Een waarschuwing als het palet gedrukt wordt: de meest elektrische schermkleuren, vooral aqua, knalroze en felgroen, liggen buiten wat standaard CMYK-inkten kunnen weergeven, en ze komen merkbaar doffer terug van de drukker. Vraag om een proef, of plan met steunkleuren of fluorescerende inkten. RGB versus CMYK legt uit wat je kunt verwachten.