Cómo mejorar el contraste de los elementos de una web

Otro breve post antes de acabar el año que os describe como analizar y mejorar el contraste de los elementos de una página web.

Cómo mejorar el contraste de tus textos con Google Chrome

Para ello utilizamos las herramientas de desarrollo de Google Chrome, seleccionamos el elemento que queremos analizar y hacemos click sobre el color del mismo:

Se nos abrirá una venta como la siguiente:

Cómo mejorar el contraste de tus textos con Google Chrome

Donde podemos ver que el «CONTRAST RATIO» es de 1,27 y tiene al lado una señal roja. La idea es convertirla en un check (al menos) o un doble check (mejor) verde:

Cómo mejorar el contraste de tus textos con Google Chrome

Y doble check:

Cómo mejorar el contraste de tus textos con Google Chrome

Y esto es la forma más rápida comprobar el contraste de elementos de una web y buscar una solución.

 

Una vez tengamos los mejores colores que estén en consonancia con la gama cromática de la web y den el mejor contraste, ya podemos modificar los estilos de la web para adaptarlos a ese color.

P.D. Esto lo descubrí por el siguiente Tweet de Miguel Ángel Durán (que además tiene una animación que os enseña los pasos):

Usar las @ChromeDevTools para comprobar el Contrast Ratio de los elementos de tu web está tirado. En el siguiente vídeo he detectado un título que es bastante mejorable ? en mi blog y en tiempo real he usando un color más conveniente. ¡Busca el doble check!

Deja una respuesta

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

Los comentarios de esta página se procesan por un sistema automático de moderación por lo cual no siempre se publican de forma instantánea. Por favor respeta a los demás y ciñete al tema del post. Nos reservamos el derecho de eliminar cualquier comentario o enlace que nos parezca inadecuado o tenga una expresión de grosería, insulto, odio, hostilidad o negatividad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.