Colores y Navegadores

Colores y Navegadores


¿Estás seguro de que el color que ves es el que querías?

Hoy me ha llamado la atención algo que ha ocurrido cuando he ido a tomar una muestra de color de un elemento de una página web.

La idea principal era realizar el contraste de color entre fondo y texto de cara a facilitarle la vida a aquellas personas que puedan aterrizar en la web y tengan alguna variante de las que se consideran en accesibilidad.

Para ello utilizo la herramienta Colour Contrast Analyzer:

«The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.»

Enlace a la herramienta: https://github.com/ThePacielloGroup/CCAe

La web del ejemplo es Dento Salud Las Rozas, una clínica dental en la que trabaja el marido de una amiga de la infancia.https://www.linkedin.com/embeds/publishingEmbed.html?articleId=7356870861204608925

Los colores… Y los navegadores.

Hace poco, leí que de cara a mostrar los colores, Firefox era el más fiable. Hoy lo he podido corroborar.

Elemento de una web y vista de desarrollo resaltando el color de fondo aplicado en el CSS

He resaltado el color aplicado en el CSS al fondo del bloque.

El código hexadecimal del color utilizado como fondo es: #42a8d9

Así se ve en Internet Explorer (lo mismo ocurre en Chrome)

Elemento de una página web tal como se ve en Internet Explorer (lo mismo ocurre con Chrome)

Así se ve en Firefox

El mismo elemento de la página web tal como se ve en Firefox

Poniendo una al lado de la otra, se aprecia la diferencia a la hora de mostrar el color de fondo #42a8d9 (IE a la izquierda)

2 ventanas de diferentes navegadores mostrando lo mismo. A la izquierda IExplorer y a la derecha Firefox

Lo curioso aparece a la hora de tomar las muestras de color.

Utilizando la herramienta antes mencionada, me dispongo a tomar muestras de color de ambas ventanas.

Resultado de la muestra de color de IE (lo mismo en Chrome):

Resultado de la muestra de color de IE (lo mismo en Chrome), valor: #72a3d7

Resultado de la muestra de color de Firefox

Resultado de la muestra de color de Firefox, valor : #42a8d9

Independientemente del color que nuestro perfil de colores pueda mostrarnos en pantalla, vemos que el resultado de la muestra no es igual dependiendo del navegador.

Y lo más importante: La muestra obtenida de la ventana de Firefox se corresponde con el color definido en el CSS: #42a8d9

Se me está pasando por la cabeza diferentes aplicaciones como guías de estilo corporativas…

Tal vez haya que asignar diferentes colores a los elementos dependiendo del navegador del cliente. ¿No?

También publicado en Linkedin


subir