Farbwissenschaft für Interface-Designer: Was ich beim Bau einer farblosen Website gelernt habe

Die W3C Web Content Accessibility Guidelines verlangen ein Mindestkontrastverhältnis von 4,5:1 für normalen Text, doch eine WebAIM-Studie aus dem Jahr 2023 ergab, dass 83,6 % der eine Million meistbesuchten Websites erkennbare WCAG-2-Kontrastfehler auf ihren Startseiten aufwiesen. Ich habe blakecrosley.com mit dem umgekehrten Problem gebaut: maximaler Kontrast (21:1) überall, dann selektiv zurücknehmen.¹

TL;DR

Ich habe meine persönliche Website ohne jegliche Markenfarben gestaltet. Die gesamte visuelle Hierarchie funktioniert durch weißen Text auf absolutem Schwarz (#000000) in vier Opazitätsstufen: 100 %, 65 %, 40 % und 10 %. Diese Entscheidung zwang mich, mich mit perzeptueller Farbwissenschaft zu beschäftigen — warum sRGB über gleichmäßige Abstände lügt, wie OKLCH das Problem löst und warum der Dark Mode andere Kontrastverhältnisse erfordert als der Light Mode. Die interaktiven Werkzeuge unten ermöglichen es Ihnen, Kontrastverhältnisse und Farbraumunterschiede zu erkunden. Die Erkenntnis: Das Verständnis der Wissenschaft hinter der Farbwahrnehmung führt zu besseren Designentscheidungen als ästhetische Intuition.

Meine Farb-Nicht-Palette

Die meisten Designsysteme beginnen mit einer Farbpalette. Meines beginnt mit der Abwesenheit einer solchen:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

Zehn Tokens. Keine Markenfarben. Keine semantische Fehler-/Erfolgs-/Warnungspalette. Die gesamte visuelle Hierarchie funktioniert über vier Transparenzstufen.²

Warum vier Stufen funktionieren

Jede Stufe erfüllt eine spezifische Kommunikationsfunktion:

Jede Stufe besteht den WCAG-AAA-Test (7:1) für Textkontrast. Die tertiäre Stufe bei 40 % Opazität ergibt ein Verhältnis von 8,4:1 — fast das Doppelte des AA-Minimums von 4,5:1. Die brutalistische Wahl von absolutem Schwarz (#000000 statt #0a0a0a oder #1a1a1a) gibt jeder Textstufe maximalen Spielraum.³

Der --spacing-2xs-Vorfall

Ich entdeckte den Wert strikter Design-Tokens, als ich --spacing-2xs für einen Untertitelabstand verwendete. Der Token existierte nicht in meiner :root-Definition. Das CSS schlug stillschweigend fehl, das Layout brach zusammen, und ich verbrachte 20 Minuten mit dem Debugging eines Abstandsproblems, das ein Kompilierungsfehler hätte sein sollen. Die Lösung: Wechsel zu --spacing-xs (dem kleinsten Token, den ich definiert hatte). Die Lektion: Wenn ein Wert im System nicht existiert, ist das Design falsch, nicht das System.⁴

Warum sRGB Designer belügt

Das Problem der perzeptuellen Ungleichmäßigkeit

sRGB (der Standardfarbraum für das Web) bildet Farben auf einen Würfel ab, bei dem jede Achse (Rot, Grün, Blau) von 0 bis 255 reicht. Eine Verschiebung um 50 Einheiten im Rotkanal erzeugt nicht dieselbe wahrgenommene Veränderung wie eine Verschiebung um 50 Einheiten im Grünkanal. Menschliche Augen enthalten mehr grünempfindliche Zapfen als rote oder blaue, wodurch Grünverschiebungen wahrnehmbarer sind als gleichwertige Rotverschiebungen.⁵

Die praktische Konsequenz: Ein Designer, der eine Farbpalette durch gleichmäßige Abstände von Hexwerten erstellt, erzeugt Farben, die ungleichmäßig verteilt aussehen. Das „mittlere” Grau zwischen #000000 und #FFFFFF ist nicht #808080 (mathematischer Mittelpunkt), sondern ungefähr #777777 (perzeptueller Mittelpunkt), weil die menschliche Helligkeitswahrnehmung einem Potenzgesetz folgt und nicht einer linearen Funktion.⁶

Meine Website umgeht das Problem vollständig. Durch die ausschließliche Verwendung von Weiß in variierenden Opazitäten vermeide ich die sRGB-Gleichmäßigkeitsfalle. Opazität skaliert linear mit der wahrgenommenen Transparenz auf einem schwarzen Hintergrund — eine Eigenschaft, die die sRGB-Farbmischung nicht teilt.

Die OKLCH-Lösung

OKLCH (Oklab Lightness, Chroma, Hue) ist ein perzeptuell gleichmäßiger Farbraum, in dem gleiche mathematische Abstände gleichen wahrgenommenen Unterschieden entsprechen. Ein Helligkeitsschritt von 10 Einheiten sieht immer nach derselben Veränderungsmenge aus, unabhängig von der Ausgangsfarbe.⁷

/* sRGB: mathematically even, perceptually uneven */
--gray-100: #f5f5f5;
--gray-200: #e5e5e5;
--gray-300: #d4d4d4;

/* OKLCH: perceptually even steps */
--gray-100: oklch(96% 0 0);
--gray-200: oklch(88% 0 0);
--gray-300: oklch(80% 0 0);

Modernes CSS unterstützt oklch() nativ. Für mein nächstes Projekt, das eine Farbpalette erfordert, werde ich die Palette in OKLCH definieren. Für meine aktuelle Website erreicht das opazitätsbasierte System dieselbe perzeptuelle Gleichmäßigkeit auf andere Weise.

Meine Dark-Mode-Entscheidung: Kein Light Mode

Meine Website hat keine prefers-color-scheme-Media-Query. Sie arbeitet ausschließlich im Dark Mode. Die Entscheidung war bewusst.⁸

Das Argument für zwei Modi: Benutzer erwarten eine Light-Mode-Option. Die Integration von Systemeinstellungen respektiert die Wahl des Benutzers.

Das Gegenargument (für das ich mich entschieden habe): Die Pflege zweier visueller Systeme kompromittiert unweigerlich beide. Ein Design, das bei 65 % Opazität auf Schwarz funktioniert, erfordert eine andere Opazität auf Weiß (näher an 45 %), um dasselbe perzeptuelle Gewicht zu erzielen. Jeder Interaktionszustand, jeder Rahmen, jeder Schatten muss neu kalibriert werden. Ich habe mich entschieden, ein System gut zu gestalten, statt zwei Systeme ausreichend.

Der absolute schwarze Hintergrund (#000000) maximiert den verfügbaren Kontrast für jede Textstufe:

/* My actual typography contrast hierarchy */
.hero__title     { color: var(--color-text-primary); }   /* 21:1 */
.hero__subtitle  { color: var(--color-text-secondary); }  /* 13.7:1 */
.nav a           { color: var(--color-text-secondary); }  /* 13.7:1 */
.nav a:hover     { color: var(--color-text-primary); }    /* 21:1 */

Der Hover-Zustandsübergang (sekundär → primär) bietet funktionales Feedback ausschließlich durch Kontrastveränderung — kein Farbwechsel nötig.

Kontrast und Lesbarkeit

WCAG-Kontrastanforderungen

Das Kontrastverhältnis misst den relativen Leuchtdichteunterschied zwischen Vordergrund- und Hintergrundfarben. Ein Verhältnis von 1:1 bedeutet keinen Kontrast (identische Farben). Ein Verhältnis von 21:1 bedeutet maximalen Kontrast (Schwarz auf Weiß oder Weiß auf Schwarz).⁹

Über WCAG hinaus: APCA

Der WCAG-2-Kontrastalgorithmus hat bekannte Einschränkungen. Der Algorithmus behandelt alle Farben gleich, unabhängig von der Polarität (dunkel auf hell vs. hell auf dunkel), obwohl Forschungsergebnisse zeigen, dass die menschliche Wahrnehmung von Kontrast zwischen den beiden Modi erheblich variiert.¹⁰

APCA (Accessible Perceptual Contrast Algorithm) behebt diese Einschränkungen, indem er Folgendes berücksichtigt: - Polaritätsempfindlichkeit: Dunkler Text auf hellem Hintergrund ist besser lesbar als heller Text auf dunklem Hintergrund bei demselben mathematischen Kontrastverhältnis - Ortsfrequenz: Dünne Schriften erfordern mehr Kontrast als fette Schriften bei derselben Größe - Adaptation: Das Auge passt sich an die umgebende Seitenleuchtdichte an, was den wahrgenommenen Kontrast beeinflusst

APCA wird voraussichtlich die Grundlage für die WCAG-3.0-Kontrastanforderungen bilden. Meine Website profitiert von der Polaritätserkenntnis: Da ich ausschließlich hell auf dunkel verwende, benötige ich höhere Kontrastverhältnisse als eine Light-Mode-Website. Meine niedrigste Textstufe (40 % Opazität, Verhältnis 8,4:1) übertrifft sogar APCAs empfohlenes Minimum für Fließtext auf dunklem Hintergrund.

Semantische Farbe ohne Farbe

Produktive Farbsysteme weisen typischerweise Farben Funktionen zu (Grün für Erfolg, Rot für Fehler). Meine Website verzichtet vollständig auf funktionale Farben, da sie keine transaktionale Benutzeroberfläche hat — keine Formulare, keine Statusmeldungen, keine Erfolgs-/Fehlerzustände. Der Inhalt ist statisch.

Falls ich semantische Farben benötigen würde, würde ich sie gezielt einsetzen:

Die Kombination von Symbolen mit Text eliminiert die rein farbbasierte Kommunikation, die bei den etwa 8 % der Männer mit Farbsehschwäche versagt. Der Ansatz bewahrt zudem mein monochromatisches System. Farbe würde als Akzent dienen, nicht als strukturelles Element.¹¹

Die typografiebasierte Hierarchie

Ohne Farbe als Hierarchieträger übernimmt die Typografie auf meiner Website alles:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display: 5rem;     /* 80px — hero headlines */
  --font-size-7xl:     3.875rem; /* 62px */
  --font-size-base:    1rem;     /* 16px — body text */
  --font-size-xs:      0.75rem;  /* 12px — metadata */
}

Systemschriften, keine benutzerdefinierten Webschriften. Die Wahl ist sowohl eine brutalistische Entscheidung (das native Material der Plattform verwenden) als auch eine Performanceentscheidung (null Ladezeit für Schriften, was zu 100/100 Lighthouse-Bewertungen beiträgt). Die Anzeigegröße (80px) mit engem Zeichenabstand (-0.03em) verleiht Überschriften Gravitas ohne Dekoration. Fließtext bei 16px mit großzügiger Zeilenhöhe (1.7) priorisiert Lesbarkeit über Dichte.¹²

Die 13-stufige Schriftskala von 0,75rem bis 5rem bietet genug Granularität, um Hierarchie allein durch Größe auszudrücken. In Kombination mit den vier Opazitätsstufen stehen mir 52 potenzielle Kombinationen (13 Größen × 4 Opazitäten) zur Verfügung — mehr als genug, um jede Inhaltshierarchie auszudrücken, ohne auf Farbe zurückgreifen zu müssen.

Zentrale Erkenntnisse

Für Designer: - Definieren Sie Farbpaletten in OKLCH statt in sRGB; perzeptuell gleichmäßige Farbräume erzeugen vorhersagbare Hierarchien und konsistente Kontrastverhältnisse über die gesamte Palette - Testen Sie Ihre tertiäre Textstufe gegen WCAG AAA (7:1), nicht nur AA (4,5:1); die AAA-Schwelle bietet genug Spielraum für reale Bildschirmbedingungen (geringe Helligkeit, Blendung, alternde Displays) - Überlegen Sie, ob Ihr Projekt tatsächlich Farbe benötigt; meine Website beweist, dass Typografie und Opazität allein eine vollständige visuelle Hierarchie tragen können

Für Entwickler: - Verwenden Sie CSS oklch() für Farbdefinitionen und testen Sie Kontrastverhältnisse sowohl mit WCAG 2 (aktueller Standard) als auch mit APCA (kommender Standard); die Browserunterstützung für oklch() ist in allen modernen Browsern verfügbar - Implementieren Sie den Dark Mode durch Anpassung von Helligkeit und Sättigung im OKLCH-Raum, statt Hexwerte zu invertieren; perzeptuelle Anpassung liefert bessere Ergebnisse als mathematische Inversion - Strikte Design-Token-Durchsetzung verhindert stille CSS-Fehler; wenn ein Token nicht existiert, sollte sich das Design ändern, nicht das Token-System

Quellen