Artikel

Eine barrierefreie Farbpalette aus einem Bild extrahieren

Ein Foto oder ein Marken-Asset enthält oft den Ausgangspunkt für ein vollständiges Farbsystem. Diesen Ausgangspunkt zu extrahieren, zu einer nutzbaren Palette zu formen und dann gegen Barrierefreiheitsstandards zu prüfen, erfordert drei verschiedene Schritte. Dieser Artikel behandelt jeden davon der Reihe nach: wie die Palettenextraktion unter der Haube funktioniert, wie man Farben für den praktischen Einsatz auswählt und anpasst, wie man den Kontrast gegen WCAG-Schwellenwerte prüft und wie man Paare findet, die für farbenblinde Nutzer zu ähnlich werden.

Verfasst von Bastien Sulyan · Veröffentlicht am 29. Juni 2026

Wie eine Palette extrahiert wird: Pixel-Sampling und Farbreduktion

Jedes digitale Bild ist ein Raster aus Pixeln, die jeweils einen Farbwert in einem Raum wie RGB tragen. Ein Palettenextraktor überprüft nicht jeden Pixel einzeln: Ein 2-Megapixel-Foto enthält 2 Millionen Datenpunkte, deren Verarbeitung langsam wäre und Tausende von leicht unterschiedlichen Farbtönen statt einer nutzbaren Menge zurückgeben würde. Stattdessen tastet das Tool das Pixelraster in einem regelmäßigen Intervall ab und sammelt eine repräsentative Teilmenge. Diese Teilmenge wird dann in einen Farbreduktionsalgorithmus eingespeist. Der gebräuchlichste Ansatz gruppiert ähnliche Farben mithilfe einer Clustering-Methode, manchmal Median-Cut oder k-means-ähnliche Partitionierung genannt. Der Algorithmus ordnet jeden abgetasteten Pixel basierend auf Farbähnlichkeit einem von einer festen Anzahl von Behältern zu und berechnet dann die Durchschnittsfarbe jedes Behälters. Das Ergebnis ist eine kurze Liste, in der Regel 4 bis 16 Farben, die zusammen die dominanten visuellen Töne im Bild ausmachen. Farben, die nur in kleinen isolierten Bereichen vorkommen, können übersehen werden; das ist erwartetes Verhalten und kein Fehler.

Raster von Pixeln aus einem Foto, das schrittweise zu sechs einfarbigen Farbfeldern aggregiert wird, mit Pfeilen, die den Clustering-Schritt anzeigen, der ähnliche Farbtöne zusammenführt

Von rohen Dominanzfarben zu einer nutzbaren Palette

Das rohe Ergebnis eines Palettenextraktors ist eine nach Häufigkeit geordnete Farbliste, aber Häufigkeit allein macht noch keine Palette. Ein Waldfoto liefert mehrere Grüntöne, die zu ähnlich sind, um sie in einer Benutzeroberfläche als eigenständige Akzente zu verwenden. Die praktische Arbeit besteht im Auswählen und Anpassen. Beginnen Sie damit, eine Farbe als Ihre Primärfarbe zu identifizieren: die auffälligste und am wenigsten neutrale. Suchen Sie unter den verbleibenden Farben nach höchstens zwei, die mit der Primärfarbe und untereinander kontrastieren. Diese werden Ihre Akzente. Alles andere, einschließlich der entsättigten Töne, die der Extraktor häufig aus Schatten und Mitteltönen zurückgibt, kann als Neutraltöne für Hintergründe und Rahmen dienen. Sobald Sie diese grobe Struktur haben, müssen Sie fast sicher einzelne Werte anpassen. Das color-converter-Tool ermöglicht es, jede Farbe in hex, RGB und HSL zu untersuchen. HSL ist hier besonders nützlich: Sie können den Farbton konstant halten und Helligkeit oder Sättigung verschieben, um eine engere oder lockerere Familie zu erstellen, ohne die gleiche Farbfamilie zu verlassen.

Kontrast prüfen: WCAG-Schwellenwerte für lesbaren Text

Sobald Sie Kandidatenfarben für Text und Hintergrund haben, müssen Sie prüfen, ob die Kombination lesbar ist. Die Web Content Accessibility Guidelines (WCAG) definieren dafür ein Kontrastverhältnis. Das Verhältnis vergleicht die relative Leuchtdichte zweier Farben: Ein Wert von 1:1 bedeutet kein Kontrast (gleiche Farbe auf gleicher Farbe), und 21:1 ist das Maximum (Schwarz auf Weiß). WCAG 2.1 Level AA erfordert ein Verhältnis von mindestens 4,5:1 für normalen Fließtext und 3:1 für großen Text (18pt oder 14pt fett). Level AAA setzt höhere Schwellenwerte von 7:1 bzw. 4,5:1. Sie müssen die Leuchtdichte nicht von Hand berechnen. Der wichtige Punkt ist, dass ein Farbpaar, das Ihnen bei guter Beleuchtung gut lesbar erscheint, auf dem Bildschirm möglicherweise unter 4,5:1 liegt, und die Richtlinie existiert genau für diesen Fall. Nachdem Sie Farben extrahiert und angepasst haben, testen Sie jedes Text-auf-Hintergrund-Paar, das Sie verwenden möchten. Ein mittleres Grau, das auf Weiß gut lesbar ist, kann auf einem hellen Beige-Hintergrund aus Ihrer extrahierten Palette vollständig scheitern.

Zwei Farbpaare nebeneinander: ein Paar mit einem Kontrastverhältnis von 2,8:1, als unzureichend markiert, und ein anderes Paar mit 5,3:1, als ausreichend für WCAG AA-Fließtext markiert

