Los campos marcados con * son obligatorios

×

Regenerar mi contraseña

Escribe el email con el que te registraste en LanceTalent y te enviaremos una nueva contraseña:

×

Tu registro se ha efectuado correctamente.

Hemos registrado tus datos correctamente.
Ahora recibirás un email de confirmación en tu cuenta de correo. Por favor, sigue las instrucciones para finalizar el proceso.

×
Publica tu proyecto ahora, es gratis! / ¿Que necesitas para lanzar tu negocio online?
Top
44781-O46IY1

Cómo diseñar una web para usuarios daltónicos

Cuando diseñas una web para un cliente debes pensar en muchas cosas: el equilibrio de las formas, la jerarquía de textos e imágenes, la armonía del color…Pero, ¿has pensado alguna vez que el color de tu diseño puede ser percibido de manera diferente por distintas personas?

Habitualmente diseñadores, desarrolladores, estrategas de contenido, planificadores de proyectos y otras personas involucradas en el diseño de una página web dan por sentado que la percepción del color de su diseño será igual para todo el mundo. Pero es importante recordar que un gran porcentaje de personas sufren ceguera del color o daltonismo.

Si la web de tu cliente tiene demasiados colores o contrastes, éstos pueden afectar a la percepción del color que tienen los usuarios daltónicos, que pueden acabar abandonando la página y yendo a la de la competencia. Afortunadamente, hay algunos puntos que puedes tener en cuenta para diseñar una web que evite estos problemas y asegurarte de que el negocio online de tu cliente es accesible y fácil de usar para un público más amplio.

728_90_ES

¿Qué es el daltonismo?

El daltonismo es una enfermedad que disminuye la capacidad de ver un color, o de distinguir los colores separados unos de los otros.

Los conos son células fotoreceptoras que se encuentran en el ojo, responsables de percibir el color. Existen tres tipos y cada uno es responsable de detectar los tres colores primarios (rojo, azul y verde) en un espectro. Los problemas con la visión ocurren cuando estas células tienen defectos o no funcionan. Casi siempre esta condición es genética, pero también puede ocurrir por algún daño neurológico, por haber estado expuesto mucho tiempo a rayos ultravioleta, como resultado natural de la edad o como efecto de la diabetes.

Captura de pantalla 2016-04-05 a las 10.40.10

Los dos tipos más comunes de ceguera al color, deuteranopía y protanopía, son rasgos ligados al sexo y son mucho más comunes en los hombres que en las mujeres. Deuteranopia, el más común, se produce en un 7% de los hombres, pero sólo en un 0,5% de las mujeres. Es casi el 8% de la población total, por lo que no podemos ignorar este grupo demográfico.

A continuación te damos cinco consejos fáciles de seguir e implementar en una web que aseguran que su diseño es accesible y fácil de ver para todos los usuarios.

1. Utiliza nombres para los colores

Una de las molestias más comunes de las personas con daltonismo es que pueden tener dificultades para entender el verdadero color de una pieza de ropa y tienen que pedirle a otra persona que confirme el color por ellos. Este problema se solventa fácilmente si a la hora de diseñar una web incluyes el nombre del color en la descripción de cada prenda. Utiliza los nombres reales de cada color y si puedes, agrega términos para diferenciarlos (rojo oscuro, verde claro, azul pastel).

Captura de pantalla 2016-04-05 a las 10.48.33

2. Utiliza filtros de búsqueda por color

Otro problema común se produce cuando se añade un filtro por color en la búsqueda de los productos. Muchas tiendas online añaden simplemente un recuadro con el color olvidando que no todos los usuarios lo percibirán de la misma forma.

La mejor solución es incluir las muestras de color acompañadas de etiquetas específicas como vemos en el siguiente ejemplo.

Captura de pantalla 2016-04-05 a las 10.54.43

3. Evita incluir colores en las instrucciones de la página

En el diseño de formularios evita incluir colores en instrucciones específicas (el siguiente ejemplo es uno de los errores más comunes). Estos campos pueden parecer idénticos para una persona con daltonismo.

Captura de pantalla 2016-04-05 a las 10.58.37

Es mejor mostrar una referencia positiva o negativa al lado del texto, ya que será entendible para cualquier persona.

Captura de pantalla 2016-04-05 a las 10.58.41

4. Evita el diseño de bajo contraste

Al igual que en la pintura, la ilustración y la fotografía, un buen uso de contraste puede crear una jerarquía eficaz y enfocar la mirada de los usuarios hacia un área determinada de la página. Y lo que es más importante aún, el contraste efectivo es necesario para asegurar que el contenido y los enlaces son comprendidos por todos los usuarios.

La elección de un diseño de bajo contraste puede significar que los clientes daltónicos no sean capaces de leer la información de la tienda, apreciar los detalles de los productos, o incluso dónde encontrar el enlace para completar una compra. No se necesita mucho más para entender que esto se traduce en una venta perdida.

Los elementos de un sitio web donde el contraste y la legibilidad son más importantes se encuentran en el color del texto y del fondo.

Lograr un contraste efectivo es fácil si sigues la guía Web Content Accessibility Guidelines (WCAG). Hay tres niveles existentes, según la WCAG 2.0: El más bajo, seguido de doble-A  y triple A, que es el más alto y el más estricto.

El contraste de color mínimo absoluto en el nivel Doble-A para el texto y las imágenes de texto debe ser de 4.5 a 1. En otras palabras, el color más claro debe tener cuatro y media veces más luminosidad que el color más oscuro. El cumplimiento del nivel triple A requiere de una relación de contraste de 7-1.

La imagen de abajo es un ejemplo de texto real que encontramos en un sitio web bastante popular. Incluso para una persona con buena visión, es increíblemente difícil de leer. La relación de contraste resulta ser de 2.36, lo que es inaceptable y no cumple con ninguno de los niveles.

Captura de pantalla 2016-04-05 a las 11.12.49

Recomendamos que todo el texto sea triple A, con titulares y líneas no tan relevantes en doble A.

Afortunadamente no tienes que preocuparte demasiado por calcular estos números porque hay un montón de herramientas para ayudarte como  Contrast Ratio checkerEsta herramienta te da la opción de ingresar un código de color para un fondo y un código de color para el texto, y te dirá si la relación de contraste de color es suficiente. Es compatible con cualquier color de CSS que soporta el navegador (no sólo los códigos hexadecimales) y también es compatible con transparencias.

5. Prueba tu trabajo

Hay muchas herramientas para simular diferentes tipos de ceguera al color con las que puedes comprobar si la página es accesible para todos los usuarios antes de publicarla.

Una de esas herramientas es Color Oracle, una aplicación que simula las formas más graves del daltonismo.

También puedes utilizar Photoshop o Illustrator para probar tu diseño web. Encontrarás filtros que simulan Protanopía y Deuteranopia en menú Ver> Ajuste de prueba> Ceguera de los colores.

Asegurarse de que el diseño de la web proporciona una buena experiencia para todos los usuarios no te llevará más tiempo del necesario. Cuanto más te familiarices con esos conceptos mejores diseños harás, lo que se traducirá en un mayor número de ventas en los negocios de tus clientes, y en más y mejores proyectos en los que trabajar para ti.

¡Encuentra proyectos de diseño en los que trabajar en nuestra plataforma!

trabajar

Fuente

Talento freelance para tu startup. LanceTalent es un "freelance marketplace” para emprendedores que te ofrece el mejor talento para la ejecución de los proyectos necesarios para poner en marcha tu startup.

Sin Comentarios

Publicar un Comentario