Aus einem Foto eine Web-Palette bauen, die den Kontrast besteht

Du richtest einen Farbextraktor auf ein Foto von einem Wald oder einem Teller Essen, und er gibt dir acht Swatches zurück. Sie sehen zusammen wunderbar aus. Dann setzt du den schönsten auf eine Überschrift, den Fließtext in einen anderen, und die Seite liest sich wie ein Aquarell, das im Regen lag. An den Swatches war nie etwas falsch. Sie waren nur nie als Text gedacht.

Extraktor-Tools und Listen mit “50 traumhaften Paletten” gibt es überall. Fast keine davon schließt den Kreis zu Farben, die du auf einer echten Website ausliefern kannst, ohne an der Barrierefreiheit zu scheitern. Hier geht es um den ganzen Ablauf: erst die dominanten Farben holen, dann aus den rohen Swatches Rollen machen, die halten.

TL;DR: Extrahier die Farben, aber nimm sie nicht so, wie sie sind. Sortier sie in Rollen (Hintergrund, Fläche, Text, Akzent) und dunkle oder helle dann die Paare ab, die den WCAG-Kontrast verfehlen. Kräftige Farben gehen an Überschriften und Akzente, nicht an Fließtext.

Was ein Foto dir tatsächlich liefert

Ein Palettenextraktor scannt ein Bild und meldet die Farben, die die meiste Fläche einnehmen, meist gebündelt in fünf bis zehn Swatches. Ein Foto von Salbeiblättern auf einem cremefarbenen Teller liefert vielleicht ein weiches Salbeigrün, ein warmes Creme, ein schlammiges Olive, ein Fast-Weiß als Highlight und ein Schattenbraun zurück.

Das sind die Farben der Szene. Sie sind nach dem gewichtet, was das Bild füllt, und das sind meist Mitteltöne und sanfte Pastelltöne. Genau diese Gewichtung sorgt dafür, dass das Ergebnis ruhig und stimmig wirkt, und genau deshalb funktionieren so wenige der Swatches als Text. Fotos enthalten selten ein echtes Dunkel oder ein knackiges Papierweiß in nennenswerter Menge, also hat der Extraktor nichts Fast-Schwarzes für deinen Fließtext.

Behandle die Extraktion also als Schritt eins von zwei. Du hast Rohmaterial. Jetzt machst du es brauchbar.

Kurz zum Kontrastverhältnis

Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben: wie viel Licht jede reflektiert, gewichtet danach, wie das Auge Rot, Grün und Blau tatsächlich wahrnimmt. Das Ergebnis ist eine Zahl von 1:1 (identisch) bis 21:1 (reines Schwarz auf reinem Weiß).

WCAG, die Barrierefreiheits-Richtlinie, an der sich die meisten Teams orientieren, setzt für die Stufe AA zwei Schwellen für den Alltag:

• 4,5:1 für normalen Fließtext gegenüber seinem Hintergrund
• 3:1 für großen Text (grob ab 24px normal oder 18,66px fett) und für UI-Teile wie Icons, Formularränder und Fokus-Ringe

Der entscheidende Punkt für die Palettenarbeit: Kontrast hängt vom Helligkeitsabstand ab, nicht davon, ob zwei Farben “unterschiedlich aussehen”. Ein kräftiges Magenta und ein tiefes Petrol können fürs Auge stark beißen und trotzdem den Kontrast verfehlen, weil sie auf ähnlicher Helligkeit liegen. Zwei Farben brauchen echten Abstand in der Leuchtdichte, um zu bestehen.

Sortier die Swatches in Rollen, bevor du sie beurteilst

Eine Website braucht ein paar besetzte Aufgaben, keinen Sack voller hübscher Farben. Ordne deine extrahierten Swatches vier Rollen zu:

• Hintergrund: die Seite hinter allem, meist dein hellster oder dunkelster Swatch
• Fläche: Karten, Panels und Eingabefelder, die auf dem Hintergrund liegen, einen halben Schritt davon entfernt
• Text: die Farbe des Fließtexts, die 4,5:1 gegenüber Hintergrund und Fläche erreichen muss
• Akzent: Links, Buttons, Highlights, wo eine kräftige extrahierte Farbe ihren Platz verdient

Die meisten extrahierten Swatches sind perfekt für Hintergrund, Fläche und Akzent. Bei der Text-Rolle lassen dich Fotos im Stich, weil das Dunkel, das du für lesbaren Fließtext brauchst, im Bild meist fehlt. Oft erfindest du es, indem du einen Farbton aus dem Foto nimmst und ihn deutlich dunkler ziehst.

