Resolver problemas de contraste de accesibilidad

Los problemas de contraste de accesibilidad son un problema para aquellos lectores que tienen dificultades para leer nuestro contenido web. Para ello se han creado unas reglas que deben cumplir todas las webs para asegurarse de que se cumplan unos mínimos para que cualquier persona no tenga problemas en la lectura de las webs. Veamos cómo resolver los problemas de contraste en los textos de nuestra web.

También te puede interesar:
¿Cómo medir la velocidad de carga de una página web?
Optimiza tu web en WordPress con WP Rocket
¿Qué es Divi? Guía de Divi Theme para WordPress
Mejores plugins diseño web WordPress

Problema de accesibilidad según Google Page Speed

Si pasamos el análisis de Google Page Speed a nuestra web tendremos mucha información relativa a nuestra web. Pero en el caso de accesibilidad, podemos tener problemas de contraste del texto con el fondo. Eso es, bien o porque no hemos seleccionado de forma correcta los colores complementarios de nuestro diseño, o porque esos colores no combinan bien con el fondo blanco. Generando así problemas de contraste de accesibilidad.

El error de Google Page Speed es:

Los colores de fondo y de primer plano no tienen una relación de contraste adecuada.

Veamos qué puntuación tenía en mi blog y cómo lo solventé.

Puntuación baja de contraste

Herramienta para calcular el contraste jugando con los colores

Con esta herramienta de medidor de contraste podemos ver si los colores que usamos tienen un contraste con el fondo correcto que cumpla los niveles de accesibilidad adecuados.

Aquí podemos observar que este tono azul con un fondo blanco, tiene poco contraste, por lo que el resultado nos dice que FALLA los test.

En cambio, si desplazamos la barra hacia la izquierda, podemos observar que este tono azul más oscuro con un fondo blanco, tiene mucho más contraste. Por lo que el resultado nos dice que SUPERA los test.

Según Google Page Speed, debemos tener una relación de al menos 4,5:1 para superar el test, pero todo dependerá del color seleccionado.

¿Cómo solventar el contraste solo en los posts de WordPress?

Para poder hacerlo, he creado este estilo CSS para mi blog que os puede ser de base para vuestros casos.

Con este ejemplo, pongo los enlaces de azul oscuro para superar el contraste, y añado una línea inferior del color naranja que a mi me gusta para no perder mi diseño por completo, y que así destaque el enlace dentro del texto.

/* Color de los enlaces dentro de un articulo */
.entry-content a {
/* color: #ff8100; color naranja */
color: #1A5A8E; /* color azul oscuro */
font-weight: bold; /* negrita */
border-bottom: medium solid #ff8100; /* subrayado naranja */
}

El estilo CSS anterior afectaría a todo el contenido del post. En mi caso, afecta a enlaces que no quiero modificar su estilo. Por ejemplo, no quiero tocar los estilos de los post relacionados que me incluye el plugin Related Posts. Para ello, he añadido una exclusión para que no aplique los estilos a la clase en cuestión de dicho plugin con la cláusula:

:not(.CLASS)

Quedaría de la siguiente forma:

/* Color de los enlaces dentro de un articulo excepto bloque de Related Posts */
.entry-content a:not(.wp_rp_title) {
/* color: #ff8100; color naranja */
color: #1A5A8E; /* color azul oscuro */
font-weight: bold; /* negrita */
border-bottom: medium solid #ff8100; /* subrayado naranja */
}

Una vez aplicado el cambio, vemos que ya superamos los niveles de accesibilidad de contraste con una puntuación de 7.24:

Conclusiones

Estos pequeños detalles a los que no solemos dar importancia, ayudan que tu web puntúe mejor en los buscadores como Google y mejores el posicionamiento web. Espero que te haya sido de utilidad.