Artículos de Diseño Gráfico y Diseño y Desarrollo Web
Diseño Web y Desarrollo Web, informatica, programacion, paginas web
¿Pueden los usuarios daltónicos distinguir los colores de su sitio Web?
En mis últimos artículos he tratado problemas relacionados con el color y, en consecuencia, bastantes lectores me han solicitado información adicional sobre la selección de colores en sitios Web para que un daltónico pueda verlos con claridad. Tratando de satisfacer estas peticiones me he dedicado a investigar un poco más sobre el tema. En este artículo desearía proporcionar información que ayude a entender mejor esta necesidad y que, a la vez, permita diseñar sitios Web de fácil lectura.
Para comenzar, me dedicaré a analizar con mayor profundidad el término daltónico. En primer lugar, debo aclarar que ser daltónico no significa que no sea posible apreciar los colores o que sólo se puedan ver los objetos en blanco y negro. Por tanto, quizás nos podríamos referir a esta discapacidad como visión cromática deficiente.
El proceso se inicia en el ojo, concretamente en los conos del ojo. En la escuela nos enseñaron que en el ojo hay bastones y conos que son sensibles a la luz. Estos bastones y conos transmiten lo que captan al cerebro, donde se forma una imagen que nos permite ver todo aquello que nos rodea.
  Figura 1. Visión normal del color |
|---|
A continuación, me dedicaré a profundizar en la esencia de los bastones y los conos, así que aquellos que prefieran ir al grano pueden pasar con toda libertad a consultar la sección sobre búsqueda de soluciones.
Los bastones, que superan en número a los conos, captan la diferencia de brillo en la porción media del espectro de luz. Si sólo tuviéramos bastones, podríamos ver únicamente en blanco y negro. A través de los conos conseguimos la visión en color. Existen tres tipos de conos.
Si bien los colores rojo, verde y azul se distribuyen casi de igual modo en el espectro visible, no ocurre lo mismo con la respuesta específica de cada tipo de cono. Esto puede resultar un poco confuso, especialmente debido a que los protoconos ni siquiera enfocan totalmente la zona en rojo del espectro. Afortunadamente, la respuesta espectral de los conos es sólo uno de los recursos que el cerebro utiliza en una fase posterior del proceso completo de descodificación de las imágenes en color.
 Figura 2. Las tres curvas en blanco indican el nivel de respuesta de cada uno de los tipos de conos. La curva en negro muestra la sensibilidad de los bastones. Dowling, John E. (1987); The Retina : An Approachable Part of the Brain Belknap Pr; ISBN: 0674766806 |
|---|
Los trastornos de la visión en color surgen cuando todos los conos, ya sea de uno o varios tipos, ven reducida su capacidad funcional. La visión cromática deficiente afecta en mayor número a hombres que a mujeres, ya que los genes que regulan la apreciación del color forman parte del cromosoma X. Aproximadamente un 8% de los hombres sufre algún tipo de deficiencia en la visión cromática frente al 0,5 % de las mujeres.
Más abajo aparecen descritas las diferentes clases de visión cromática deficiente. He preparado una paleta y una rueda de colores a modo de ejemplo para cada una de ellas. Apenas pude encontrar referencias prácticas sobre cómo se aprecia el color en cada una de las clases siguientes. No obstante, las representaciones mostradas parecen ser las correctas. Puede que al mirarlas se pregunte por qué no se relacionan directamente con la ausencia de "rojo", "verde" o "azul". Intervienen dos factores importantes en este aspecto. Uno de éstos consiste en que, tal y como se muestra en la tabla anterior, la sensibilidad cromática de los conos no se centra de modo directo en sus áreas especificas del espectro. El segundo factor comprende el proceso siguiente que tiene lugar en el cerebro, durante el cual se asocian el color y la imagen con las respuestas procedentes de los bastones y los conos. En aquellos usuarios con una visión cromática deficiente los colores definitivos apreciados variarán para tratar de compensar la percepción.
 
|
La protanopia afecta aproximadamente al 1% de la población masculina. La protanopia es la carencia de sensibilidad al color rojo, denominada también dicromacia roja. Consiste en la ausencia de actividad funcional de los protoconos, que son sensibles a la porción roja del espectro visible. Al encontrarse el rojo situado al final del espectro visible, se produce solamente una superposición parcial de respuesta con los otros dos tipos de conos. Por tanto, los individuos que sufren protanopia padecen una pérdida clara de sensibilidad a la luminosidad del extremo rojo del espectro. La protanomalía afecta aproximadamente al 1% de la población masculina. La protanomalía consiste en una percepción mas débil del rojo y se produce como consecuencia de una disminución en la capacidad funcional de los protoconos. |
|---|---|
 
