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.

Los Cuatro Principios de WCAG

La accesibilidad web es un componente fundamental del desarrollo de software inclusivo. Para garantizar que todas las personas, incluidas las personas con discapacidad, puedan acceder y usar los sitios web de manera efectiva, se han desarrollado estándares como las Pautas de Accesibilidad para el Contenido Web (WCAG, por sus siglas en inglés).

Estas pautas están organizadas en torno a cuatro principios fundamentales: Perceptible, Operable, Comprensible y Robusto.

Perceptible: Hacer el contenido visible y comprensible para todos

El principio de perceptibilidad establece que la información y los componentes de la interfaz de usuario deben ser presentados de manera que todos los usuarios puedan percibirlos, independientemente de sus capacidades sensoriales.

Muchas personas con discapacidad dependen de tecnologías de asistencia, como lectores de pantalla, para acceder a la web. Sin alternativas textuales o contenido adaptable, podrían perder información crítica.

¿Qué implica este principio?

El contenido visual debe ser accesible para personas con discapacidad visual parcial o total.
El contenido auditivo debe ser accesible para personas con discapacidad auditiva.
La información no debe depender exclusivamente de un solo sentido (por ejemplo, solo de la vista o del oído).

Pautas clave para este principio

Las WCAG establecen varias pautas para cumplir este principio:

Alternativas textuales: Todo contenido no textual, como imágenes, botones y gráficos, debe tener descripciones en texto que transmitan la misma información o funcionalidad.
Contenido adaptable: La presentación del contenido no debe depender exclusivamente de un diseño fijo y debe poder adaptarse a diferentes configuraciones.
Distinguibilidad: Los usuarios deben poder ver y oír el contenido claramente, evitando combinaciones de colores con un bajo nivel de contraste y asegurando que el texto sea legible.

Operable: Garantizar que los usuarios puedan interactuar con la interfaz

El principio de operabilidad se centra en que los usuarios puedan navegar, interactuar y utilizar todas las funciones de un sitio web sin barreras.

Las personas con discapacidad motora pueden ser incapaces de usar un ratón, por lo que necesitan opciones alternativas de navegación. Además, un diseño operable mejora la experiencia para todas las personas, incluyendo aquellas con limitaciones temporales o dispositivos distintos (como móviles o tabletas).

¿Qué implica este principio?

Los usuarios deben poder navegar por el contenido mediante distintos métodos de entrada (teclado, voz, dispositivos de asistencia, etc.).
La interfaz debe evitar elementos que provoquen convulsiones o reacciones adversas.
Se debe proporcionar suficiente tiempo para completar tareas sin restricciones de tiempo o de capacidades físicas o sensoriales.

Pautas clave para este principio

Las WCAG incluyen las siguientes pautas:

Accesible desde el teclado: Todos los elementos interactivos deben ser operables sin necesidad de un ratón.
Tiempo suficiente: Se debe permitir a los usuarios extender o eliminar los límites de tiempo para completar tareas.
Evitar contenido que cause convulsiones: No debe haber destellos ni parpadeos excesivos.
Navegabilidad mejorada: Se deben proporcionar mecanismos de navegación clara y estructura lógica en la página.

Comprensible: Asegurar que el contenido sea claro y predecible

El principio de comprensibilidad establece que la información y el manejo de la interfaz deben ser fáciles de entender para todos los usuarios.

Las personas con discapacidad cognitiva o dificultades de aprendizaje pueden tener problemas para comprender textos complejos o instrucciones ambiguas. Además, una interfaz clara y predecible beneficia a todas las personas, reduciendo la fricción en la experiencia de navegación.

¿Qué implica este principio?

El lenguaje debe ser claro y conciso.
La navegación y el diseño de la interfaz deben seguir patrones predecibles.
Se deben proporcionar ayudas cuando sea necesario (como sugerencias en formularios).

Pautas clave para este principio

Las WCAG proponen:

