5 Consejos para Evitar los Problemas de Color en tu Web

Hace un tiempo estuvimos hablando de errores que no podías cometer con los colores de tu web. Errores, que aunque en un principio podían parecer obvios cometemos más de lo que nos gustaría. A veces cuando comenzamos a diseñar, nos dejamos llevar por la subjetividad y nos olvidamos que estamos diseñando por una razón, y lo que es más importante, para alguien.

Pues bien, hoy damos un paso más y al igual que ya hablamos de la importancia de la legibilidad en los textos, no porque tengamos problemas en la visión, sino porque así facilitamos la lectura y por lo tanto, conseguiremos que nuestros visitantes permanezcan más tiempo en nuestra web; debemos tener especial cuidado para la visión de los colores.

Normalmente no es algo que se tenga muy en cuenta, porque si te dedicas al diseño es difícil que tengas algún problema de distinción de colores, pero es mucha la población que si los tiene. No solo ya aquellos que padecen daltonismo, que aunque pueda parecer bajo el porcentaje de población que es daltónica, aumenta si es un hombre (casi un 10% son daltónicos). Sino personas que les cuesta más trabajo distinguir colores.

Seguro que a todos os ha pasado que habéis ido a comprar algo y tu has pensado que era de tal color y tu acompañante de otro distinto. No todos percibimos los colores de la misma manera. La distinta percepción de los colores no es un problema en aquellos elementos en los que se usen por su valor estético, pero si en aquellos en los que sea dificultoso entender el contenido.

Claramente es muy difícil diseñar pensando en todos los tipos de daltonismo y en todos los problemas de percepción de color pero sí que se pueden seguir algunos consejos generales para que las personas con algún problema en la distinción de colores, puedan entender el significado de aquellos elementos importantes de tu web.

Aunque los consejos pueden aplicarse a todos los elementos, quizá no sea necesario que esto se aplique a toda tu web, sino que a aquellos elementos que necesiten una comprensión visual para seguir avanzando. Elementos, en los que es de vital importancia que se entiendan los colores para entender el funcionamiento de la misma.

Vamos a verlos!

1. En general: Combinación entre texto y fondo

Aquí tenéis un artículo en el que solo hablamos de esto (para el que quiera ampliar con ejemplos), pero en resumen, es muy importante crear contraste entre el color de fondo y el color de texto para que este sea legible. Si no conseguimos distingur el texto el fondo, no podremos leerlo, así de fácil (de la misma manera que es necesario vigilar el tamaño del texto, aunque ya lo hayamos repetido hasta la saciedad).

Si para una persona que distingue todos los colores con sus tonalidades y variantes es difícil leer un texto en el que no se aprecie el contraste entre el texto y el fondo, imagínalo para alguien con algún problema en la distinción de colores. El contraste entre los dos colores debe ser máximo. Por eso siempre hablamos de texto negro o gris oscuro sobre fondo blanco. Aunque también hay otras formulas que funcionan, como rojo sobre blanco.

colores-fondo-contraste

2. Superposición de elementos: Texto sobre imagen

De la misma manera que en el punto anterior hablamos de contraste entre el texto y el fondo, hemos de tener muy en cuenta cuando superponemos el texto sobre una imagen, que persista ese contraste.

Muchas veces se usan imágenes en la cabecera de las web y sobre ellas se pone el nombre de la empresa o un subtitulo. Pues bien, aunque entendemos que esa imagen es importante, pues es lo primero que verá el visitante, también lo es el texto, por lo que la elección de la misma debe ir determinada por el tipo de texto (dimensiones, posición…) que queremos añadir.

Tenemos que poner especial atención en que no tenga demasiados colores y que estos se correspondan con la gama de nuestra web. Como a veces es complicada la elección de la imagen perfecta, una buena solución es oscurecerla de manera que se entienda a la perfección la imagen, pero que el texto contraste con ella.

mala-vision-colores

imagen-oscurecida-texto

El segundo ejemplo, con un tono oscurecido, facilita la lectura del texto

3. Consideraciones en una tienda online

