Cuando navegamos por páginas web el color es un elemento muy habitual. En algunos casos usamos color para decorar nuestros contenidos y en otros casos utilizamos color para dar significado a ciertos elementos.
Siempre que utilicemos colores debemos garantizar la accesibilidad de nuestra web teniendo en cuenta que hay usuarios que pueden tener dificultades al acceder a la información que esos colores nos transmitan. Debemos trabajar sobre los colores de nuestra web para que ésta sea accesible.
Cuando el color nos genera fallos de accesibilidad
Veamos unos ejemplos típicos en los que el uso incorrecto de los colores puede generar problemas de accesibilidad al contenido de usuarios con discapacidad visual:
1. Para destacar un producto
Cuando destacamos productos utilizando un determinado color (un fondo amarillo típicamente).
Debemos incluir elementos textuales que reproduzcan la información que el color pretende dar, para garantizar el correcto acceso al significado de ese color.
2. En formularios
Si marcamos los campos de un formulario obligatorios en un color diferente al resto o si cuando rellenamos un formulario y validamos la información, mostramos en verde el marco de los campos correctamente rellenados y en rojo los incorrectos.
Es muy habitual encontrar la frase “Corrija los campos marcados en rojo”.
En este caso debemos indicar también mediante texto el significado del color (cuales son los campos obligatorios y cuáles son los que hemos rellenado incorrectamente).
3. Cuando elegimos el color en un producto que vamos a comprar
En la compra de productos que se pueden personalizar en diferentes colores es muy habitual que aparezca una paleta de colores donde podremos seleccionar el color que deseamos para nuestro producto.
Para solucionarlo debemos incluir el texto con el nombre del color a la imagen para que un usuario que accede con un lector de pantalla escuche el color o uno que no distingue los colores correctamente, pueda leer qué color va a comprar.
También es habitual en estos casos mostrar una lista de fotos con el mismo producto en diferentes colores y el usuario tiene que hacer clic en la imagen que corresponde con el color del producto que quiere comprar. En este caso deberíamos rellenar apropiadamente el texto alternativo de cada imagen con el color del producto.
Color y contraste
En nuestra página web accesible, debemos asegurarnos que los contrastes de colores sean apropiados. La diferencia de contraste entre el color del fondo de un texto y el color del propio texto deben ser correctos. Hay un gran número de herramientas automáticas que nos permiten validar la diferencia de contraste de color en nuestra web.
Para determinados usuarios es muy importante poder personalizar los colores de la web para que puedan acceder al contenido cómodamente. Para ello debemos utilizar siempre hojas de estilos correctamente estructuradas para que cualquier usuario pueda incorporar su hoja de estilos personalizada donde seleccione los colores de los elementos a visualizar.
En el punto 1.4.3 de las Pautas de Accesibilidad 2.0 tenemos el contraste mínimo que debe haber entre dos colores para que sean accesibles (cumpliendo un nivel AA de accesibilidad) y en el punto 1.4.6 tenemos el contraste mejorado (cumpliendo de esta forma un nivel AAA de accesibilidad).