|
La deuteranopia afecta aproximadamente al 1,1% de la población masculina. La deuteranopia consiste en la carencia de sensibilidad al color verde, denominada también dicromacia verde. Es el resultado de la ausencia de actividad de los deutoconos, que son sensibles a la porción verde del espectro visible. Debido a la ubicación del verde en el espectro, a la superposición de la respuesta de los deutoconos (sensibles al verde) y los protoconos (sensibles al rojo) y a la superposición parcial de los tritaconos (sensibles al azul), las personas que padecen deuteranopia pueden percibir casi con total normalidad toda la gama del espectro, si bien experimentarán confusión entre los colores por separado. La deuteranomalía afecta aproximadamente al 4,9% de la población masculina. La deuteranomalía consiste en una percepción menos intensa del color verde y se origina cuando los deutoconos ven disminuida su capacidad funcional. |
 
|
La tritanopia afecta aproximadamente al 0,001% de la población masculina. La tritanopia consiste en la carencia de sensibilidad al color azul, denominada también dicromacia azul. Se trata de una de las alteraciones de la visión cromática menos frecuentes. Surge cuando los tritaconos, que captan la porción azul del espectro visible, experimentan una pérdida de actividad. Debido a que el azul se sitúa en el extremo opuesto al rojo en el espectro, y a que la respuesta de los tritaconos se superpone en menor medida con las respuestas de los otros dos tipos de conos, las personas con tritanopia sufren una mayor pérdida en la percepción del espectro. La tritanomalía haría referencia a la captación disminuida del azul. Sin embargo, no existe ningún caso conocido de esta clase de deficiencia cromática. Esto podría deberse, sobre todo, a que los tritaconos representan tan sólo un 10% del total de conos presentes en el ojo. Para cuando una anomalía pudiera resultar perceptible, los conos carecerían en su mayoría de actividad alguna. |
Nota: Las muestras de color anteriores fueron realizadas usando paletas elaboradas con información obtenida de la siguiente dirección: http://www.labs.bt.com/people/rigdence/colours/colours1.html (en inglés).
Si se observan los colores de las paletas anteriores, se podrá entender mejor la incapacidad de las personas con algún tipo de deficiencia cromática para ver los colores que tan minuciosamente ha seleccionado para su sitio Web.
A modo de ejemplo, imagine que se encuentra en la siguiente situación:
 Haga clic en el botón Verde para continuar, en el Amarillo si necesita ayudao en el Rojo si desea salir. |
|---|
Parece fácil ¿verdad?. Pero, ¿que ocurriría si sólo se viera esto?
O bien
O bien
Francamente, espero que esta tipo de caso apenas aparezca en los sitios Web. Resulta más sencillo definir los botones con etiquetas del estilo de "Continuar", "Ayuda" o "Salir" que, además, ocupan menos espacio en la página. Por desgracia, este tipo de situaciones suceden, no sólo en las páginas Web, sino también en la vida real.
La solución pasa por evitar utilizar los colores como indicadores exclusivos de instrucciones o de la información a la que pretende obtener acceso. El color debería usarse sólo a modo de señal que no sea relevante.
Tal y como hemos podido leer en mis artículos anteriores sobre el color, un aspecto importante a la hora de diseñar la página es el contraste pronunciado entre los colores en primer plano y los de fondo, ya que así se facilita la lectura del texto. Este hecho resulta aún más esencial al dirigirnos a usuarios con visión cromática disminuida.
Observe primero las ruedas de colores mostradas anteriormente y, a continuación, la que aparece al principio de la página.
Podrá advertir que la variedad de colores apreciados por los usuarios con visión cromática deficiente es bastante más reducida que la de una persona con visión normal y que para ellos muchos de los colores cercanos en la rueda de color presentan una aspecto prácticamente idéntica. Examinemos la siguiente muestra de color para ver cómo afecta al diseño de su sitio Web.
Sí, soy consciente de que no es la selección de color más acertada, pero la he visto en un gran número de sitios Web. Puede que los colores parezcan chillones—pero si tiene una visión normal no tendrá dificultad para leer el mensaje que aparece escrito. Sin embargo, ¿qué ocurre si alguien sufre de visión cromática deficiente?
Es probable que algunos opinen que basta con comprobar que la selección realizada se sigue apreciando incluso cuando se aplica una paleta de escala de grises para asegurarnos de que los colores serán distinguidos por los usuarios con visión cromática deficiente. Personalmente, no creo que esto sea así. Probemos a reducir la paleta utilizada en la siguiente imagen a una escala de grises y veamos qué aspecto tiene.
Podría pensar que, aunque esta combinación de colores no resulta muy llamativa, al menos será percibida por el usuario con visión cromática deficiente. ¿Está seguro? Vamos aplicar ahora una paleta que refleja con mayor precisión el tipo de imágenes vistas por estos usuarios. Observemos con más detenimiento:
Protanopia:
Deuteranopia:
Tritanopia:
Según la imagen, los individuos con tritanopia no tendrían problema alguno en este caso. En mi opinión, pueden ver los colores incluso en un tono más llamativo que yo, por ejemplo, con mi visión normal. Sin embargo, aunque la imagen era clara en una paleta de escala de grises, no resulta en absoluto una combinación apropiada para la mayoría de los usuarios con visión cromática deficiente.
Cualquier diseñador que se dedique a la selección adecuada de colores nunca hubiera elegido esta combinación en concreto. En su lugar, optaría por colores que produjesen un contraste más marcado con el fin de hacer que la información resulte más atractiva para el ojo humano. Imaginemos que por alguna razón fuese preciso recurrir a esta clase de combinación de verde sobre amarillo. ¿Qué podría hacer el diseñador? Hemos aprendido, tras leer mis artículos anteriores, que si se oscurece un color y se aclara el otro, el contraste aumenta, así que trataremos de cambiar la claridad y la saturación de los colores, manteniendo el mismo matiz, para producir un contraste mayor:
Visión normal:
Protanopia:
Deuteranopia:
Tritanopia:
Esta selección de colores concreta no produce tampoco un efecto del todo satisfactorio, pero sin duda es mucho mejor que la original. Con sólo un pequeño cambio, hemos logrado mantener los colores de la selección original y elaborar un texto legible para los usuarios con visión cromática deficiente.
Podrá comprobar sus propias selecciones de color en las siguientes imágenes si dispone de un programa de dibujo, como por ejemplo PaintShop Pro (en inglés), que es el que utilizo, que permita extraer paletas de color de archivos de imagen y aplicarlas tanto en la modalidad de color más cercano ("nearest color") como en la de mantener índices ("maintain indexes"). La imagen "Normal" representa a la Paleta de seguridad (en inglés) de 216 colores; las otras imágenes mantienen los mismos índices, pero se han cambiado los colores para reflejar lo que capta una persona con visión cromática deficiente.
Visión normal:
Protanopia:
Deuteranopia:
Tritanopia:
Una vez que haya guardado las paletas de cada una de estas imágenes en un archivo específico, realice los siguientes pasos para poder examinar sus propias imágenes:
Tenga en cuenta que la mayoría de los programas de dibujo admiten el uso y la manipulación de las paletas de colores, aunque pueden ofrecer la opción de mantener los índices de color al agregar una nueva paleta. Para comprobar si su aplicación incluye esta opción, consulte con el fabricante o con otros usuarios del software.
Tal y como habrán podido comprobar tras el ejercicio anterior, la selección de colores que puedan apreciar correctamente todos los usuarios puede suponer todo un reto. Si tenemos en cuenta que, además, existen diferentes grados de visión cromática deficiente, con lo cual la variación de los colores se incrementa, y el hecho de que algunos monitores no se hallan bien configurados y ofrecen un contraste poco marcado incluso para usuarios con visión normal, la combinación de estos factores convierte a la selección de colores en un proceso no sólo importante sino también difícil.
Al seleccionar colores para su sitio Web, puede permitir al usuario que especifique los colores que desea visualizar en la página. No, esta operación no resulta tan complicada como parece. El programa de hojas de estilo en cascada ya incluye la idea de una "Hoja de estilo del usuario", que permita a éste especificar un estilo que se superponga al establecido por el diseñador de la página. No obstante, puede que al usuario le resulte un tanto complejo crear esta hoja y estropee de forma accidental el diseño de la página Web.
Un modo más sencillo para trabajar con los usuarios consiste en tomar como referencia los mismos colores que han elegido para el sistema operativo Windows y utilizarlos para visualizar los diversos componentes de la interfaz de usuario. El usuario habrá cambiado los colores en la pantalla, a través del subprograma del panel de control Configuración de pantalla, para así poder ver y utilizar las aplicaciones de Windows. Si recurre a la misma combinación de colores, asegurará que su sitio Web será visto por este tipo de usuarios. No obstante, existe un inconveniente en este método: no resulta neutral con respecto a los exploradores ya que, por el momento, sólo Microsoft Internet Explorer emplea estas palabras clave.
Para poder usar los colores del sistema, basta con utilizar las palabras clave apropiadas en lugar de los valores de colores. Por ejemplo, en vez de utilizar:
<font color="#FFCC9">
emplearíamos:
<font color="windowtext">
De este modo, aplicaríamos para el color de fuente el mismo color que el seleccionado para el texto del sistema operativo Windows.
A continuación, se enumeran las palabras clave. La primera lista contiene aquellas que se emparejan para lograr una combinación de color adecuada de fondo y texto.
Haga click aquà para ver la tabla. Posiblemente no funcione en un navegador distinto a Internet Explorer.
En la siguiente lista se incluyen los colores que no se combinan con colores de contraste correspondientes. Por ello, no se recomienda utilizarlos como fondo o como color del texto, sino sólo para reflejar las funcionalidades que implican sus propios nombres:
Haga click aquí para ver la tabla. Posiblemente no funcione en un navegador distinto a Internet Explorer.
Para aquellos que deseen utilizar estos colores en su combinación de colores, he creado una nueva versión de la herramienta HTML dinámico, mencionada en mi artículo anterior, que proporciona una paleta de colores con los distintos colores del sistema.
Aunque todo esto pueda parecer demasiado, es esencial que analice el contenido de la información que pretende ofrecer a los usuarios y que se asegure de que éstos podrán leerlo realmente. No basta con seleccionar colores que combinen bien, sino que también debemos tener en cuenta las diferencias en la visión que, en mayor o menor grado, nos afectan a todos.