Digitale Farben gibt es in einem Dutzend verschiedener Formate, die für unterschiedliche Zwecke optimiert sind – HEX für das Web, RGB für Displays, CMYK für den Druck, HSL für die intuitive menschliche Anpassung, OKLab und OKLCH für wahrnehmungsmäßig einheitliche Skalierungen und Display P3 für Monitore mit großem Farbumfang. Ein gutes Farbtool konvertiert sie präzise, generiert harmonische Paletten, die die zugrunde liegende Farbtheorie respektieren, und überprüft die Zugänglichkeitskonformität, bevor die Farben ausgeliefert werden. In den folgenden Abschnitten wird erläutert, warum es mehrere Farbformate gibt, wie Farbharmonien mathematisch funktionieren und warum die Einhaltung von WCAG- und APCA-Kontrasten für professionelles digitales Design nicht mehr verhandelbar ist.
Warum es mehrere Farbformate gibt
Jedes Farbformat löst ein spezifisches Problem, mit dem die anderen nur schlecht umgehen können. RGB ist das native Format digitaler Displays – jeder Bildschirm rendert Farben durch Mischen roter, grüner und blauer Subpixel, sodass RGB über eine direkte Hardwarezuordnung verfügt. Seine Schwäche besteht darin, dass RGB-Werte nicht gut mit der Farbwahrnehmung des Menschen übereinstimmen: (255, 128, 0) und (255, 0, 128) sind beide „intensiv“, aber optisch sehr unterschiedlich, und es gibt keine intuitive Möglichkeit, „diese Farbe dunkler machen“ in RGB anzupassen, ohne die Kanalmathematik zu kennen. HEX ist einfach RGB in kompakter Hexadezimalschreibweise, allgegenwärtig in CSS und Webdesign, weil es sauber in 6 Zeichen passt. HSL schließt die Lücke in der menschlichen Wahrnehmung: Der Farbton ist der Farbwinkel, auf den Sie auf einem Farbkreis zeigen würden, die Sättigung steuert die Lebendigkeit und die Helligkeit steuert die Helligkeit. Die meisten Farbwähler in Design-Tools verwenden standardmäßig HSL, da sich die Anpassung dieser drei Achsen natürlich anfühlt. HSV/HSB ist ein enger Cousin von HSL mit einer anderen Helligkeitsdefinition. CMYK ist das Druckformat – Drucker verwenden Cyan-, Magenta-, Gelb- und Schwarztinten anstelle von Licht, und die subtraktive Mischberechnung ist grundlegend anders. OKLab und OKLCH sind moderne Wahrnehmungsfarbräume, in denen gleiche numerische Schritte gleiche visuelle Unterschiede erzeugen. Dadurch eignen sie sich ideal für die Erstellung zugänglicher Farbskalen, die gleichmäßig verteilt aussehen, anstatt in der Mitte zu klumpen, wie es bei HSL-Skalen der Fall ist. Räume mit großem Farbraum wie Display P3 bieten etwa 25 % sattere Grün- und Rottöne für moderne Mobil- und Desktop-Displays. Ein gutes Farbtool konvertiert all diese Punkte genau und erkennt die Unterschiede im Farbumfang.
Wie Farbharmonien funktionieren
Farbharmonien sind Farbkombinationen, die zusammen gut aussehen, und die Theorie dahinter ist überraschend mathematisch. Harmonien entstehen durch die Drehung des Farbtonwinkels im Farbraum bei konstanter Sättigung und Helligkeit. Die sieben Standardharmonien: Komplementär (+180°, entgegengesetzt im Farbkreis) erzeugen den höchsten Kontrast und werden für Akzentfarben und Handlungsaufforderungen verwendet. Analog (±30°, Nachbarn am Rad) erzeugt ein subtiles, einheitliches Erscheinungsbild, wie es in der Naturfotografie üblich ist, und beruhigende Schnittstellen. Triadisch (+120°, +240°) erzeugt drei Farben in gleichen Abständen, lebendig, aber ausgewogen. Split-Complementary (+150°, +210°) weicht das komplementäre Paar mit benachbarten Nachbarn ab, was einfacher zu handhaben ist als rein komplementär. Tetradisch (+60°, +180°, +240°) erzeugt vier Farben in rechteckiger Anordnung. Quadratisch (+90°, +180°, +270°) erzeugt vier gleichmäßig verteilte Farben – maximale Vielfalt, aber am schwierigsten auszubalancieren. Monochromatisch hält den Farbton konstant und variiert die Helligkeit oder Sättigung für einfarbige Schemata. Die Rechnung ist eine einfache Drehung, aber die visuellen Ergebnisse hängen stark von der Sättigung und Helligkeit der Ausgangsfarbe ab. Hochgesättigte Ausgangsfarben erzeugen dramatische Harmonien; entsättigte Ausgangsfarben erzeugen subtile Farben. Dieses Tool generiert alle sieben Harmonien für jede Eingabefarbe und zeigt sie im Kontext mit exportbereiten CSS-, Tailwind-, SCSS-, SwiftUI-, Jetpack Compose- und Design-Tokens-Konfigurationen an.
WCAG- und APCA-Kontrastkonformität
Die Kontrastanforderungen der Web Content Accessibility Guidelines (WCAG) haben sich in vielen Gerichtsbarkeiten von optionalen Best Practices zu gesetzlichen Anforderungen entwickelt und wirken sich direkt auf Designentscheidungen aus, die ansonsten rein ästhetischer Natur wären. WCAG 2.1 legt Mindestkontrastverhältnisse zwischen Text und Hintergrund fest, gemessen als Verhältnis der relativen Leuchtdichten. Stufe AA (das typische Compliance-Ziel) erfordert 4,5:1 für normalen Fließtext und 3:1 für großen Text (18pt+ fett oder 24pt+). Stufe AAA ist mit 7:1 für normalen und 4,5:1 für großen Text strenger. Der neue WCAG 3-Standard führt APCA (Advanced Perceptual Contrast Algorithm) ein, der räumliche Frequenz, Schriftstärke, Hintergrundpolarität und Lichtanpassung berücksichtigt, um einen physiologisch genaueren Kontrastwert (Lc) zu erzielen. Die Einhaltung dieser Verhältnisse ist für staatliche und kommerzielle Anwendungen, die unter Abschnitt 508 und das ADA fallen, nicht optional. Die Registerkarte „Kontrast & A11y“ in diesem Tool zeigt sowohl WCAG 2.1- als auch APCA-Werte an, bietet mit einem Klick zugängliche Korrekturvorschläge und simuliert, wie Kombinationen bei allen wichtigen Formen von Farbsehschwächen aussehen.