Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G174Ofrecer un enlace a una versión de alto contraste de la página

Nombre oficial en el W3C: Proporcionar un control con una relación de contraste suficiente que permita a los usuarios cambiar a una presentación con contraste suficiente

En pocas palabras

Si parte del texto o de los gráficos de una página no tiene suficiente contraste con su fondo, se puede ofrecer un enlace o botón a una versión que sí lo tenga. Ese control debe verse bien y estar en un lugar destacado. La versión alternativa debe tener la misma información y funciones y cumplir todos los demás requisitos.

Por qué es importante

El texto con poco contraste, como el gris claro sobre blanco, es difícil de leer para personas con baja visión, personas mayores o quien mira el móvil al sol.

A veces la marca o el diseño imponen colores que no llegan al contraste necesario. Esta técnica permite mantener ese diseño y ofrecer, a un clic, una versión que todo el mundo puede leer.

Cómo se hace

  1. Coloque el enlace o botón al principio de la página, por ejemplo «Ver en alto contraste».
  2. Dé buen contraste a ese control: si no se ve, no sirve para llegar a la otra versión.
  3. En la versión alternativa, asegure al menos 4,5:1 en el texto normal y 3:1 en el texto grande, los iconos y los bordes de los controles. Para el nivel AAA, el texto necesita 7:1, y 4,5:1 si es grande.
  4. Mantenga en esa versión todo el contenido y todas las funciones de la original.
  5. Haga que la versión alternativa cumpla también el resto de requisitos de accesibilidad, no solo el contraste.

Cómo comprobarlo

  1. Busque en la página original el enlace o botón que lleva a la versión de alto contraste.
  2. Mida el contraste de ese control con un analizador de contraste, como el de las herramientas del navegador.
  3. Active la versión alternativa y mida el contraste de textos, iconos y controles.
  4. Compruebe que tiene el mismo contenido y funciones que la original y que cumple los demás criterios.
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G174 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Cualquier tecnología.

Descripción

Cuando el contraste entre el texto y su fondo en alguna parte de la página no se ha diseñado para alcanzar el nivel de contraste del criterio de conformidad 1.4.3 Contraste mínimo o del 1.4.6 Contraste mejorado, es posible cumplir estas pautas recurriendo a la cláusula de «versión alternativa» de los requisitos de conformidad (requisito de conformidad 1). Un enlace o control de la página puede cambiar la página para que todos sus aspectos sean conformes, o bien llevar al usuario a una nueva versión de la página que sí sea conforme en el nivel deseado. Colocar el enlace o control en un lugar destacado de la página ayudará a los usuarios a acceder fácilmente al contenido conforme.

Para que esta técnica se aplique con éxito, deben cumplirse tres condiciones:

  1. El enlace o control de la página original debe cumplir por sí mismo el requisito de contraste del criterio de conformidad deseado. (Si el usuario no puede ver el control, puede que no sea capaz de utilizarlo para ir a la nueva página.)
  2. La nueva página debe contener la misma información y funcionalidad que la página original.
  3. La nueva página debe cumplir todos los criterios de conformidad del nivel de conformidad deseado. (Es decir, la nueva página no puede limitarse a tener el nivel de contraste deseado y no ser conforme en lo demás.)

Esta técnica puede utilizarse para cumplir el criterio de conformidad 1.4.3 Contraste mínimo haciendo que, en la versión alternativa de la página, el texto (o las imágenes de texto) tenga un contraste de 4,5:1 y el texto grande (o las imágenes de texto grande) tenga un contraste de 3:1 con su fondo. Si en la versión alternativa de la página todo el texto (o las imágenes de texto) tiene un contraste de 7:1 y el texto grande (o las imágenes de texto grande) un contraste de 4,5:1, entonces cumpliría tanto el criterio de conformidad 1.4.3 Contraste mínimo como el 1.4.6 Contraste mejorado.

Esta técnica puede utilizarse en combinación con una técnica de cambio de estilos para presentar una página que sea una versión alternativa conforme de un contenido no conforme. Consulte C29: Usar un selector de estilos para proporcionar una versión alternativa conforme y Comprender las versiones alternativas conformes para obtener más información.

Ejemplos

  • Una página con algunos titulares que no cumplen el requisito de contraste de 3:1 tiene en la parte superior un enlace de alto contraste (5:1) que lleva al usuario a una nueva versión de la página con un contraste mínimo de 4,5:1 en todo el texto y las imágenes de texto.
  • Una página utiliza fondos sombreados como efecto, pero el resultado es un contraste de 4:1 entre el texto y el fondo. Un control en la parte superior de la página dice «high contrast» (alto contraste). Al hacer clic en él se aplican estilos distintos y se eliminan los colores de fondo para alcanzar un contraste de 7:1.

Pruebas

Procedimiento

Para cada componente de la interfaz de usuario de la página que deba recibir el foco del teclado:

  1. Comprobar que en la página original existe un enlace o control que da acceso a la versión alternativa.
  2. Comprobar que el enlace o control de la página original cumple todos los criterios de conformidad del nivel de conformidad que se está evaluando.
  3. Comprobar que la versión alternativa cumple el contraste y todos los demás criterios de conformidad del nivel de conformidad que se está evaluando.

Resultados esperados

  • Las tres comprobaciones son verdaderas.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G174 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.