Aerona Space | Farben-Wissen

Wie Farben auf dem Bildschirm entstehen

Drei Lichter

Jeder Bildpunkt besteht aus Rot, Grün und Blau. Alle drei voll ergeben Weiß, alle aus ergeben Schwarz. Das nennt man additive Farbmischung: Licht kommt zu Licht dazu. Übliche Bildschirme kennen je Licht 256 Stufen, zusammen gut 16,7 Millionen Farben.

Druck ist anders

Auf Papier mischt man Farben, die Licht schlucken – Cyan, Magenta, Gelb und Schwarz. Deshalb sieht ein Bildschirm-Blau gedruckt oft anders aus. Das nennt man subtraktive Mischung: Jede Farbe nimmt vom Licht etwas weg. Schwarz kommt eigens dazu, weil die drei bunten Farben übereinander nur ein trübes Dunkel ergeben.

Farben aufschreiben

Schreibweise	Beispiel	wie sie denkt
HEX	`#3b82f6`	Rot, Grün und Blau als zwei Stellen im Sechzehnersystem
RGB	`rgb(59, 130, 246)`	dieselben drei Anteile, von 0 bis 255
HSL	`hsl(217, 91%, 60%)`	Farbton auf dem Farbkreis, Sättigung, Helligkeit

Alle drei Beispiele sind dieselbe Farbe: das Aerona-Blau, das Aeri trägt und das die Apps nehmen, solange du keine eigene Akzentfarbe wählst. Im HEX-Wert steht 3b für 59, 82 für 130 und f6 für 246 – genau die Zahlen aus der RGB-Zeile. Die Aerona-Farbe selbst ist aber kein einzelner Wert, sondern ein Verlauf von Blau nach Violett, auf der Webseite von #60a5fa nach #a855f7.

Der Farbkreis

Farbton

Der Farbton ist ein Winkel auf dem Farbkreis, von 0 bis 360 Grad. Bei 0 liegt Rot, bei 120 Grün, bei 240 Blau. Dazwischen liegen die Mischungen: Gelb bei 60, Cyan bei 180, Magenta bei 300. Nach 360 Grad ist man wieder beim Rot.

Sättigung

Sie sagt, wie kräftig eine Farbe ist. Bei 0 % bleibt nur ein Grau übrig, bei 100 % die reinste Form des Farbtons. Wenig gesättigte Farben wirken ruhig und eignen sich für große Flächen, stark gesättigte ziehen den Blick an.

Helligkeit in HSL

Bei 0 % ist jede Farbe Schwarz, bei 100 % Weiß. Die reine Farbe liegt bei 50 %. Vorsicht: Gleiche Helligkeit in HSL heißt nicht gleich hell fürs Auge. Gelb und Blau bei 50 % sehen sehr verschieden hell aus – deshalb rechnet der Kontrast nicht mit HSL.

Gegenüber

Farben, die sich auf dem Kreis gegenüberliegen, heißen Komplementärfarben. Am Bildschirm sind das etwa Rot und Cyan oder Blau und Gelb. Im Malkasten lernt man andere Paare, etwa Rot und Grün – das liegt am anderen Farbkreis der Malfarben, nicht an einem Fehler.

Nachbarn und Dreiecke

Analoge Farben liegen dicht nebeneinander. Triadische Farben stehen je 120 Grad auseinander, wie die Ecken eines Dreiecks. Analoge Paare wirken ruhig, weil sie sich ähneln; triadische lebendig, ohne dass eine Farbe die anderen erschlägt.

Manche Farbwähler rechnen statt in HSL in HSV. Dort liegt die reine Farbe bei 100 % Helligkeit. Dieselben drei Zahlen meinen in beiden Modellen also verschiedene Farben – wer Werte von einem Programm ins andere überträgt, sollte nachsehen, welches Modell gemeint ist.

Bei Aerona: Das Farbrad der Apps kennt vier Harmonien – komplementär, analog, triadisch und gespalten. Gespalten heißt: statt des Gegenpols bei 180 Grad seine beiden Nachbarn bei 150 und 210 Grad, fast so deutlich, aber nicht so hart. Ausprobieren kannst du das auf der Seite Das Farbrad.

Farbräume

sRGB

Der übliche Farbraum im Netz, seit den Neunzigerjahren Standard. Fast jeder Bildschirm kann ihn darstellen. Wer nichts anderes angibt, meint mit #3b82f6 eine Farbe in sRGB.

Display P3

Ein größerer Farbraum mit kräftigeren Grün- und Rottönen, den viele neuere Bildschirme beherrschen. In CSS schreibt man solche Farben etwa als color(display-p3 1 0 0). Ein Bildschirm, der P3 nicht kann, zeigt dann die nächstliegende Farbe, die er hat.

Warum das zählt

Dieselbe Zahl kann auf zwei Bildschirmen verschieden aussehen, wenn sie in verschiedenen Farbräumen gemeint ist. Dazu kommt, dass kein Bildschirm genau gleich eingestellt ist. Wer Farben weitergibt, gibt deshalb am besten den Farbraum mit an; die Farbdateien auf Aerona Design sind alle in sRGB gemeint.

Durchsichtige Farben

Der vierte Wert

Neben Rot, Grün und Blau gibt es oft einen Alpha-Wert. Er sagt, wie deckend eine Farbe ist: 0 ist durchsichtig, 1 ist voll deckend. Manche Programme schreiben ihn als Prozent, andere als Zahl von 0 bis 255 – gemeint ist dasselbe.

So geschrieben

rgb(59 130 246 / 0.5) und #3b82f680 meinen beide das Aerona-Blau, etwa zur Hälfte deckend. Die angehängten zwei Stellen 80 sind im Sechzehnersystem 128, also 128 von 255 – knapp über der Hälfte.

Mischung mit dem Grund

Eine halb deckende Farbe mischt sich mit dem, was darunter liegt. Ihr Kontrast hängt deshalb vom Hintergrund ab. Auf einem Foto kann dieselbe Fläche an einer Stelle dunkel und an der nächsten hell wirken – und die Schrift darauf mal lesbar sein und mal nicht.

Bei Aerona: Auf der Webseite decken Glasflächen im dunklen Modus zu 78 % und im hellen zu 82 %. Gerechnet ist das für den schlechtesten Hintergrund: reines Weiß oder Schwarz dahinter, und selbst die leise Schrift muss dann noch 4,5 : 1 halten. Lesbar macht das Glas die Deckkraft, nicht die Unschärfe – die steht seit dem 13. September 2026 überall bei 4 Pixeln.

Kontrast

Das Verhältnis

Kontrast wird als Verhältnis der Helligkeiten angegeben – von 1:1 (gleich) bis 21:1 (Schwarz auf Weiß). Gemeint ist die Helligkeit, wie das Auge sie empfindet, nicht der Farbton. Zwei ganz verschiedene Farben können deshalb fast denselben Wert haben und nebeneinander trotzdem schwer zu lesen sein.

Die Richtwerte

Die Web-Richtlinien WCAG verlangen für normalen Text mindestens 4,5:1, für großen Text 3:1. Die strengere Stufe verlangt 7:1. Groß heißt ab etwa 24 Pixeln, fett schon ab etwa 19. Auch Ränder und Symbole, an denen man ein Bedienelement erkennt, brauchen 3:1.

Glas

Ein durchscheinender Hintergrund ändert sich mit dem, was dahinter liegt. Text, der auf einer Stelle gut lesbar ist, kann es woanders nicht mehr sein – deshalb verlangt die Regel von Aerona Kontrast auch auf Glas. Regel 25 sagt es knapp: Hinter Glas gehört eine Deckschicht. Ob sie reicht, wird gegen den ungünstigsten Hintergrund gerechnet, nicht gegen den, der gerade da ist.

Kontrast selbst rechnen

Das Verhältnis ist kein Gefühl, sondern eine Formel aus den WCAG. Sie hat drei Schritte, und man kann sie mit einem Taschenrechner nachvollziehen:

Jeden Anteil in Licht umrechnen. Rot, Grün und Blau werden durch 255 geteilt und dann „entzerrt“: Bildschirme speichern Helligkeit nicht gleichmäßig, sondern so, wie das Auge sie empfindet. Die Formel macht das rückgängig.
Gewichten. Das Auge ist für Grün viel empfindlicher als für Blau. Die Helligkeit ist deshalb 0,2126 × Rot + 0,7152 × Grün + 0,0722 × Blau. Grün zählt also fast zehnmal so viel wie Blau – darum wirkt reines Blau so dunkel.
Teilen. (hellere Helligkeit + 0,05) geteilt durch (dunklere + 0,05). Die 0,05 steht für das Licht, das ein Bildschirm immer ein wenig spiegelt. Ohne sie wäre Weiß auf Schwarz unendlich stark; mit ihr ergibt sich das Höchste, 21 : 1.

