Farben vergleichen

Warum Farben überhaupt direkt nebeneinander vergleichen?

Das menschliche Farbgedächtnis ist erstaunlich schlecht. Nebeneinander können wir Millionen von Farben unterscheiden – doch sobald eine davon verschwindet, ein Browser-Tab geschlossen, eine Farbkarte umgedreht, läuft der Vergleich nur noch gegen eine vage Erinnerung, und Unterschiede, die im direkten Nebeneinander offensichtlich wären, lösen sich schlicht auf. Deshalb fällt jede ernsthafte Farbentscheidung – von der Markenpalette bis zur Wandfarbe – mit räumlich benachbarten Kandidaten: Das Auge ist ein hervorragender Unterschiedsdetektor und ein miserables absolutes Messgerät. Genau dieses Nebeneinander bekommst du hier auf dem Bildschirm – bis zu vier Farben als aneinandergrenzende Flächen, dazu die Zahlen, die deinen Eindruck stützen (oder widerlegen).

Simultankontrast: Farben verändern sich mit ihren Nachbarn

Eine Farbe wird nie für sich allein wahrgenommen. Das visuelle System gleicht ständig gegen die Umgebung ab: Derselbe Pixelwert wirkt neben Weiß dunkler, neben Schwarz heller, neben einem kühlen Nachbarn wärmer und neben einem kräftigen blasser. Dieser Effekt – der Simultankontrast – ist keine Täuschung, die man sich abgewöhnen kann; so funktioniert Sehen.

Daraus folgen zwei Dinge für die Praxis. Erstens zählt der Abstand zwischen den Farbfeldern: Trennt sie der Seitenhintergrund, wird jede der beiden ähnlichen Farben gegen diesen Hintergrund beurteilt – ihr gegenseitiger Unterschied wird dadurch verdeckt. Stell den Abstands-Regler auf 0, und die Farben bilden eine gemeinsame Kante: genau die Bedingung, unter der das Auge Unterschiede am schärfsten erkennt, und die ehrliche Vorschau darauf, wie die Farben in einem Layout wirken, in dem sie tatsächlich aneinanderstoßen. Zweitens zählt das Umfeld: Der optionale mittelgraue Rahmen (ein neutrales Grau von rund 50 %) ist das Standard-Umfeld beim Farbproof – gewählt, weil er die Wahrnehmung in keine Richtung verschiebt. Schalte ihn ein für ein faires Urteil, aus, um die Farben vor der Seite so zu sehen, wie sie ist.

Die ΔE-Zahl richtig lesen

ΔE („Delta E“) ist der Abstand zwischen zwei Farben in einem wahrnehmungsgerecht aufgebauten Farbraum – ein Maß dafür, wie unterschiedlich sie aussehen, und nicht dafür, wie weit ihre Codewerte auseinanderliegen. Diese Seite verwendet CIEDE2000, die aktuelle CIE-Empfehlung, die die bekannten Übertreibungen der älteren Formel von 1976 in Blautönen und Fast-Grautönen korrigiert. Die Skala ist nach oben offen, in der Praxis gilt aber:

Zwei Faustregeln. Bei einem ΔE unter 1 lohnt der Streit über die Werte nicht – kein Betrachter wird den Unterschied je sehen. Und ein ΔE um 2 ist die klassische Toleranzgrenze in Druck und Fertigung: im direkten Nebeneinander wie hier sichtbar, im Alltag unsichtbar.

Das Kontrastverhältnis daneben

Zu jedem benachbarten Paar steht auch das WCAG-2.x-Kontrastverhältnis, denn ΔE und Kontrast beantworten verschiedene Fragen: ΔE fragt „sehen die beiden nach unterschiedlichen Farben aus?“, der Kontrast fragt „könnte die eine als Text auf der anderen stehen?“. Zwei kräftige Farben können sich im Farbton extrem unterscheiden – ein riesiges ΔE – und trotzdem fast gleich hell sein, was ein Kontrastverhältnis nahe 1:1 und unlesbaren Text ergibt. Soll aus einem Paar hier Vorder- und Hintergrund werden, nimm es mit in den eigenen Kontrast-Checker: Der liefert zusätzlich AA/AAA-Urteile und Korrekturvorschläge mit einem Klick.

Bildschirm, Druck und die reale Welt

Der Vergleich, den du siehst, ist auf Code-Ebene exakt – beide Flächen werden genau aus den Werten der Tabelle gerendert. Nicht garantiert ist, dass dein Display diese Werte so zeigt wie ein anderes. Paneltyp, Helligkeit, Weißpunkt, Nachtmodus-Filter und Farbmanagement verschieben die Darstellung – deshalb lassen sich dieselben zwei Grüntöne am Desktop-Monitor unterscheiden und wirken am Handy identisch. Der ΔE-Wert wird aus den Farbdefinitionen selbst berechnet und ist damit geräteübergreifend stabil – vertraue ihm mehr als einem einzelnen Bildschirm. Und für Druck oder Anstrich gilt: Ein sRGB-Wert ist nur ein grober Stellvertreter für Farbe oder Pigment. Nutze dieses Tool, um die Auswahl einzugrenzen, und bestätige sie dann mit echten Mustern unter dem Licht, in dem das Ergebnis später steht.

Wofür das in der Praxis genutzt wird

• Entscheidungen über Markenfarbtöne – halte das aktuelle Markenblau gegen zwei vorgeschlagene Auffrischungen; das paarweise ΔE beziffert, wie groß der Sprung je Option wirklich ist.
• Wandfarben in der engeren Wahl – lege die Farbkarten nebeneinander, bevor du Proben kaufst; die abstandslose Kante zeigt Unterton-Unterschiede, die das Licht im Baumarkt verschluckt.
• Paletten entrümpeln – über Jahre gewachsene Paletten sammeln Fast-Dubletten an; jedes benachbarte Paar unter ΔE 2 ist ein Kandidat zum Zusammenlegen.
• Design-System-Reviews – prüfe, ob sich die Varianten „hover“ und „default“ deutlich genug unterscheiden, um aufzufallen, und trotzdem als eine Familie lesbar bleiben.

Alles hier läuft zu 100 % im Browser – die Farben, die du vergleichst, verlassen nie deinen Rechner. Um Vergleichskandidaten direkt aus einem Screenshot oder Produktfoto zu ziehen, starte mit dem Bild-Farbpicker auf der Startseite; um aus einem gewählten Paar barrierefreien Text auf Hintergrund zu machen, geht es im Kontrast-Checker weiter.