Die Innere Stimme.

En mis 25 años de experiencia en diseño gráfico, siempre he buscado (como todos los diseñadores) una buena solución para integrar un texto sobre una imagen a fin de crear un contraste suficiente para asegurar una buena lectura. Cuando trabajas en diseño editorial, cada caso es independiente y todos los contenidos deben de ser revisados antes de su publicación, pero cuando trabajas en un proyecto digital con contenido dinámico en el que los editores pueden cambiar textos e imágenes, la situación puede ser más compleja.

Para ello hice las primeras pruebas usando filtros de CSS que invirtiesen el color del texto en función del fondo. La idea era buena, pero enseguida comprendí que este sistema solo funcionaría con imágenes con un gran contraste: cuando los textos estaban sobre tonos medios (independientemente del color) el resultado era un tono gris que impedía totalmente la legibilidad del contenido. Conclusión: sobre tonos medios funcionaba mejor el texto en color negro o blanco.

Estaba claro que si quería dar total libertad a los editores del proyecto, tenía que buscar una solución mejor. Una solución a un problema que había experimentado durante toda mi carrera profesional.

Die Innere Stimme es un proyecto cuya administración está desarrollada con Fire Monkey. Eso me daba dos grandes ventajas: tengo total libertad para crear nuevas funcionalidades en el CMS y además es posible recoger los datos fácilmente en el front-end. A partir de ese punto tuve una idea: si el logotipo y el menú se deberán mostrar siempre en sus versiones positiva o negativa dependiendo de si se encuentran sobre un fondo claro o oscuro ¿por que no automatizar este parámetro?

Hágase la luz o, mejor dicho, definamos la luminancia.

Calcular la luminancia de las imágenes: esa fue la solución. Determinar si las imágenes eran claras u oscuras. Para ello desarrollé una función en PHP que calculase la luminancia de las imágenes. Siempre que un editor añade una imagen a la cabecera de una sección o a un banner, el CMS se encarga de identificar la luminancia de dicha imagen. Esto significa que PHP analiza píxel a píxel el archivo de imagen y le da un valor entre 0 y 255, donde 0 sería una imagen totalmente negra y 255 una imagen totalmente blanca. Así pues el CMS añade un valor a estas imágenes que es posteriormente recogido por el front-end, de modo que podemos saber si la imagen en cuestión es clara u oscura. Así de fácil. 
Pero ¿por que este análisis de imágenes es llevado a cabo por el back-end con PHP y no por el front-end con JavaScript? Eficiencia: PHP hace ese análisis una sola vez y queda registrado en el servidor, JavaScript en cambio, haría ese calculo cada vez que se carga una página ocasionando un consumo de recursos considerable.

El resto de la tarea se ejecuta en el front-end con JavaScript: cada vez que hacemos scroll, JavaScript compara si debajo del menú hay una imagen de cabecera o banner y lee en ésta un parámetro correspondiente a su luminancia, en función de este valor determinamos si los textos serán blancos o negros. En el caso de los textos en las cabeceras y los banners, para optimizar recursos, el color del texto (blanco o negro) es definido directamente en el servidor con PHP.

Resultó extremadamente satisfactorio ver como un problema recurrente y que había generado tantos quebraderos de cabeza en proyectos realizados con CMS como Drupal o Typo3, podía resolverse de una manera tan sencilla con Fire Monkey gracias a su extremada flexibilidad.

Podeis ver el resultado en el web de Annette Kroll: www.dieinnerestimme.com