Leuchtende Farbpaletten, die lesbar bleiben

Eine leuchtende Farbpalette bleibt lesbar, wenn du jede kräftige Farbe nach ihrer Helligkeit behandelst, nicht nach ihrer Lautstärke. Zitrone #FFD60A, leuchtendes Grün #34C759, Aqua #00C2FF und Mandarine #FF7A00 sind alle hell genug, dass sie fast schwarze Schrift brauchen. Knallpink #FF2D87 und Mohnrot #FF3B30 liegen in einer unbequemen Mitte: Schwarze Schrift besteht, Weiß funktioniert aber nur für große Überschriften. Füge eine ruhige Ankerfarbe hinzu, gib jeder leuchtenden Farbe ihren eigenen Raum, und aus einer Palette, die wie ein Süßwarenladen aussieht, wird eine, auf der du tatsächlich Worte setzen kannst.

Welche leuchtenden Farben schwarze Schrift brauchen

Sättigung lässt eine Farbe stark wirken, doch die Lesbarkeit hängt von der Helligkeit ab. Viele leuchtende Töne sind viel heller, als sie aussehen, weshalb weiße Schrift auf leuchtendem Grün oder Gelb laut wirkt und trotzdem schwer zu lesen ist. Die Tabelle unten misst elf leuchtende Töne gegen Weiß und gegen fast Schwarz #111111.

Eine nützliche Faustregel: Die helle Seite des Farbkreises von Orange über Gelb und Grün bis Cyan nimmt Schwarz, ebenso die grellsten Pinks und Rots; die tiefe Seite von Blau über Violett bis Karmesin nimmt Weiß. Wenn du für ein breites Publikum gestaltest, lies auch farbenblindfreundliche Paletten, denn leuchtende Farben, die sich nur im Farbton unterscheiden, können für manche Leser gleich aussehen.

Sechs leuchtende Farbpaletten mit Hex-Codes

• Poolparty: Aqua #00C2FF, leuchtendes Grün #34C759, Zitrone #FFD60A, Weiß #FFFFFF, tiefes Marine #0B1F3A für Text.
• Grundschule: Kobalt #1D4ED8, Signalrot #C81D11, Zitrone #FFD60A, Papier #FAF7F0, Tinte #111111.
• Riso-Druck: Fluoreszierendes Pink #FF48B0, Blau #0078BF, Gelb #FFE800, Zeitungspapier #F2EFE6, Schwarz #1A1A1A.
• Tropisch: Himbeere #E0115F, Mango #FFA51F, Palme #00A86B, Sand #F6EBD9, Kakao #2B1B14.

So bleibt eine leuchtende Palette lesbar

1. 1

   Wähle zuerst einen Anker

   Nimm ein fast Schwarz oder ein warmes Off-White und lass es den größten Teil der Fläche bedecken. Warmweiß #FFF8EC mit Tinte #111111 misst 17,89:1, jedes Wort in Tinte ist also lesbar.

2. 2

   Setze Text im Anker, nicht in einer leuchtenden Farbe

   Fließtext gehört in die Ankerfarbe. Leuchtende Töne können eine Überschrift oder eine einzelne große Zahl tragen, wo die 3:1-Schwelle für große Schrift gilt.

3. 3

   Trenne leuchtende Farben gleicher Helligkeit

   Knallpink neben einem Elektroblau wie #2F6BFF misst 1,28:1, und die Kante scheint zu schimmern. Setze Weiß, Schwarz oder Freiraum dazwischen oder kombiniere ein helles leuchtendes mit einem tiefen.

4. 4

   Begrenze, wie viele leuchtende Farben die Worte berühren

   Drei leuchtende Farben in einer Palette sind reichlich, und nur eine sollte hinter einem Textblock liegen. Die 60-30-10-Regel hilft hier: Anker 60, führende leuchtende Farbe 30, Akzente 10.

5. 5

   Prüfe es draußen auf dem Handy

   Leuchtende Farben verblassen in der Sonne und auf Bildschirmen mit niedriger Helligkeit. Wenn die Worte auf einem gedimmten Handy noch lesbar sind, funktioniert die Palette.

Die rechte Version ist das, was Gradiently standardmäßig tut. Ein Mark weiß, wo deine Worte stehen, nimmt seine unruhigste Farbe von ihnen weg und wählt Zeile für Zeile helle oder dunkle Schrift, sodass du eine Palette laut halten kannst, ohne Kasten oder Schatten hinter dem Text.

Leuchtende Verläufe ohne graue Mitte

Mischst du zwei leuchtende Töne von gegenüberliegenden Seiten des Farbkreises in schlichtem sRGB, wird der Mittelpunkt grau oder braun. Wähle entweder Nachbarn oder lass den Browser in oklch interpolieren, was die Mitte gesättigt hält. Verlaufs-Interpolation erklärt den Unterschied.

Mehr Kombinationen findest du unter lebendige Verläufe und Neon-Verläufe. Für alle Hinweise zum Kontrast lies Farbkontrast.

Eine Warnung, falls die Palette gedruckt wird: Die elektrischsten Bildschirmfarben, besonders Aqua, Knallpink und leuchtendes Grün, liegen außerhalb dessen, was Standard-CMYK-Farben wiedergeben können, und kommen aus der Druckerei spürbar matter zurück. Verlange einen Proof oder plane Sonder- oder Neonfarben ein. RGB vs. CMYK erklärt, was dich erwartet.