Press "Enter" to skip to content

Pruebas de accesibilidad con Contrast Finder

En esta ocasión compartimos un post elaborado por Nicolas Reina (Quality Engineer en Abstracta) donde nos explica el uso de la herramienta Contrast Finder para la evaluación automática del contraste de colores.

Muchísimas gracias Nico por animarte a colaborar con la comunidad #uxanda11ytesting!

Todos los usuarios pueden tener distintos puntos de vista acerca de una aplicación determinada; sin embargo el mismo viene dado del parecer que se tenga frente al aplicativo y no por una limitación que no puedan manejar; es decir, limitaciones motrices, visuales, cognitivas o auditivas. A medida que la tecnología avanza, con ella también lo hacen los requerimientos para ser cada día más inclusivos en los sistemas que desarrollemos. 

Para ello, inevitablemente necesitamos de herramientas que, como tales, nos faciliten cierto trabajo de cara a esta inclusión. Un ejemplo claro de ello es Contrast Finder, una aplicación sencilla, amigable y por sobre todo muy útil a la hora de utilizar el contraste de colores correcto.

Primero que nada, ¿por qué necesitamos el contraste correcto?

Todos alguna vez tuvimos el problema de no identificar correctamente una palabra o una imagen en un flyer, un elemento de una página web o sencillamente en los dispositivos que usamos a diario. Ante ello de seguro habrás fijado aún más la vista o tuviste que encontrar el medio correcto para visualizar lo que querías de mejor manera. 

Lo mismo sucede con el contraste a nivel de accesibilidad; las aplicaciones en general buscan ser estéticamente atractivas pagando el precio de ser poco accesibles en cuanto al contraste se refiere.

Según la WCAG (Web Content Accessibility Guidelines) en sus criterios de éxito 1.4.3 los textos deben poseer un ratio de contraste mínimo de 4.5 para textos normales y de 3.0 para aquellos textos considerados grandes. Para el nivel de accesibilidad AAA debemos tener en cuenta un ratio de 7.0.

No es el propósito de este post ahondar demasiado en la WCAG, sin embargo te recomiendo seguir otros artículos como este, que están relacionados a las pruebas de accesibilidad basadas en dichas guías para hacer nuestra aplicación accesible a todos aquellos usuarios en situación de discapacidad.

¿Qué es Contrast Finder?

Tal como lo mencionamos, los niveles de contraste son sumamente importantes para que el contenido de nuestra aplicación sea comprensible para aquellos usuarios con baja o nula visión. Entonces, nos podemos hacer la pregunta ¿qué cosas encontramos en una aplicación y que deben poseer suficiente contraste? Sencillo, textos y elementos gráficos pertenecientes a la UI.

En este sentido, Contrast Finder hace hincapié en lo que respecta a textos, y de seguro pensarán “¿no existe una herramienta que controle también el contraste para elementos gráficos? y la respuesta es sí; sin embargo la herramienta que veremos a continuación posee un gran plus, su recomendador de colores.

Esta herramienta se basa simplemente en un formulario donde vemos 5 campos obligatorios a completar para encontrar el contraste óptimo entre los colores que hemos seleccionado. Esto hace que la herramienta sea más intuitiva ya que no cuenta con un mayor nivel de complejidad. 

¡Démosle un vistazo a su página principal!

Como todo control de contraste deberemos tener en cuenta dos cosas fundamentales que acabamos de mencionar, por un lado el texto que deseemos controlar y por otro, el fondo con el que quisiéramos compararlo.