Farbenblindheit: Simulation, wie Paare für betroffene Nutzer aussehen

Ungefähr 1 von 12 Männern und 1 von 200 Frauen hat eine Form von Farbsehschwäche. Der häufigste Typ ist Deuteranopie (verminderte Empfindlichkeit für Grün), gefolgt von Protanopie (verminderte Empfindlichkeit für Rot). Tritanopie (verminderte Empfindlichkeit für Blau-Gelb) ist seltener. Bei jedem Typ ordnet das visuelle System bestimmte Wellenlängen derselben wahrgenommenen Farbe zu, die nicht betroffene Betrachter als unterschiedlich sehen. Das praktische Problem für eine Palette ist, dass zwei Farben, die bei normaler Sicht deutlich unterschiedlich erscheinen, für einen farbenblinden Nutzer zum gleichen Ton werden können, was sie nutzlos macht, um Unterschiede zu vermitteln, z. B. wenn nur Rot und Grün Erfolg und Fehler signalisieren. Eine Farbenblindheitssimulation zeigt Ihnen, wie die Palette aussieht, wenn die betroffenen Kanäle komprimiert sind. Die Paare, die zu einem nahezu identischen Grau oder Braun zusammenlaufen, sind die, die Sie überdenken sollten: Entweder den Helligkeitsunterschied zwischen ihnen erhöhen, damit der Kontrast auch ohne den Farbtonunterschied erhalten bleibt, oder einen sekundären Hinweis hinzufügen (Form, Beschriftung, Muster), damit Farbe nicht das einzige Signal ist.

Lokal arbeiten: color-palette, color-blindness und color-converter

Alle drei in diesem Artikel beschriebenen Schritte können abgeschlossen werden, ohne Ihr Bild oder Ihre Markenfarben an einen Server zu senden. Das color-palette-Tool läuft vollständig im Browser: Sie laden ein Bild hoch, es tastet die Pixel lokal ab und gibt die dominanten Farben als hex-Werte zurück. Keine Datei wird übertragen. Das color-converter-Tool akzeptiert einen hex-Code und zeigt die gleiche Farbe in RGB und HSL an, sodass Sie gezielte Anpassungen an Helligkeit oder Sättigung vornehmen können, während Sie in derselben Farbfamilie bleiben. Sowohl der hex- als auch die konvertierten Werte existieren nur auf der Seite. Das color-blindness-Tool funktioniert umgekehrt: Sie legen ein Bild ab, und es rendert Deuteranopie-, Protanopie- und Tritanopie-Simulationen dieses Bildes, berechnet im Browser. Um statt eines Fotos eine Palette zu prüfen, exportieren oder screenshotten Sie Ihre Farbmuster zuerst als Bild und legen dieses dann im Simulator ab. Wenn Sie die drei Tools nacheinander verwenden, aus dem Bild extrahieren, in color-converter anpassen, dann ein Farbmuster-Bild exportieren und es in color-blindness prüfen, decken Sie den gesamten oben beschriebenen Workflow ab. Ihr Bild bleibt dabei auf Ihrem Gerät, was wichtig ist, wenn das Quellbild unveröffentlichtes Branding oder die unfertige Identität eines Kunden enthält.

Tools in diesem Artikel

Häufige Fragen

Wie viele Farben gibt ein Palettenextraktor in der Regel zurück?

Die meisten Tools geben standardmäßig zwischen 5 und 16 Farben zurück, obwohl viele die Anzahl einstellbar machen. Weniger Farben zurückzugeben bedeutet, dass der Algorithmus mehr Pixel zusammenfassen muss, was unterschiedliche, aber ähnliche Töne zusammenführen kann. Mehr Farben zurückzugeben kann Beinahe-Duplikate erzeugen, die schwer eigenständig zu verwenden sind. Für eine UI-Palette sind 6 bis 8 Farben in der Regel ein praktischer Ausgangspunkt.

Kann eine aus einem Bild extrahierte Palette automatisch den WCAG-Kontrast erfüllen?

Nicht automatisch. Dominante Farben in einem Foto sind oft Mitteltöne mit moderater Leuchtdichte, die dazu neigen, Verhältnisse im Bereich 2:1 bis 3:1 zueinander zu erzeugen. Den 4,5:1-Schwellenwert für Fließtext zu erreichen erfordert in der Regel das Aufhellen von Hintergrundwerten oder das Abdunkeln von Textwerten über das hinaus, was die rohe Extraktion liefert. Die Extraktion gibt Ihnen einen Ausgangspunkt; die Kontrastprüfung zeigt, wie viel Anpassung nötig ist.

Berücksichtigt das WCAG-Kontrastverhältnis Farbenblindheit?

Teilweise. Die WCAG-Leuchtdichteformel basiert auf relativer Helligkeit, nicht auf Farbton, sodass ein kontraststark kontrastierendes Paar, das 4,5:1 erfüllt, für farbenblinde Nutzer in der Regel erkennbar bleibt, weil der Helligkeitsunterschied erhalten bleibt. Zwei Farben mit ähnlicher Leuchtdichte, aber unterschiedlichem Farbton, wie Rot und Grün bei gleicher Helligkeit, können jedoch eine leuchtdichtebasierte Kontrastprüfung bestehen und trotzdem für Deuteranope nicht unterscheidbar sein. Eine Farbenblindheitssimulation ist der richtige Weg, um die Farbtondifferenzierung getrennt vom Kontrastverhältnis zu prüfen.