Schrift	Grund	Verhältnis	reicht für
Aerona-Blau `#3b82f6`	Weiß	3,68 : 1	nur große Schrift
Aerona-Blau `#3b82f6`	Schwarz	5,71 : 1	Fließtext
Grau `#777777`	Weiß	4,48 : 1	knapp nicht für Fließtext
Grau `#767676`	Weiß	4,54 : 1	Fließtext
Schwarz	Weiß	21 : 1	das Höchste, was geht

Zwei Dinge fallen auf. Dieselbe Farbe kann auf dem einen Grund taugen und auf dem anderen nicht – das Blau ist auf Dunkel besser lesbar als auf Weiß. Und zwischen „reicht“ und „reicht nicht“ liegt manchmal ein einziger Schritt im Farbwert: #777777 und #767676 sehen gleich aus. Deshalb misst Aerona, statt zu schätzen – die Karte „Wie zugänglich ist diese Seite?“ im Steckbrief rechnet genau diese Formel. Dieselbe Rechnung zeigt, warum der Aerona-Verlauf zwei Fassungen hat: Weiße Schrift auf dem hellen Blau #60a5fa käme nur auf 2,54 : 1. Auf dem tiefen Verlauf von #2563eb nach #7c3aed sind es 5,17 und 5,70 – beide Enden halten die Schwelle, und nur so ist der Text über den ganzen Knopf lesbar.

Farben anders sehen

Häufig

Rund acht von hundert Männern und etwa eine von zweihundert Frauen unterscheiden bestimmte Farben schwer, am häufigsten Rot und Grün. Der Unterschied zwischen Männern und Frauen hat einen Grund: Die häufigen Formen werden über das X-Chromosom vererbt, von dem Männer nur eines haben. In einer gemischten Schulklasse sitzt so im Schnitt etwa ein Kind, das Rot und Grün schwer unterscheidet.

Nie nur Farbe

Deshalb darf eine Aussage nie nur über Farbe laufen. Ein Fehler braucht auch ein Zeichen oder ein Wort, nicht nur Rot. Bei Aerona gilt das auch für Zustände: Ein gewählter Reiter zeigt sich durch Fläche und Gewicht, nicht allein durch einen anderen Farbton (Regel 32).

Keine Aussage lebt allein in Farbe, Bewegung, Ton oder Position.
Regelwerk von Aerona, Regel 25 „Barrierefreiheit“

Selbst ausprobieren

Wähle eine Art, und die ganze Webseite erscheint so, wie Menschen mit dieser Farbsehschwäche sie ungefähr sehen. Oben erscheint dann ein Band, über das du jederzeit zur normalen Ansicht zurückkommst. Die Ansicht bleibt eingeschaltet, bis du zurückschaltest – auch auf anderen Seiten, damit du prüfen kannst, ob dort noch alles zu verstehen ist. Dieselbe Wahl gibt es in den Einstellungen unter „Aussehen“.

Rotblindheit (Protanopie)

Die Zapfen im Auge, die auf langwelliges, rotes Licht ansprechen, fehlen. Rot und Grün sind schwer auseinanderzuhalten, und Rot wirkt dunkler. Eine rote Warnung auf dunklem Grund kann dadurch fast verschwinden – ein Grund mehr, sie nie nur rot zu machen.

Grünblindheit (Deuteranopie)

Die Zapfen für mittelwelliges, grünes Licht fehlen. Auch hier fallen Rot und Grün zusammen. Beide Formen zusammen nennt man Rot-Grün-Schwäche. Häufiger als das völlige Fehlen ist eine abgeschwächte Form, bei der die Farben nur näher zusammenrücken.

Blaublindheit (Tritanopie)

Die Zapfen für kurzwelliges, blaues Licht fehlen. Vor allem Blau und Grün sind dann schwer auseinanderzuhalten, oft auch Gelb und Violett. Diese Form ist sehr selten und betrifft Männer und Frauen etwa gleich oft.

