4 sencillas maneras de comprobar la accesibilidad en el contraste de los colores de tu web
*You can read this article in English: 4 easy ways to check the accessibility in the contrast of the colors of your website.
Son muchas las empresas a las que no parece importarles el tema de la accesibilidad en sus productos digitales. No hay mas que darse una vuelta por internet para comprobarlo.
Y la causa de ello puede que sea la falsa percepción de que lo accesible no puede ser bello. También hacer un sitio accesible, requiere un mayor esfuerzo y muchas veces oímos de boca del cliente: “Ese no es mi cliente potencial, no me interesa”.
Pero afortunadamente de un tiempo a esta parte parece que las cosas están cambiando. Y tanto los organismos oficiales como las empresas empiezan a darse cuenta de lo importante que es la accesibilidad.
Beneficios de la accesibilidad
En el fondo se trata de empatizar con el usuario, y tener una web no accesible, supone dejar de lado a casi cuatro millones de personas, sólo en España.
Con una web no accesible, el mensaje que está transmitiendo la empresa es: “Tu no me importas”. Y esto va a suponer pagar un precio muy alto para aquellas marcas que luchan por hacerse con un hueco en el mercado.
Por otro lado, Google te tratará con “más cariño” y te posicionará mejor, si tu web es accesible (alts en las imágenes, hipertextos de los enlaces con sentido, contenido optimizado para los screen readers…).
La accesibilidad también ayuda a mejorar la eficiencia y el tiempo de respuesta, reduciendo costes de desarrollo y mantenimiento del sitio. Webs más rápidas y usables.
Y además existe una legislación vigente respecto a la accesibilidad a los sitios web y aplicaciones de dispositivos móviles, que hay que cumplir. Y aunque esta afecta principalmente a la administración, organismos públicos, empresas financiadas por el estado y otras empresas suministradoras de servicios como agua, electricidad, gas, entidades bancarias, aseguradoras, etc, todas las empresas deberían seguirla en la medida de lo posible.
Son muchos los aspectos a tener en cuenta para tener un sitio web accesible. Pero en este artículo nos vamos a centrar sólo en el color. Que ya es bastante.
Es conocido el caso del banco naranja, que tuvo que modificar levemente la tonalidad del color de su marca para cumplir el nivel AA de las WCAG 2.1, que le exigía la legislación española.
Si te interesa saber más sobre cómo afecta la ley de accesibilidad a los sitios webs en España, puedes leer Legislación sobre accesibilidad web en España, Europa y otros países, de una de las personas que más sabe de accesibilidad en España, Olga Carreras.
4 sencillas maneras de comprobar la accesibilidad en el contraste de los colores de tu web
Después de una breve intro, te traigo cuatro sencillas maneras (todas ellas gratuitas), para que puedas comprobar el nivel de accesibilidad del contraste de los colores de tu web.
Una es a través de una herramienta online que puedes usar desde cualquier navegador. Otra se trata de una aplicación muy sencilla e intuitiva, sólo para Mac (High Sierra 10.13, o superior). La tercera es un plugin que puedes instalar en Sketch y Adobe XD. Y la cuarta es una extensión par el navegador Chrome de Google.
1. Contrast ratio
Contrast Ratio es una sencilla herramienta online que te permite comprobar el nivel de accesibilidad que tiene el contraste existente entre dos colores.
La herramienta consta de dos campos en los que debes añadir el código hexadecimal de los colores (o nombre de color css: aqua, lime, red, white…) cuyo contraste quieres medir.
En el círculo central entre los dos campos, te muestra con un índice y un código de color, el nivel de accesibilidad del contraste entre ambos colores:
- Rojo: no accesible.
- Naranja: accesible con salvedades.
- Verde: completamente accesible.
Además, si pasas el cursor sobre el círculo, podrás ver más información sobre el nivel de contraste y tipo de accesibilidad que cumple.
En la misma pantalla también puedes comprobar cómo se visualizan distintos tamaños, estilos y fuentes de texto con la combinación de colores elegida.
Si los colores elegidos presentan un ratio de contraste muy bajo, prueba a modificarlos pulsando las flechas del teclado, hacia arriba o hacia abajo, con el cursor de selección dentro del campo de uno de los colores. Si además lo haces con la tecla mayúscula seleccionada, el incremento del número hexadecimal será de diez en diez.
2. Contraste
Contraste es una aplicación, muy sencilla de usar, que te permite comprobar el nivel de contraste y su accesibilidad entre dos colores seleccionados.
Funciona sobre cualquier elemento que aparezca en la pantalla de tu ordenador (macOS High Sierra 10.13, o superior). Por lo que igual funciona dentro del navegador que dentro de cualquier otra aplicación.
Su uso es tan sencillo como abrir la aplicación y pulsar sobre el cuentagotas de su “mini” ventana de interfaz, seleccionar un color que desees medir, y luego repite lo mismo para seleccionar el otro color. Enseguida aparecerá la información sobre el contraste.
La aplicación te permite abrir varias ventanas para comprobar diferentes contrastes.
Si pulsas en el icono de ajustes, puedes ajustar el color sobre una rueda cromática. Pulsa sobre un color en la “mini ventana” de la app y se copiará automáticamente en el portapapeles, para que puedas pegarlo en la aplicación en la que estés trabajando.
3. Stark
Stark es un plugin gratuito que puedes instalar en Sketch y Adobe Xd, y que te permite comprobar el contraste de color que existe entre dos capas y el nivel de accesibilidad.
Tan sólo tienes que abrir el plugin, pulsar en la pestaña Contrast y seleccionar dentro del documento las dos capas cuyo contraste quieres comprobar.
Pero además, Stark te permite simular distintos tipos de deficiencias visuales, para poder ajustar tus diseños y que estos sean lo más accesible posibles para el mayor número de personas.
Lo bueno de este plugin es que puedes comprobar el nivel de accesibilidad mientras diseñas, sin tener que salir de la propia aplicación.
Aquí puedes ver unas muestras de cómo funciona la simulación de defectos visuales de Strak, para una misma imagen:
4. Funkify
Funkify es una extensión para el navegador Chrome, que simula cómo se visualiza una página web seleccionada, a través de los ojos de una persona con algún tipo de discapacidad (no sólo visual). Desde dislexia, visión borrosa o ceguera parcial, hasta discapacidad cognitiva o manos temblorosas.
La extensión tiene una interfaz muy agradable y humana, en la que se han creado unos personajes para cada tipo de discapacidad. Y así podamos empatizar mejor con los problemas de estos usuarios.
Funkify está creada por desarrolladores y diseñadores con este tipo de discapacidades, en colaboración con varias organizaciones que luchan a favor de la accesibilidad.
El ejemplo de abajo muestra cómo ven la web de El Confidencial, las personas con un tipo de deficiencia en la visión del color, que altera los rojos y verdes. Esta deficiencia afecta a un 1% de los hombres y al 0,33% de las mujeres. Un porcentaje de usuarios como para tenerlo en cuenta, ¿no crees?
Conclusión
Bueno, como has visto, comprobar la accesibilidad del contraste de los colores de tu web o app, es una tarea bastante sencilla que apenas lleva un par de minutos. Y aunque parezca mentira, no todos los diseñadores de interfaces la llevan a cabo.
Implementa esta tarea dentro de tu proceso de trabajo y muchos usuarios te lo agradecerán, y por supuesto, la calidad de tus proyectos tendrán un importante plus añadido, serán más accesibles.
