Press "Enter" to skip to content

¿Cómo solucionar el error de contraste de color al usar texto sobre una imagen?

Last updated on 13/05/2020

Hace unas semanas nos estuvo contactando Hesmeralda desde Perú porque se encontraba desarrollando una aplicación que permitía a los usuarios realizar un recorrido virtual por el museo arqueológico y antropológico Apurímac . La consulta de Hesmeralda estuvo basada en conocer cómo habíamos solucionado el problema del contraste de colores de texto y la imagen de fondo en el antiguo sitio que teníamos en Abstracta porque se le presentaba la misma situación en la aplicación que estaba desarrollando y no quería que sus usuarios se vieran afectados y que su sitio no fuese accesible.

Hoy también, Agustín un estudiante de la asignatura de Testing de Software de la carrera de Ingeniería de Software en la UCUDAL me realizó la misma pregunta porque había desarrollado un sitio sobre recetas de comidas como proyecto final de una materia y contaba con muchas imágenes y texto sobre las mismas.

A ambos les comenté que hace unos años estuvimos realizando evaluaciones de accesibilidad al antiguo sitio de Abstracta con la aplicación WAVE.

Logo de WAVE

En aquel momento detectamos que teníamos problemas de contraste de colores por la imagen de fondo que estábamos utilizando. Acá te dejemos un resumen de los resultados obtenidos y las acciones que tomamos para hacer nuestro sitio más accesible.

Resultados de la evaluación del antiguio sitio de AbstractaUS

Pero no decidimos atacar ese error cómo mencionamos en el post publicado en el blog de Federico Toledo y decidimos esperar porque se nos venía un rediseño del sitio y ya no tendríamos imágenes de fondo en el nuevo diseño que interfirieran con el contraste del texto. 

No obstante este error lo hemos detectado al realizar pruebas de accesibilidad a otras aplicaciones donde también nos hemos apoyado en la aplicación Colour Contrast Analyzer para realizar estas comprobaciones. La solución que hemos recomendado se basa en intentar oscurecer la imagen de fondo intentando crear una capa traslucida con CSS más bien opaca para que otorgue un efecto de mayor contraste al texto. 

Si estás en el caso de un sitio web o aplicación mobile que estás comenzando a desarrollar y no requiere mucho esfuerzo te recomendamos que puedas valorar siempre la opción de sustituir la imagen de fondo o intentar oscurecerla.

Para finalizar les recomiendo la lectura del post «Ensure High Contrast for Text Over Images» publicado en el sitio de Nielsen Norman Group que aborda sobre el tema para complementar lo antes mencionado.

En ese post Aurora Harley realiza una comparación de lo que debemos hacer y lo que debemos evitar en el desarrollo de sitios web enfocado al contraste entre el texto y las imágenes de fondo.

En este punto la accesibilidad y la usabilidad se dan la mano y se refleja la importancia de contar con un correcto contraste entre los colores de fondo y del primer plano viéndolo desde el lado de accesibilidad logrando que el texto sea legible y entendible. Desde la mirada de usabilidad se intenta mantener un diseño estético y minimalista sin perder de vista la calidad de la aplicación y la experiencia de nuestros usuarios al acceder a nuestras aplicaciones.

Me encantó ver como Hesmeralda estuvo aplicando estos consejos en la aplicación que se encontraba desarrollando y el cambio que logró en la misma fue notable!

Contanos tus experiencias!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close Bitnami banner
Bitnami