Si vendemos un producto en nuestra tienda online que se puede adquirir en distintos colores, siempre es de gran utilidad además de poner un cuadrado, circulo… con el color, que también aparezca por escrito. Si no podemos seleccionar el color sin leerlo, podemos tener algún problema en el proceso de compra.

Si vendemos una camiseta en verde turquesa y en gris verdoso… Si no lo ponemos por escrito, quizá no todo tu audiencia sea capaz de apreciar el matiz de distinción de color en la imagen.

De esta manera, también es muy importante incluir una descripción del producto o de la fotografía del producto, para que aquel que no distinga los colores pueda saber con exactitud el producto que va a comprar. Además, esto es muy recomendable pues no son pocas las veces en las que las fotografías no se corresponden con la realidad y con una descripción fehaciente se pueden despejar las dudas a la hora de comprar el producto.

representacion-colores-tienda-online

El ejemplo de la derecha evita equívocos en la elección de colores

4. Vigila el color de los enlaces

Es quizá el punto más difícil de todos los que se tratan aquí. Si quieres marcar los enlaces cambiando el color de las letras enlazadas, es difícil que si una persona tiene grandes problemas para diferenciar colores sea capaz de apreciarlo, pues normalmente las letras tiene poco grosor y a no ser que haya una gran diferencia de contraste entre los colores se puede perder.

Sin embargo cada vez son más las maneras que existen para diferenciar enlaces , como subrayados o cajas de color. Se un poco creativo y haz que tus enlaces luzcan distintos, sino para señalarlos, en el momento en el que se hace hover.

enlaces-colores-web

Posibles colores de los enlaces web

colores-blanco-negro

Ejemplo de como podría ver los colores personas con daltonismo

5. Cuidado con los mensajes de alerta

Si hay algo en cuanto a código de colores que tenemos claro y que de hecho hemos hablado en numerosas ocasiones, es que el verde valida y el rojo es error. Es el idioma universal y obviamente animamos a usarlo: si algo funciona no vamos a cambiarlo.

Sin embargo también hay que tener en cuenta que el verde y el rojo son los colores que más problemas dan a las personas con daltonismo, por lo que siempre que se pueda ayudar con un mensaje o un icono mejor que mejor.

Si al rellenar un formulario, simplemente aparecen en rojo aquellos campos que estén mal (sin mensaje de alerta) puede haber personas que no sepan cuáles son los campos erróneos. Por eso, es muy recomendable añadir un mensaje de alerta.

mensaje-alerta-distincion-colores

La columna de la derecha facilita la visión de los colores

Conclusión

Como veis, con sencillos detalles, podemos conseguir que nuestra web esté adaptada para aquellos que tengan algún problema con la distinción de colores. Como venía diciendo, a parte de los errores que no puedes cometer con tu web, hay elementos que no precisan de un gran entendimiento de los colores para su comprensión y en lo que por lo tanto no hay que vigilar tanto a los mismos.

Sin embargo, es importante tener en cuenta los elementos que pueden dar lugar a equivoco y conseguir algún detalle visual, para que se distingan.

Para terminar os dejo una herramienta, una extensión que podéis instalar fácilmente en Google Chrome y con la cual podéis visualizar la web de la manera en que los daltónicos lo hacen.

extension-chrome-visualizacion-colores

DESCARGAR extensión

Espero que os sirva y que los colores nunca sean un problema!

Comentarios (6)

  1. Excelente artículo para tener en cuenta a la hora de diseñar. No siempre es agarrar una paleta de colores y listo, el tema del contraste es muy importante asi tambien el de los mensajes de alerta y validación como mencionaros. Voy a seguir leyendo el blog, saludos, gracias.

  2. Me pareció muy interesante la información es importante que los colores estén relacionados entre si y que sigan una linea en toda la web.

    1. Hola Franco,

      La combinación de colores es muy importante para el buen entendimiento de cualquier diseño. Como siempre decimos, si los colores expresan por si solos, usemoslo!

      Un saludo y gracias por comentar

  3. exelente artiulo, ciertamente hay paginas que, al dia de hoy no se percatan de esta ley tan util. Los colores para identificar, palabras, secciones y otros, son, a pesar de ser detalles, siempre son importantes, sigan haciendo post como estos ; D

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *