Die Innere Stimme.

In meinen 25 Jahren Erfahrung im Grafikdesign habe ich (wie alle Designer) immer nach einer guten Lösung gesucht, um Text in ein Bild zu integrieren und dabei genügend Kontrast zu schaffen, um eine gute Lesbarkeit zu gewährleisten. Wenn man im Editorial Design arbeitet, ist jeder Fall unabhängig und alle Inhalte müssen vor der Veröffentlichung überprüft werden. Aber wenn man an einem digitalen Projekt mit dynamischen Inhalten arbeitet, bei dem Redakteure Texte und Bilder ändern können, kann die Situation komplexer sein.

Dafür habe ich die ersten Tests mit CSS-Filtern durchgeführt, die die Farbe des Textes in Abhängigkeit vom Hintergrund invertieren. Die Idee war gut, aber ich erkannte schnell, dass dieses System nur bei Bildern mit großem Kontrast funktionieren würde: Wenn die Texte auf mittleren Tönen (unabhängig von der Farbe) standen, war das Ergebnis ein Grauton, der die Lesbarkeit des Inhalts völlig verhinderte. Fazit: Auf mittleren Tönen funktionierte schwarzer oder weißer Text besser.

Es war klar, dass ich, wenn ich den Redakteuren des Projekts völlige Freiheit geben wollte, eine bessere Lösung finden musste. Eine Lösung für ein Problem, das ich während meiner gesamten beruflichen Laufbahn erlebt hatte.

Die Innere Stimme ist ein Projekt, dessen Verwaltung mit Fire Monkey entwickelt wurde. Das gab mir zwei große Vorteile: Ich habe völlige Freiheit, neue Funktionen im CMS zu erstellen, und es ist außerdem möglich, die Daten im Front-End leicht zu erfassen. Ab diesem Punkt hatte ich eine Idee: Wenn das Logo und das Menü immer in ihren positiven oder negativen Versionen angezeigt werden sollen, je nachdem, ob sie sich auf einem hellen oder dunklen Hintergrund befinden, warum diesen Parameter nicht automatisieren?

Es werde Licht oder, besser gesagt, definieren wir die Leuchtdichte.

Die Luminanz der Bilder zu berechnen: Das war die Lösung. Bestimmen, ob die Bilder hell oder dunkel sind. Dafür habe ich eine Funktion in PHP entwickelt, die die Luminanz der Bilder berechnet. Jedes Mal, wenn ein Redakteur ein Bild in den Kopfbereich eines Abschnitts oder in ein Banner einfügt, identifiziert das CMS die Luminanz dieses Bildes. Das bedeutet, dass PHP das Bild pixelweise analysiert und ihm einen Wert zwischen 0 und 255 zuweist, wobei 0 ein vollständig schwarzes Bild und 255 ein vollständig weißes Bild wäre. Das CMS fügt diesen Bildern also einen Wert hinzu, der später vom Front-End erfasst wird, sodass wir wissen können, ob das Bild hell oder dunkel ist. So einfach ist das.

Aber warum wird diese Bildanalyse vom Back-End mit PHP und nicht vom Front-End mit JavaScript durchgeführt? Effizienz: PHP führt diese Analyse nur einmal durch und speichert sie auf dem Server, während JavaScript diese Berechnung jedes Mal durchführen würde, wenn eine Seite geladen wird, was einen erheblichen Ressourcenverbrauch verursachen würde.

Der Rest der Aufgabe wird im Front-End mit JavaScript ausgeführt: Jedes Mal, wenn wir scrollen, vergleicht JavaScript, ob sich unter dem Menü ein Kopfbereichsbild oder Banner befindet, und liest einen Parameter, der der Luminanz entspricht. Anhand dieses Wertes bestimmen wir, ob der Text weiß oder schwarz sein wird. Im Fall der Texte in den Kopfbereichen und Bannern wird zur Optimierung der Ressourcen die Textfarbe (weiß oder schwarz) direkt auf dem Server mit PHP definiert.

Es war äußerst befriedigend zu sehen, wie ein wiederkehrendes Problem, das in Projekten mit CMS wie Drupal oder Typo3 so viele Kopfschmerzen verursacht hatte, dank der extremen Flexibilität von Fire Monkey so einfach gelöst werden konnte.

Das Ergebnis könnt ihr auf der Website von Annette Kroll sehen: www.dieinnerestimme.com