# Leuchtende Farbpaletten, die lesbar bleiben

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

Kräftige Farben sind leicht zu lieben und leicht unlesbar zu machen. Der Trick ist zu wissen, welche leuchtenden Töne schwarze Schrift wollen und welche weiße, und der ganzen Palette einen ruhigen Platz zum Ausruhen zu geben.

## The short version

- Eine leuchtende Farbpalette nutzt stark gesättigte Farben wie Knallpink, Mandarine, Zitrone, Elektroblau und leuchtendes Grün.
- Leuchtendes Gelb, Grün, Cyan, Türkis und Orange sind helle Farben, deshalb brauchen sie dunkle statt weißer Schrift.
- Leuchtendes Rot und Pink messen etwa 3,5:1 gegen Weiß und fallen damit bei WCAG AA für Fließtext durch, setze kleinen Text darauf also in Schwarz und spare Weiß für große Überschriften auf.
- Zwei leuchtende Farben ähnlicher Helligkeit, Kante an Kante gesetzt, scheinen zu flimmern, trenne sie also durch ein Neutral oder einen klaren Helligkeitsunterschied.
- Jede leuchtende Palette braucht einen ruhigen Anker, meist ein fast Schwarz oder ein warmes Off-White, der den Text trägt und der Farbe Raum gibt.

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

| Farbe | Hex | Mit weißer Schrift | Mit schwarzer Schrift |
| --- | --- | --- | --- |
| Zitrone | `#FFD60A` | 1,41:1 | 13,38:1, Schwarz nehmen |
| Aqua | `#00C2FF` | 2,07:1 | 9,14:1, Schwarz nehmen |
| Mintpetrol | `#00D1B2` | 1,95:1 | 9,68:1, Schwarz nehmen |
| Leuchtendes Grün | `#34C759` | 2,22:1 | 8,51:1, Schwarz nehmen |
| Mandarine | `#FF7A00` | 2,61:1 | 7,23:1, Schwarz nehmen |
| Mohnrot | `#FF3B30` | 3,55:1 | 5,32:1, Schwarz nehmen |
| Knallpink | `#FF2D87` | 3,51:1 | 5,37:1, Schwarz nehmen |
| Himbeere | `#E0115F` | 4,76:1, Weiß nehmen | 3,97:1 |
| Elektroviolett | `#8B3DFF` | 4,99:1, Weiß nehmen | 3,78:1 |
| Kobalt | `#1D4ED8` | 6,70:1, Weiß nehmen | 2,82:1 |
| Signalrot | `#C81D11` | 5,77:1, Weiß nehmen | 3,27:1 |

WCAG AA verlangt 4,5:1 für Fließtext und 3:1 für große Schrift. Himbeere und Elektroviolett sind knappe Fälle: Weiß besteht, aber nur gerade so.

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](https://gradiently.design/de/guide/color-blindness-design), denn leuchtende Farben, die sich nur im Farbton unterscheiden, können für manche Leser gleich aussehen.

## Sechs leuchtende Farbpaletten mit Hex-Codes

- Warmweiß: #fff8ec
- Knallpink: #ff2d87
- Mandarine: #ff7a00
- Zitrone: #ffd60a
- Tinte: #111111

Obststand. Drei warme leuchtende Töne zwischen einem Warmweiß und einer Tinte. Die Tinte trägt allen Text; die leuchtenden Töne tragen Formen und große Worte.

- Nachtviolett: #1a1033
- Mintpetrol: #00d1b2
- Zitrone: #ffd60a
- Knallpink: #ff2d87
- Lilaweiß: #f4f1ff

Spielhalle. Ein dunkler Grund lässt leuchtende Töne glühen, und alle drei bestehen AA dagegen: Zitrone mit 12,76:1, Mintpetrol mit 9,23:1, Knallpink mit 5,13:1.

- **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. **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. **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. **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. **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](https://gradiently.design/de/guide/60-30-10-rule) hilft hier: Anker 60, führende leuchtende Farbe 30, Akzente 10.
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.

Ein leuchtender Post zum Sommerschlussverkauf, bei dem der kleine Begleittext vor dem kräftigen Hintergrund untergeht

Ein lauter Hintergrund mit Worten direkt darauf: Die Überschrift übersteht es, die Detailzeile verschwindet.

Derselbe leuchtende Post zum Sommerschlussverkauf mit klar lesbarer Schrift in jeder Zeile vor einem ruhigeren Bereich dahinter

Dieselben Farben, mit einem Hintergrund, der sich hinter dem Text beruhigt. Weiterhin leuchtend, und jede Zeile ist lesbar.

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](https://gradiently.design/de/guide/gradient-interpolation) erklärt den Unterschied.

- Pink zu Zitrone: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Aqua zu Grün: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Pink zu Aqua in oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Pinkes Glühen auf Nacht: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

Benachbarte leuchtende Töne mischen sich sauber. Gegenpole bleiben bei Interpolation in oklch lebendig.

Mehr Kombinationen findest du unter [lebendige Verläufe](https://gradiently.design/de/guide/vibrant-gradients) und [Neon-Verläufe](https://gradiently.design/de/guide/neon-gradients). Für alle Hinweise zum Kontrast lies [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility).

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](https://gradiently.design/de/guide/rgb-vs-cmyk) erklärt, was dich erwartet.

## FAQ

### Was ist eine leuchtende Farbpalette?

Ein Set stark gesättigter Farben wie Knallpink, Mandarine, Zitrone, Aqua und leuchtendes Grün, meist mit einem neutralen Anker für Text ausbalanciert.

### Sollte ich weiße oder schwarze Schrift auf leuchtenden Farben verwenden?

Nimm Schwarz auf hellen leuchtenden Tönen wie Gelb, Orange, Grün, Aqua und Türkis, ebenso auf Knallpink und Mohnrot. Nimm Weiß auf tiefen leuchtenden Tönen wie Kobalt, Violett, Himbeere und Signalrot.

### Warum scheinen manche leuchtenden Farben zu flimmern?

Zwei gesättigte Farben ähnlicher Helligkeit nebeneinander, etwa Knallpink und Elektroblau, lassen die Kante zwischen ihnen schimmern. Trenne sie durch ein Neutral oder ändere die Helligkeit einer von ihnen.

### Wie viele leuchtende Farben sollte eine Palette haben?

Zwei oder drei leuchtende Töne plus ein oder zwei Neutraltöne sind reichlich. Nur eine leuchtende Farbe sollte hinter einem Textblock liegen.

### Sind leuchtende Farben schlecht für die Barrierefreiheit?

Nicht an sich. Probleme entstehen durch Text auf leuchtenden Farben mit zu wenig Kontrast, prüfe also jedes Textpaar gegen WCAG und halte Fließtext in einem dunklen oder hellen Anker.