A lo largo de varios artículos nos hemos ocupado de diferentes formas de accesibilidad, desde la orientada a personas invidentes, pasando por personas sordas, hasta la lectura simplificada para personas con capacidades cognitivas disminuidas.
En esta ocasión hablaremos del uso de colores en textos en el diseño web, lo cual se puede aplicar también a los cursos e-learning.
Puede que digas “eso qué tiene que ver con la accesibilidad, todas las páginas usan colores”, pero no estamos hablando del uso de colores con fines estéticos o decorativos, sino de un uso con una finalidad específica, garantizar la accesibilidad de personas con problemas visuales. Si quieres averiguar de qué se trata, sigue leyendo.
¿Por qué es importante el usar textos de colores en el diseño de interfaces?
Como dijimos, en artículos anteriores hemos abordado una serie de aplicaciones y recomendaciones para garantizar la accesibilidad a personas invidentes o con capacidad visual disminuida.
Sin embargo, hay casos en los que, sin llegar a necesitar estas aplicaciones o recursos, algunas personas experimentan dificultades para leer los textos como se leen habitualmente, por ejemplo, las personas con visión reducida a menudo tienen una percepción limitada del color, y muchos usuarios mayores no pueden distinguir bien los colores, a lo cual hay que sumar que muchas veces la resolución de la pantalla varía de un dispositivo a otro.
Por otra parte, también están las personas con daltonismo, las cuales según el caso tienen problemas para percibir todos o algunos colores (habitualmente rojo, verde y azul), o bien pueden percibirlos pero los confunden.
Por todo esto es importante asegurar que tanto los textos como los subtítulos en los videos sean legibles para la mayor cantidad de personas posible. Esto se logra por medio de un contraste de color accesible.
¿Qué es el contraste de color accesible?
Los textos y subtítulos con accesibilidad de colores cuentan con un fondo para que sean más fáciles de distinguir y de leer, al contraste entre el fondo y el texto se lo conoce como contraste de color accesible. Sin embargo, no es tan fácil determinar qué colores utilizar, debido a que las personas con daltonismo no perciben ciertos colores, lo que puede volver ilegibles los textos.
El contraste debe ser suficiente para garantizar una buena legibilidad del texto en situaciones desfavorables de mucha luz, pantallas con poco contraste o brillo y personas con problemas de visión. Lo más recomendable es un texto blanco sobre fondo negro o un tono sepia, si bien también pueden usarse otros colores, siempre tratando de que exista un contraste adecuado entre el fondo y el texto. Aquí hay algunos ejemplos:
Como puedes ver, las primeras tres combinaciones son las menos recomendables, ya que tanto por la combinación de colores como por el rango de contraste son las de más difícil lectura, mientras que las últimas dos son más legibles; el rango del número cuatro es el mínimo recomendable, mientras que el número cinco es la combinación ideal por el alto contraste.
Para poder saber si el rango de contraste es el adecuado, existen los criterios de accesibilidad establecidos en las Directrices de Accesibilidad para el Contenido Web (WCAG, por sus siglas en inglés), las cuales establecen los criterios para garantizar la accesibilidad web.
Estos criterios fijan el rango de contraste en tres tres categorías: A (bajo, por debajo de 3.0), AA (medio, con un contraste de al menos 4.5) y AAA (alto, con un contraste de al menos 7.0). Pero además, la accesibilidad no depende solo de su rango de contraste, también se deben tener en cuenta el tamaño y el uso de negritas, como se muestra en esta tabla:
Algunas recomendaciones para reforzar la accesibilidad con colores
Ahora que hemos visto qué es el contraste de color accesible y los criterios que debes tener en cuenta para lograr que sea realmente accesible, pasemos a ver algunas recomendaciones que te permitan reforzar la accesibilidad con colores en tu diseño.
- Incluye el nombre de los colores: incluir los nombres de los colores permite que las personas con daltonismo o problemas de visión puedan reconocerlos fácilmente.
- Evita marcar instrucciones con colores: aunque es una práctica habitual basante arraigada, una persona con problemas de visión puede no ser capaz de reconocer instrucciones o resaltados marcados con colores. Por ejemplo, si se necesita rellenar un espacio obligatorio en un formulario y lo marcamos en rojo, alguien con problemas para percibir este color no será capaz de darse cuenta del problema cuando se le pida que rellene el espacio faltante. Para solucionar esto, es recomendable agregar textos o símbolos que permitan al usuario reconocer las instrucciones o el contenido que se quiera resaltar.
- Permite al usuario cambiar la paleta de colores: una buena opción es habilitar una herramienta para que sea el propio usuario quien ajuste la paleta de colores a un rango que le resulte más cómodo para navegar, de esta manera proporcionarás una experiencia más personalizada.
Existen varias herramientas y aplicaciones que te ayudan a verificar si el contraste aplicado en tu diseño web es el adecuado, pero de ellas hablaremos en el próximo artículo.
Esperamos que esta información sobre la accesibilidad de colores en el diseño de interfaces te haya sido de utilidad. Si quieres recibir más contenido y mantenerte al tanto de las últimas tendencias y novedades sobre nuestros cursos o e-learning, puedes seguirnos en nuestras redes sociales y en nuestro blog, donde podrás encontrar muchos más artículos como este.
