Cómo Utilizar Contrast Checker para Validar la accesibilidad en las combinaciones de colores

Una de las barreras de accesibilidad más habituales en contenidos de la Web es el bajo contraste de color entre el texto y el fondo.
Para solucionar estas barreras de accesibilidad existen herramientas como el Contrast Checker de WebAIM que permite comprobar si las combinaciones de colores cumplen con los estándares de accesibilidad establecidos por las Web Content Accessibility Guidelines (WCAG).

¿Qué es Contrast checker?

Contrast Checker es una herramienta en línea gratuita proporcionada por WebAIM (Web Accessibility in Mind) que permite verificar si una combinación de colores cumple con los niveles de contraste requeridos por las WCAG buscando que los textos sean legibles para personas con baja visión y daltonismo.

Este verificador evalúa la diferencia entre el color de primer plano (texto) y el color de fondo para determinar si cumple con los niveles de conformidad de AA y AAA definidos en las WCAG.

¿Cómo se utiliza Contrast checker?

La herramienta muestra un formulario con dos campos principales que representan el color del texto y el color de fondo. Estos colores son identificados como Foreground Color para el color en primer plano y background color para el color de fondo.

Se puede introducir el código hexadecimal de un color o utilizar la herramienta de selector de color para buscar el color en la paleta de colores del sistema.

Una vez ingresados los colores, la herramienta calculará automáticamente el ratio de contraste y mostrará los resultados en diferentes categorías.

  • Small Text (Texto pequeño): indica si la combinación de colores pasa los estándares para texto de tamaño normal.
  • Large Text (Texto grande): evalúa si la combinación cumple para textos de al menos 18px en regular o 14px en negrita.
  • Graphics and UI Components: verifica si los colores cumplen para elementos como botones o iconos.

El ratio de contraste se expresa como un número (ejemplo: 4.5:1). Para que la combinación de colores sea accesible, debe cumplir al menos con estos valores:

  • AA (Mínimo) ≥ 4.5:1 ≥ 3:1
  • AAA (Óptimo) ≥ 7:1 ≥ 4.5:1

Si la combinación de colores no pasa la prueba, se mostrará en rojo junto con un mensaje indicando que el contraste es insuficiente.

Detección de barreras de accesibilidad con TAW

El Test de Accesibilidad Web (TAW) es una herramienta en línea que ayuda a evaluar la accesibilidad de sitios web según las directrices del estándar WCAG (Web Content Accessibility Guidelines). Diseñada para identificar problemas de accesibilidad, TAW es especialmente útil para desarrolladores, diseñadores y responsables de contenido que desean crear experiencias inclusivas para todos los usuarios, incluidas personas con discapacidad.

Al igual que Wave, TAW es una herramienta de validación automática de barreras de accesibilidad web.

Esta herramienta evalúa criterios como:
• Texto alternativo en imágenes.
• Contraste de colores.
• Navegación mediante teclado.
• Uso correcto de etiquetas HTML y roles ARIA.

¿Cómo utilizar TAW?

Para utilizar TAW debemos visitar su sitio web oficial. Allí encontraremos un formulario en el que introducir la URL de la página que queremos revisar. Además, dentro de las opciones podremos elegir entre nivel A, nivel AA y nivel AAA. Tras introducir la dirección de la página que queremos evaluar debemos pulsar el botón analizar.

Tras unos segundos se nos cargará la página de resultados.

A diferencia de Wave y otras herramientas automáticas TAW no dispone de widget para revisar páginas en local. Además TAW utiliza WCAG 2.1 frente a otras herramientas que poco a poco van incorporando WCAG 2.2.

Comparando herramientas

Si realizamos una evaluación con TAW y Wave podremos comprobar que los informes de resultados son parecidos pero no exactamente iguales. Esto se debe a que los algoritmos de detección de barreras utilizados por TAW y Wave no son iguales aunque utilicen los criterios e interpretaciones definidos en WCAG.

TAW proporciona la información en español y portugués por lo que se hace más sencillo de consultar para personas que desarrollen o diseñen en estas lenguas.

Lo ideal es poder utilizar estas dos herramientas para procurar que todas las barreras posibles sean solucionadas. Siempre recordando que las herramientas automáticas de validación de barreras de accesibilidad no son 100% efectivas ni fiables.

Detección de barreras de accesibilidad con Wave

WAVE (Web Accessibility Evaluation Tool) es una herramienta en línea gratuita desarrollada por WebAIM (Web Accessibility In Mind). Su propósito es ayudar a identificar errores y áreas de mejora en sitios web para garantizar el cumplimiento de las directrices de accesibilidad, como las WCAG (Web Content Accessibility Guidelines). WAVE no solo resalta los problemas, sino que también proporciona sugerencias para corregirlos.