Lenguaje legible y comprensible: Se recomienda usar un lenguaje claro, evitar jerga técnica y proporcionar definiciones cuando sea necesario.
Previsibilidad: Los elementos interactivos deben comportarse de manera consistente en todas las páginas.
Asistencia para la entrada de datos: Se deben incluir etiquetas claras, instrucciones y mensajes de error comprensibles.

Robusto: Asegurar la compatibilidad con diferentes tecnologías y futuros desarrollos

El principio de robustez se refiere a la necesidad de que el contenido web sea compatible con una amplia variedad de tecnologías actuales y futuras.

Las herramientas de asistencia dependen de estándares bien definidos para acceder al contenido web. Si un sitio web usa código incorrecto o elementos no estándar, puede volverse inaccesible para algunas personas que utilicen estas herramientas de asistencia. Además, la robustez permite que el contenido siga siendo accesible a medida que las tecnologías evolucionan.

¿Qué implica este principio?

El contenido debe poder interpretarse correctamente en distintos navegadores, dispositivos y tecnologías de asistencia.
El código debe seguir estándares accesibles y ser semánticamente correcto.

Pautas clave para este principio

Las WCAG incluyen:

Compatibilidad con tecnologías de asistencia: Se deben utilizar estándares accesibles y etiquetas semánticas adecuadas (como el uso correcto de HTML y ARIA).
Uso correcto del marcado: El código debe estar bien estructurado para evitar errores de interpretación.

Jornada de Derechos Digitales de las Personas Mayores

El Centro Internacional de Investigación Jurídica, organiza la JORNADA DERECHOS DIGITALES DE LAS PERSONAS MAYORES. En el evento colaboran la Cátedra Abanca-Afundación/ICADE sobre Longevidad, Economía y Sociedad y la Clínica Jurídica-ICADE con la colaboración de EmancipaTIC.

La jornada tendrá lugar el 18 de febrero a las 18 h. en el Auditorio del Centro Internacional de Investigación Jurídica de la Universidad Pontificia Comillas (Calle Rey Francisco, 4- Madrid).

Es necesario inscribirse al evento para asistir.

Segundo congreso de ciencia inclusiva

El Consejo Superior de Investigaciones Científicas (CSIC) a través de su Vicepresidencia Adjunta de Cultura Científica y Ciencia Ciudadana (VACC-CSIC) organiza el 
II Congreso de Ciencia Inclusiva, que se celebrará los días28 y 29 de abril del 2025 en la sede central del CSIC en Madrid.

Este congreso es un espacio en el que divulgadores, comunidad científica, docentes, instituciones y colectivos comprometidos con la inclusión compartan sus experiencias y resultados. El congreso ofrece un espacio donde se refuerza los lazos y las redes iniciados en el primer congreso que se celebró en 2023.

Este congreso responde a la necesidad de abordar el desafío que supone hacer accesible la investigación y la difusión de sus resultados al mayor número de personas posible, independientemente de sus características físicas, sensoriales o psíquicas, su edad, su condición socioeconómica o su nivel educativo.

El periodo de recepción de comunicaciones está abierto hasta el 31 de enero de 2025 en la página de recepción de comunicaciones.

Para la asistencia al congreso es necesario inscribirse. Las inscripciones son gratuitas y pueden realizarse hasta el día 30 de marzo en la página de suscripción al evento.

Puedes ver el primer congreso de ciencia inclusiva en Youtube.

Qué es WCAG(Web Content Accessibility Guidelines)

La accesibilidad en la Web es un aspecto esencial para garantizar que todas las personas, independientemente de sus habilidades o necesidades especiales, puedan participar en la sociedad de la información. Para promover esta inclusividad, nacieron las WCAG, o Pautas de Accesibilidad para el Contenido Web (Web Content Accessibility Guidelines).
WCAG es un conjunto de pautas internacionales diseñadas para mejorar la accesibilidad web. Estas pautas proporcionan recomendaciones para que sitios web, aplicaciones y contenidos digitales sean accesibles a personas con discapacidad.
WCAG fue desarrollada por el World Wide Web Consortium (W3C), una organización internacional que trabaja en la estandarización de las tecnologías para la Web.
Dentro del W3C, el Web Accessibility Initiative (WAI) lidera los esfuerzos relacionados con la accesibilidad web.
Los perfiles de discapacidad incluidos en WCAG son la discapacidad visual, auditiva, motriz y cognitiva.
Las WCAG son ampliamente utilizadas por desarrolladores, diseñadores, empresas y gobiernos para garantizar que sus plataformas digitales sean inclusivas. También sirven como referencia para cumplir con legislaciones y normativas de accesibilidad en varios países.