Podemos ver en esta captura que el campo “Color del texto” es solicitado a través del formato RGB, es decir la mezcla de rojo, verde y azul que está presente en un color determinado como lo puede ser el ejemplo allí mostrado ( rgb(70,136,71) ); sin embargo no es el único formato por el cual se recibe el código de color. Podemos también ingresar un código hexadecimal que describa el color que queramos contrastar tal como figura en el campo “Color de fondo” (#DFFOD8).

Asimismo podemos ingresar los colores que tenemos en cuenta para la prueba a través de una palabra clave de color CSS como lo pueden ser white, green, blue, etc. Al costado de cada uno de estos campos podemos apreciar que la herramienta previsualiza el color recibido por cualquiera de estos 3 códigos para que corroboremos si es el que pensamos efectivamente; y en caso de que no, poder cambiarlo a través de la elección personalizada como mostramos a continuación:

Aquí podemos encontrar el panel de selección personalizada presente en cada uno de los campos “Color del texto” y “Color del fondo”. A través de la movilización del puntero le podremos indicar a la herramienta qué color queremos tomar manejando diferentes valores.

Prosiguiendo con los demás campos que encontramos en la página principal, vemos que se pueden visualizar tres más llamados “Ratio mínimo”, “Color a editar” y “Dame”. Veamos el significado de cada uno y qué valor debemos colocar en ellos.

El campo Ratio en realidad es una lista desplegable en la cual encontramos 3 valores posibles, 3, 4.5 y 7; los mismos coinciden con los ratios de contraste que se espera tengan mínimamente los textos de nuestra aplicación y que vimos al principio.

Para escoger un valor acertado dentro de esta lista desplegable tenemos que tomar en cuenta 3 variables que son tamaño del texto, si el texto se encuentra en negrita (bold) y además el nivel de accesibilidad para el que deseamos aplicar (AA o AAA). 

Si deseamos aplicar al nivel de accesibilidad AA, se debe considerar el tamaño del texto y si se encuentra resaltado en negrita, para esto debemos considerar 4 posibles combinaciones que se nos pueden presentar:

  • Texto sin negrita  tamaño de texto < 24px: ratio = 4.5
  • Texto sin negrita + tamaño de texto > 24px: ratio = 3
  • Texto con negrita + tamaño de texto < 19px: ratio = 4.5
  • Texto con negrita + tamaño de texto > 19px: ratio = 3

Por otro lado, si aplicamos al nivel AAA, las reglas permanecen casi iguales, solo que tendremos que sustituir 4.5 por 7.0, y 3.0 pasará a ser 4.5.

El campo “Color a editar” es sencillamente el color que pretendemos modificar hasta encontrar un ratio de contraste aceptable para el nivel de accesibilidad que deseemos obtener.

Por último, pero no menos válido encontramos la lista desplegable llamada “Dame”, la misma hace mención a las opciones que Contrast Finder nos sugiere en base a nuestra necesidad de contraste. Las opciones que podemos seleccionar son “Colores válidos y muy cercanos al color inicial” (lo más parecido al color inicial ingresado al principio) y “Un rango de colores válidos” (no necesariamente parecido al ingresado).

Finalmente deberemos hacer click en el botón “Encuentra colores válidos” para disfrutar de la gama de opciones que nos puede ofrecer la herramienta.

Para terminar veamos un ejemplo conocido

Imaginemos que nos ha contratado Google para realizar una prueba de contraste en su reconocido buscador. La empresa nos indica que debemos aplicar al nivel de conformidad AA y nos solicita recomendaciones al respecto para aplicar a un nivel AAA en las opciones de dicho sitio.

Inmediatamente realizamos una prueba sobre el famoso botón “Me siento con suerte” y mirando el código fuente vemos la siguiente combinación de colores entre texto y fondo:

  • Texto: #5F6368
  • Fondo: #F2F2F2

Esto nos muestra un ratio de contraste de 5.4, correcto para el nivel AA, no así para el AAA al que deseamos llegar, por lo tanto procedemos a utilizar Contrast Finder y así notificarle al cliente de las posibles opciones que encontramos como solución. Se nos indica como último punto que la identidad visual debe mantenerse lo más parecida a la que se encuentra en producción actualmente.

Nuestro formulario de ingreso quedará de la siguiente manera:

Al hacer click sobre “Encuentra colores válidos” se desplegará un listado de recomendaciones como el siguiente:

En el listado se nos muestra de forma clara y concisa las recomendaciones del color sugerido identificadas por el formato RGB, HSL o hexadecimal. De igual manera la herramienta nos brinda la previsualización de la recomendación generada indicando el rango al cual se ha llegado y la diferencia respecto al color inicial. En la captura el primer contraste recomendado es de 7.00014 teniendo una diferencia de 41.25 sobre el contraste inicial.

Conclusiones

Particularmente el contraste es uno de los problemas con mayor amplitud de soluciones, aunque muchas veces entra en conflicto con lo referido a estética. Sin embargo, debemos saber que se pueden crear aplicaciones muy lindas e igualmente accesibles; herramientas como Contrast Finder hacen que la brecha entre una solución propuesta y la correcta se acorte generando así un producto con gran valor agregado.

Para finalizar te invito a que le eches un vistazo, realices pruebas en los sitios más diversos que se te puedan ocurrir y compruebes por ti mismo lo mostrado en este post. 

Link aplicación: https://app.contrast-finder.org/ 

Deja una respuesta

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

Close Bitnami banner
Bitnami