Graustufen (Achromatopsie)

Wer gar keine Farben sieht, unterscheidet nur hell und dunkel. Dann zählt allein der Kontrast – genau das, was die Richtwerte oben messen. Völlige Farbenblindheit ist sehr selten; die Graustufen-Ansicht ist trotzdem nützlich, weil sie zeigt, ob eine Seite ohne jede Farbe noch Ordnung hat.

Das ist eine Annäherung. Ein Bildschirm kann nur ungefähr zeigen, welche Farben für Betroffene zusammenfallen, und jede Farbsehschwäche ist verschieden stark – viele Menschen sehen Farben nur etwas anders, nicht gar nicht. Gerechnet wird mit dem Modell von Machado, Oliveira und Fernandes (2009) in der stärksten Stufe, die Graustufen nach derselben Helligkeitsformel, mit der auch der Kontrast berechnet wird.

Hell und Dunkel

Das Gerät sagt Bescheid

Browser teilen einer Seite mit, ob das Gerät hell oder dunkel eingestellt ist. In CSS heißt diese Abfrage prefers-color-scheme. Diese Webseite folgt ihr beim ersten Besuch; danach gilt, was du selbst wählst, und seit dem 19. September 2026 auf Wunsch auch die Uhrzeit.

Nicht einfach umdrehen

Ein dunkler Modus ist mehr als vertauschte Farben. Jede Farbe braucht auf dem neuen Grund wieder genug Kontrast. Das Aerona-Blau zeigt es: auf Schwarz 5,71 : 1 und damit gut für Fließtext, auf Weiß nur 3,68 : 1. Wer einen Modus nur umdreht, bekommt in einem davon unlesbare Stellen.

Grelle Töne

Auf dunklem Grund wirken sehr satte Farben oft grell. Viele Gestalter nehmen dort hellere, weniger gesättigte Töne. Deshalb hat auch der Aerona-Verlauf eine helle Fassung für dunklen Grund und eine tiefe, die weiße Schrift trägt.

Bei Aerona: Jede Oberfläche muss hell und dunkel funktionieren. Der Kontrast wird in beiden Modi gemessen, nicht geschätzt. Für alle, denen das nicht reicht, gibt es seit dem 19. September 2026 den hohen Kontrast: Jede Schrift hat dann mindestens 7 : 1, und statt durchscheinendem Glas gibt es deckende Flächen.

Farben aus deinem Bild

Leg ein eigenes Foto ab, und die Seite rechnet daraus seine Hauptfarben: wie viel vom Bild jede ausmacht, ihre Schreibweisen zum Kopieren und welche Paare sich als Schrift auf Hintergrund lesen lassen. So wird aus einem Urlaubsfoto eine Farbpalette, und du siehst gleich, welche Farben sich für Text eignen und welche nur für Flächen. Am Ende kannst du alles als CSS-Variablen kopieren oder als Musterbild speichern.

Dein Bild bleibt in deinem Browser. Es wird nicht hochgeladen, nicht gesendet und nicht gespeichert. Gerechnet wird auf diesem Gerät – lädst du die Seite neu, ist es weg.

Bild hierher ziehen oder mit Strg + V einfügen

Die Hauptfarben

Die Namen stammen aus den 48 Hausfarben der Aerona-Apps – dieselben wie im Farbrad. Gibt es keine nahe, steht „deutlich anders“ dabei.

Welche Paare sich lesen lassen

Jede Farbe einmal als Hintergrund, einmal als Schrift. Die Richtwerte sind die aus dem Abschnitt Kontrast: ab 4,5 : 1 für Text, ab 3 : 1 für große Schrift.

gut für Text nur große Schrift nicht zum Lesen

Probezeilen

Mitnehmen

So wird gerechnet: Das Bild wird auf höchstens 160 Bildpunkte verkleinert, dann werden ähnliche Farben zu Gruppen zusammengefasst (k-means). Gemessen wird dabei im Farbraum OKLab, in dem gleiche Abstände ungefähr gleich großen gesehenen Unterschieden entsprechen – anders als in RGB. Es gibt keinen Zufall: Dasselbe Bild ergibt immer dieselben Farben. Farben, die sich kaum unterscheiden, werden zu einer, und was weniger als 1 % des Bildes ausmacht, fällt weg.