Ein durchgerechnetes Beispiel

Sagen wir, das Salbei-auf-Creme-Foto gibt dir das hier:

Swatch	Hex	Rollenkandidat
Creme	#F4EFE3	Hintergrund
Mittleres Salbei	#9CAE8B	Akzent oder Text?
Warmweiß	#FBF8F1	Fläche
Olive	#6E7A57	Akzent

Die Versuchung ist groß, Fließtext in mittlerem Salbei auf Creme zu setzen, weil das Paar weich und markentypisch aussieht. Prüf es:

• Mittleres Salbei #9CAE8B auf Creme #F4EFE3 ergibt etwa 1,7:1

Das besteht nicht. Es besteht klar nicht. Es verfehlt normalen Text (4,5:1), großen Text (3:1) und sogar das UI-Minimum (3:1). Zwei Mitteltöne, zu nah in der Helligkeit. Als Füllfarbe oder dekorativer Block ist es in Ordnung. Als Text ist es für viele Menschen unlesbar und für manche unsichtbar.

Jetzt repariere es, ohne den Farbton wegzuwerfen. Behalte das Grün, senke die Helligkeit, bis das Paar die Hürde nimmt:

• Abgedunkeltes Salbei #3C4A2E auf Creme #F4EFE3 ergibt etwa 8,4:1

Das besteht AA für Fließtext mit Luft nach oben, und es liest sich immer noch als dieselbe Salbei-Familie. Du hast das Markengefühl behalten und es lesbar gemacht. Das ursprüngliche mittlere Salbei ist auch nicht verschwendet. Befördere es zu einer großen Überschrift oder einem Kartenrand, wo die 3:1-Hürde erreichbar ist:

• Mittleres Salbei #9CAE8B auf Creme braucht 3:1 für großen Text und verfehlt es bei 1,7:1 weiterhin, bleibt also dekorativ
• Olive #6E7A57 auf Creme ergibt etwa 3,4:1, was großen Text und UI nimmt, aber keinen Fließtext

Das Muster ist gleichbleibend. Die kräftigen und die mittleren Farben übernehmen Überschriften, Buttons, Ränder und Flächen. Eine abgedunkelte oder fast-schwarze Farbe trägt das Lesen. Prüf immer das echte Paar, das du ausliefern willst, Vordergrund gegen seinen tatsächlichen Hintergrund, nicht gegen ein angenommenes Weiß.

Eine wiederholbare Routine

1. Extrahier die Palette aus deinem Bild und schreib die Hex-Werte auf.
2. Nimm den hellsten Swatch für den Hintergrund, einen Fast-Zwilling für die Fläche.
3. Für Text nimm einen Farbton, den du magst, und dunkle ihn ab, bis er 4,5:1 auf Hintergrund und Fläche erreicht. Prüf das Paar, justiere, prüf erneut.
4. Weise die übrigen kräftigen Swatches Akzenten und großen Überschriften zu und prüf jedes Akzentpaar gegen 3:1.
5. Stichprobe die Kombinationen, die du wirklich rendern wirst: Link auf Hintergrund, Buttontext auf Buttonfüllung, Platzhalter auf Eingabefeld.

Zwei Gewohnheiten ersparen das meiste Ärgernis. Erstens: Lass nie einen Mittelton den Fließtext machen; wenn ein Swatch in der Mitte der Helligkeitsspanne sitzt, gehört er zu Flächen und Akzenten. Zweitens: Prüf das Paar, nicht den Swatch. Eine Farbe ist für sich genommen weder barrierefrei noch nicht; nur eine Vordergrund-Hintergrund-Kombination hat ein Verhältnis.

Kostenlose Paletten- und Kontrast-Tools im Browser kommen bald auf color.hivly.net, damit du aus einem Foto extrahieren, einen Swatch heller oder dunkler schieben und zusehen kannst, wie sich das Verhältnis gegen einen echten Hintergrund aktualisiert, alles auf der Seite und ohne dass etwas hochgeladen wird. Bis dahin liefert dir die obige Routine plus ein beliebiger Kontrastprüfer eine Palette, mit der du wirklich bauen kannst.

Die Farben in einem Foto sind eine Stimmung. Eine Web-Palette ist ein Satz Aufgaben. Die Arbeit besteht darin, von der einen zur anderen zu kommen, ohne die Stimmung oder die Lesbarkeit zu verlieren, und das meiste davon ist einfach, einen Swatch weit genug abzudunkeln.