Mejorar la visibilidad de un elemento según su entorno

Un problema bastante común cuando trabajamos con elementos, por ejemplo un slider de imágenes, es que todos los controles que se encuentra por encima de las fotografías muchas veces pierden su visibilidad al encontrarse con una imagen con colores similares. Este problema afecta la experiencia del usuario que por momentos pierde completamente de vista los controles de un elemento.

La solución más practica seria cambiar el color de los controles buscando una opción que no se vea afectada por las imágenes que colocamos en el slider. Sin embargo esta opción no es siempre factible, por ejemplo en un sitio que cambie estas imágenes automáticamente.

Para solucionar este problema podemos utilizar jQuery y el plugin para este framework: Background Check.

Background Check es una solución que se acerca mucho a la perfecta, este sencillo plugin examina el color de fondo de nuestro elemento, o mejor dicho el color de lo que se encuentra detrás de él y nos avisa si debemos cambiar el color del elemento para mejorar su visibilidad.

Volviendo al ejemplo del slider esto es lo que ocurre cuando la imagen activa cambia:

cambiar el color de un elemento según su entorno

El potencial de este plugin va mucho más allá de ser útil para un simple slider, por ejemplo podemos utilizarlo en un elemento mucho más importante como una barra de navegación fija en donde el contenido que queda por debajo oculta las opciones.

Inicialización del plugin

// Check all elements with a .target class against all images on a page
BackgroundCheck.init({
  targets: '.target'
});

// Specific images
BackgroundCheck.init({
  targets: '.target',
  images: '.thumbnails'
});

Otro detalle importante es su compatibilidad con los distintos navegadores. Este plugin es compatible al 100% con todos los navegadores modernos, en el caso de Internet Explorer este proyecto se encuentra completamente probado desde la versión 9 hasta la 11. También funciona perfectamente en navegadores móviles, por ejemplo funciona tanto en la versión 6 como 7 de iOS.

Les recomiendo visitar el sitio oficial del proyecto para ver algunas demostraciones en linea. Incluso pueden ver algunas consideraciones a la hora de configurar los parámetros de este plugin para que su integración a su proyecto sea lo más eficiente posible.