Paso 7.- El uso de los colores.
La norma general es usar el color de forma segura. La manera de hacerlo es asegurarse de que no trasmitimos información exclusivamente a través del color.
Veamos un ejemplo:
Supongamos que en nuestra bitácora estamos informando sobre artículos y documentos disponibles en la Web sobre un determinado tema. La Web es un medio dinámico y algunos contenidos, pasado un tiempo, pueden desaparecer. A nosotros nos interesa mantener la información sobre los artículos y documentos, pero debemos dar cuenta de aquellos que ya han desaparecido. ¿Cómo podemos hacer para comunicar a nuestros visitantes de que un documento ya no está disponible en la Web?
Una forma, más usual de lo que debería ser, es decir algo así: "Los artículos en rojo ya no están disponibles en la Web". El problema es que entre nuestros visitantes hay personas que no ven los colores o los perciben de forma incorrecta. Si sólo hemos puesto el color rojo como pista para saber que ya no está disponible el artículo, estas personas no sabrán cuáles de nuestra lista son.
Otra mala costumbre que cada día se está generalizando más con el uso de las hojas de estilo es modificar la presentación de los vínculos de nuestras páginas Web de tal manera que no destacan en el texto. Esto despista mucho a usuarios poco expertos y a personas que tienen problemas con la percepción del color. Debemos procurar que los vínculos queden claramente perceptibles para nuestros visitantes en lugar de ocultarlos visualmente. Y esto nos puede afectar a todos.
Del mismo modo, la presentación de vínculos exclusivamente mediante el cambio de color puede suponer un problema para algunos usuarios que al pasar sobre ellos el cursor del ratón o al colocar el foco sobre ellos mediante el teclado no perciben este cambio. Un ejemplo lo tenemos aquí:
- Este vínculo está subrayado y en azul, que es el comportamiento por defecto.
- Este vínculo está coloreado y en negrita, usando estilos de nuestra hoja.
- Este vínculo sólo está coloreado, también usando estilos de nuestra hoja.
Una persona con problemas de visión para los colores, como el daltonismo, vería estas tres frases del siguiente modo:
- Este vínculo está subrayado y en azul, que es el comportamiento por defecto.
- Este vínculo está coloreado y en negrita, usando estilos de nuestra hoja.
- Este vínculo sólo está coloreado, también usando estilos de nuestra hoja.
La primera frase no presenta problemas. Una persona con daltonismo verá el color azul y tiene más pistas mediante el subrayado. La segunda frase pierde el color rojo, pero sigue dando una pista con la letra negrita que resalta en el texto. Sin embargo, la tercera frase pierde el color rojo y no da ninguna pista del vínculo para quien tenga ceguera para el color rojo.
Una forma sencilla de solucionar la forma de destacar nuestros enlaces es mediante la hoja de estilo. Podemos incluir una categoría similar a esta:
a {
color:#3333FF; /* el típico color azul de los vínculos, pero podemos usar cualquier otro */
text-decoration:underline; /* para que aparezca subrayado */
font-weight:bold; /* para que aparezca en negrita */
}
De alguna manera tenemos, además de mediante el color, tenemos que transmitir la presencia del vínculo. Si lo hacemos de más de una, seguro que acertaremos con la más adecuada para cada usuario. Luego, también mediante las hojas de estilo, podemos dar propiedades para cuando estamos apuntando al vínculo ("hover") o cuando el vínculo ya ha sido visitado ("visited"). Pero lo más importante es no olvidar que la información debe ser percibida independientemente del color.
Otro problema que suele dar el uso de colores es la falta de contraste entre el fondo y la forma. Esto rige tanto para el texto como para las imágenes (sobre todo si éstas contienen texto). El W3C ha recomendado un algoritmo que nos puede ser útil para saber si el contraste de los colores que usamos es el adecuado. En función de ese algoritmo se han desarrollado algunas herramientas que nos pueden ayudar a aplicarlo. Personalmente, me gusta usar la denominada "Analizador de contrate de color" (en inglés "Colour contrast analyser" CCA), desarrollada por Accessible Information Solutions de NILS, en Australia. Dispone de una versión en castellano (español) que se puede descargar gratuitamente en: http://www.nils.org.au/ais/web/resources/contrast_analyser/versions/es/
Otras referencias importantes para conseguir más información sobre el correcto uso del color en nuestra Web son éstas:
- Vischeck (http://www.vischeck.com/vischeck/), que simula la ceguera de color y permite ver lo que las personas con ceguera de color ven.
- Color Vision de Carl Henderson (http://www.iamcal.com/toys/colors/), que muestra el espectro de color tal como lo ven personas con diferentes tipos de ceguera de color.
- Ishihara Test for Color Blind [Test para la ceguera de color Ishihara] (http://toledo-bend.com/colorblind/Ishihara.html), que contiene una serie de imágenes que las personas con ceguera de color para el rojo y el verde ven de forma diferente o no las ven.
- La barra de accesibilidad de AIS (versión en castellano/español en: http://www.teleservicios.es/srv/barra_ais/index_es.asp) dispone de una funcionalidad para el análisis de color.
<< Home