El acceso a WAVE es sencillo: basta con visitar la página de Wave, ingresar la URL del sitio web a evaluar, y recibir un análisis detallado sobre elementos clave de accesibilidad.

También podemos instalar el Widget de Wave para Chrome o Firefox. Esto nos permitirá evaluar contenido en local por lo que resulta indispensable para desarrolladores que están trabajando en contenidos aún no publicados.

Wave es una herramienta ideal para conocer el estado de accesibilidad de una página web y aunque la información que nos ofrece es muy valiosa no hay que olvidar los límites y realidades de las herramientas automáticas.

Detección y validación de barreras de accesibilidad con herramientas automáticas

La accesibilidad web es fundamental para garantizar que todas las personas, independientemente de sus habilidades o discapacidades, puedan acceder y utilizar los contenidos en línea.
Para los desarrolladores y diseñadores las herramientas automáticas de validación de la accesibilidad ofrecen una manera eficiente de identificar problemas de accesibilidad en sus sitios web. Sin embargo, este tipo de herramientas automáticas poseen ventajas y limitaciones que deben ser conocidas por estos diseñadores y desarrolladores.

Algunas cuestiones, como el significado contextual del contenido, la calidad de los textos alternativos o la utilidad de la navegación, requieren juicio humano. Esto implica que algunos criterios de éxito de WCAG deben ser validados por una persona ya que hoy por hoy las herramientas automáticas carecen del conocimiento y la identificación del contexto de un contenido para poder identificar si existe una barrera de accesibilidad o no. Por ejemplo, una herramienta automática puede dar por válida la siguiente descripción para una imagen que se utiliza como botón cancelar: ‘iconCancel12.jpg’, o indicar que hay problemas por usar ARIA aunque se esté utilizando de forma apropiada.

Estas herramientas tampoco pueden apreciar posibles problemas de usabilidad o inconsistencias entre los mecanismos de navegación de varias páginas.

Unido a todo esto se ha de indicar que muchas de las herramientas automáticas de validación de barreras de accesibilidad no detectan los cambios dinámicos realizados mediante Javascript en los contenidos por lo que en muchos casos de webApps desarrolladas con ReactJS o Angular pueden incorporar multitud de barreras de accesibilidad indetectables para este tipo de herramientas.

Los resultados de las evaluaciones realizadas por estas herramientas necesitan ser interpretados y aplicados por personas con conocimientos básicos en accesibilidad y desarrollo web. Sin este conocimiento, las correcciones pueden no ser efectivas o incluso empeorar la accesibilidad. Con esto se indica que es falsa la afirmación de que gracias a estas herramientas el desarrollador no requiere ningún conocimiento de accesibilidad web.

A pesar de todo esto las herramientas automáticas de validación de la accesibilidad son necesarias para ayudar a la detección temprana de muchas barreras de accesibilidad y deberían ser de uso obligatorio para los desarrolladores y diseñadores de contenido.

Los Beneficios y Desafíos de la Accesibilidad en Herramientas Low-Code y No-Code para la Creación de Software

En los últimos años, el auge de las herramientas low-code y no-code ha revolucionado la manera de desarrollar software. Estas plataformas han permitido el acceso al desarrollo de software, permitiendo que personas sin conocimientos avanzados de programación puedan crear sus propias aplicaciones, automatizaciones y sitios web. Sin embargo, para personas con discapacidad, estas herramientas presentan barreras significativas de accesibilidad.

¿Qué son las Herramientas Low-Code y No-Code?

Las herramientas low-code y no-code son paquetes de aplicaciones que permiten crear aplicaciones mediante interfaces gráficas y flujos visuales, reduciendo o eliminando la necesidad de escribir código manualmente. Estas plataformas están diseñadas para ser intuitivas, ofreciendo funciones como arrastrar y soltar (drag-and-drop), plantillas preconstruidas y bloques modulares para construir aplicaciones rápidamente.
Herramientas de lowCode como OutSystems, o Mendix presentan interfaces visualmente sencillas pero que contienen multitud de barreras de accesibilidad que impiden que un producto de apoyo como un lector de pantallas pueda transmitir la información a la persona ciega o interactuar con los elementos de la herramienta para colocar los componentes que darán forma al nuevo software.
Pero, además, herramientas noCode como Webflow o Bubble, enfocadas en la creación de aplicaciones y sitios web, además de resultar inaccesibles para personas que utilicen productos de apoyo, crean contenidos web que presentan barreras de accesibilidad perpetuando así el problema de una Web no accesible.

Beneficios de las Herramientas Low-Code y No-Code

Uno de los mayores beneficios es la posibilidad de que personas sin experiencia técnica puedan materializar sus ideas tecnológicas. Ya no es necesario depender exclusivamente de desarrolladores o equipos técnicos para crear prototipos o soluciones funcionales.
Además, la velocidad con la que se puede pasar de la idea a un producto mínimo viable (MVP) es uno de los mayores atractivos de estas plataformas. Las empresas pueden lanzar productos en menos tiempo, respondiendo más rápido a las necesidades del mercado.