Objetivo de las WCAG

El objetivo principal de las WCAG es garantizar que la web sea accesible para todos.

La inclusión digital no solo es un derecho humano fundamental, sino que también beneficia a las empresas y a la sociedad en general. Los sitios web accesibles pueden llegar a una audiencia más amplia, mejorar el SEO y reducir riesgos legales.
Además, las WCAG ofrecen una guía clara y estructurada para abordar las barreras más comunes en la web, asegurando que los desarrolladores y diseñadores puedan crear experiencias más igualitarias para todas las personas.

En los años 90, cuando internet comenzó a masificarse, se hizo evidente que las tecnologías digitales podían ser una barrera significativa para las personas con discapacidad.
Por ello, en 1999 se publicó la primera versión de WCAG (WCAG 1.0). Desde entonces, ha evolucionado para reflejar los cambios en las tecnologías y las necesidades de los usuarios, con WCAG 2.1 como la versión actual y que se utiliza como referencia para leyes y normativas para la accesibilidad digital.

Estructura de las WCAG

Las WCAG están organizadas en torno a cuatro principios fundamentales, conocidos como los principios POUR: perceptible, operable, comprensible y robusto.

Principios

Estos son los cuatro principios de WCAG:
• Perceptible: La información y los componentes de la interfaz de usuario deben ser presentados de forma que los usuarios puedan percibirlos. Por ejemplo, ofrecer alternativas textuales para contenido visual o auditivo.
• Operable: Los usuarios deben poder navegar y usar los elementos de la interfaz. Esto incluye garantizar que se pueda interactuar con el contenido utilizando un teclado y ofrecer suficiente tiempo para leer e interactuar con el contenido.
• Comprensible: La información y el funcionamiento de la interfaz deben ser comprensibles. Por ejemplo, utilizar un lenguaje claro y proporcionar ayuda para la corrección de errores.
• Robusto: El contenido debe ser suficientemente robusto para ser interpretado de manera confiable por diferentes herramientas, incluidas las herramientas de asistencia como lectores de pantalla o sistemas de control por voz.

Pautas en las WCAG

Cada uno de los principios POUR incluye una serie de pautas que tratan aspectos específicos de accesibilidad.

Cada pauta proporciona orientación concreta mediante técnicas y ejemplos que permiten a los desarrolladores implementar accesibilidad de manera efectiva evitando la creación de barreras de accesibilidad.

Criterios de éxito

Dentro de cada pauta hay varios criterios de éxito relacionados con esa pauta.

Los criterios de éxito son los estándares medibles que determinan si un sitio o aplicación cumple con las pautas. Estos criterios se dividen en tres niveles de conformidad.

Un ejemplo específico de criterio de éxito es el requisito de que todo contenido de video tenga subtítulos sincronizados (Nivel A) o que los mecanismos  de navegación deben ser consistentes en todas las páginas de un sitio web (Nivel AA).
Los criterios de éxito están diseñados para ser verificables mediante pruebas automáticas o evaluaciones manuales, facilitando el proceso de validación de accesibilidad.

Niveles de conformidad

Estos son los tres niveles de conformidad de los criterios de éxito en las WCAG:
• Nivel A: El mínimo indispensable para la accesibilidad simple. Este nivel es insuficiente en la mayoría de marcos legales del mundo.
• Nivel AA: Un nivel de accesibilidad recomendado y generalmente aceptado como suficiente en la mayoría de marcos legales en el mundo.
• Nivel AAA: El nivel más alto de accesibilidad, alcanzable en contextos específicos.

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.