Accesibilidad Web: Contraste

Rueda de coloresLas combinaciones de color con poco contraste pueden causar dificultades a algunos grupos de usuarios con problemas de visión para acceder al contenido de un sitio. Las Pautas de Accesibilidad al Contenido Web (WGCA) 2.0, estándar internacional de recomendaciones para desarrollar sitios así como también tecnología móvil accesibles, indican que un sitio debe cumplir con ciertas exigencias en materia de contraste de colores, ya sea de la fuente, del fondo u otros elementos de la página.

Entre los tipos de déficit visual que un usuario puede presentar, están la ceguera, la baja visión, daltonismo o ceguera de color (alteración congénita que dificulta la percepción de ciertos colores, como distinguir entre rojo y verde o entre amarillo y azul). Dentro del daltonismo, también se considera el daltonismo dicromático, y dentro de éste, existe un subtipo llamado protanopía, que es la imposibilidad de visualizar la luz roja.

Asimismo, existen la deuteranopía (imposibilidad de visualizar la luz verde), la tritanopía (imposibilidad de visualizar la luz azul), además del daltonismo tricromático anómalo, dentro del cual existen 3 subtipos: protanomalía (dificultad para visualizar el color rojo); deuteranomalía (dificultad para visualizar la luz verde); y la tritanomalía (dificultad para percibir el color azul).

¿Qué indican las pautas?

Punto 1.4.3 Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos (Nivel AA).

  • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.
  • Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.
  • Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.

Punto 1.4.4 Cambio de tamaño del texto:

A excepción de los subtítulos y las imágenes de texto, todo el texto puede ser ajustado sin ayudas técnicas hasta un 200 por ciento sin que se pierdan el contenido o la funcionalidad (Nivel AA).

Punto 1.4.5 Imágenes de texto: Si con las tecnologías que se están utilizando se puede conseguir la presentación visual deseada, se utiliza texto para transmitir la información en vez de imágenes de texto, excepto en los siguientes casos (Nivel AA).

  • Configurable: La imagen de texto es visualmente configurable según los requisitos del usuario.
  • Esencial: Una forma particular de presentación del texto resulta esencial para la información que se transmite.
  • Nota: Los logotipos (textos que son parte de un logo o de un nombre de marca) se consideran esenciales.
  • Respecto al tamaño de la fuente en textos: Se recomienda que el texto o las imágenes de texto existentes en el sitio tengan una relación de contraste de al menos 7:1. En tanto, los textos grandes (más de 18 puntos o 14 puntos en negrita), deben tener una relación de contraste de al menos 4.5:1. Más información en el punto 1.4.6 (Perceptible) de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0.

También, se recomienda no utilizar el color como único medio informativo.

Uso de software para análisis:

Para saber si los elementos cuentan o no con el contraste adecuado, se pueden utilizar los siguientes softwares o aplicaciones online gratuitos:

Algunos ejemplos de combinaciones de color accesibles:

  • Negro sobre blanco
  • Negro sobre amarillo
  • Rojo sobre blanco
  • Verde sobre blanco
  • Blanco sobre rojo
  • Amarillo sobre negro
  • Blanco sobre azul
  • Azul sobre blanco
  • Blanco sobre verde

Fuentes:

Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0
Qué es el daltonismo y algunos problemas

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s