Un gran poder conlleva una gran responsabilidad

La posibilidad de crear rápidamente y sin demasiados conocimientos nuevas experiencias y contenidos digitales es algo muy atractivo para muchas personas que bien no pueden o no quieren invertir mucho tiempo y esfuerzo en aprender aspectos del desarrollo de software. El problema es que este tipo de herramientas no permiten modificar la forma en que se generan esos contenidos y experiencias y en muchos casos lo hacen incluyendo barreras de accesibilidad. No está claro quién es la persona responsable de solucionar este problema: la persona que utiliza la herramienta pero no puede o no quiere aprender a desarrollar software o la empresa que ha creado la herramienta pero que no quiere complicar la experiencia de creación incluyendo aspectos de accesibilidad para así resultar una herramienta más atractiva a personas que no se quieren complicar con aspectos técnicos del desarrollo de software.

Iniciativas para Mejorar la Accesibilidad

Afortunadamente, algunas plataformas están comenzando a abordar estos desafíos. Por ejemplo, Webflow ha incorporado herramientas que permiten a los diseñadores agregar etiquetas y descripciones accesibles a los elementos. Bubble ofrece cierta flexibilidad para personalizar cómo se presentan los componentes en una aplicación para que sean más accesibles. Sin embargo, aún queda un largo camino por recorrer para garantizar que estas herramientas sean completamente inclusivas para todos los usuarios en esos contenidos web generados sin ninguna línea de código por parte de la persona que los crea.
Además, estas soluciones y parches siempre están enfocadas en el software generado y no en el uso de la propia herramienta por lo que los creadores de estas herramientas sólo piensan en personas con discapacidad como posibles clientes y no como posibles trabajadores o creadores.
Los hechos mencionados en el artículo publicado en el 2010 con el título La accesibilidad en crisis para los desarrolladores ciegos parece que siguen presentes en la sociedad actual.

¿Cómo incluir una firma en un documento PDF utilizando Inteligencia artificial?

La Inteligencia artificial poco a poco se está moldeando en nuevas herramientas de ayuda a personas con necesidades especiales. Una de estas necesidades es la de incluir una imagen con la firma de una persona en un lugar concreto de un documento PDF. Esta operación que puede resultar muy sencilla para la mayoría de personas es algo muy complicado para personas con discapacidad visual o con discapacidad motriz.

Las herramientas de Inteligencia artificial generativas como ChatGPT o Gemini pueden ayudarnos a realizar estas operaciones.

Un posible ejemplo

Imaginemos que tenemos un documento prueba.pdf con el siguiente texto:

Documento de prueba
Esto es un documento de prueba para probar la función de introducir una firma utilizando AI.

Para ello creamos este documento en formato PDF.

Además del texto básico debemos incluir alguna estructura de información que permita identificar dónde incluir la firma.

Por ejemplo, dejando un hueco suficiente.

Firmado:

 

 

 

 

En España el 1 de agosto de 2024

 

 

 

 

Además tenemos un fichero firma.jpg que contiene un dibujo de nuestra firma. Es importante que nuestra firma esté escrita en color negro y el fondo en color blanco.

Utilizando el siguiente prompt en ChatGPT o Gemini podemos conseguir firmar nuestro documento PDF:

En el documento prueba.pdf pega la imagen del fichero firma.jpg

La imagen debe colocarse entre las líneas con el texto «Firmado:» y «En España el 1 de agosto de 2024»
Modifica el tamaño de la imagen pegada para que encaje bien entre las dos líneas de texto. La imagen no debe ocultar las líneas con los textos «Firmado:» y «En España el 1 de agosto de 2024». Para ello reduce la altura de la imagen si es necesario y la imagen debe colocarse entre las dos líneas de texto indicadas

Cuidado con la precisión

Hay que recordar que estas herramientas generativas no son fiables al cien por ciento por lo que es recomendable revisar que el documento pdf no haya sido modificado en su texto y que la firma se haya incluido bien.

Además, hay que señalar que actualmente la mayoría de sistemas que convierten el lenguaje escrito en algo comprensible para los motores de Inteligencia artificial comprenden mejor el idioma inglés por lo que es recomendable que los prompts se escriban en inglés para facilitar la comprensión al motor de inteligencia y evitar ambigüedades.

Nuevas posibilidades para la accesibilidad 

El uso de herramientas de Inteligencia artificial está abriendo nuevos caminos para la accesibilidad para ayudar a personas con necesidades especiales a superar de forma autónoma barreras sociales y técnicas que persisten hoy en día. La Inteligencia artificial es una herramienta más y como tal debemos aprender a utilizarla para hacer un mundo más accesible.