Que hacer y qué no hacer con el color del texto en la web

Recientemente estaba revisando los sitios web que mis alumnas y alumnos están realizando para sus cursos y estuve haciéndoles observaciones sobre las combinaciones de colores texto/fondo que utilizaban para los recursos educativos, las instrucciones de los foros, entre otros. En vista que este tema es muy importante para lograr una lectura adecuada de un texto en una página web, decidí investigar y elaborar este artículo para explicar por qué algunas combinaciones definitivamente no resultan, no, no, no. Y otras sí.  ¡No te lo pierdas!

¿Alguna vez haz visto esta combinación de colores texto/fondo?

En este recuadro escribiremos un texto de ejemplo para visualizar cómo se ve el texto de color # CC3333 contra un fondo de color rosado #FFCCCC ¿Les parece fácil de leer este texto de color rojo contra el fondo rosado?

¿Te parece fácil de leer?
¿Y si lo cambiamos por este otro color de texto?

Ah, te has dado cuenta que se ve mejor el texto, se lee mejor. Hace mayor contraste. La respuesta es muy sencilla: la luminancia. Descifrar y entender este concepto es crucial y nos permitirá seleccionar la mejor combinación de colores texto/fondo para nuestro sitio web. Ya les explico.

La luminancia, según Wikipedia, es la intensidad aparente de la luz proveniente o reflejada por un objeto. Es el equivalente al brillo.

Es decir, mientras más luz refleja, más brillo percibimos a través de nuestra visión. Este brillo se puede medir a través del valor de la Luminancia . El valor de Luminancia para el color blanco es 100% y para el negro es 0%. Entre el negro y el blanco encontramos la variedad de grises y sus valores de luminancia,  que se muestran en  la figura.

Mientras más luz blanca posea un color, mayor será el porcentaje de luminancia.  Cuando conoces el valor de luminancia de dos colores, conoces también el contraste entre los dos colores. El contraste es la diferencia de luminancia entre los dos colores.  El contraste es el valor clave para la usabilidad en el uso de los colores en un  sitio web. Es la información visual más importante, incluso que el tono o la saturación, para conocer cuál es el color correcto para un texto.

Ahora viene lo bueno y lo práctico: Hay una regla básica acerca de la Luminancia que te van a encantar.

Regla básica de Luminancia: Para un mínimo de lectura en la web, la diferencia entre el valor de la Luminancia del color del texto y del fondo debe ser mayor al 50%. A medida que sea mayor la diferencia entre los dos valores, más fácil se nos hará la lectura del texto contra ese color de fondo y por supuesto, mejor comprenderemos la lectura.

Esta regla, en vez de limitar nuestra creatividad, más bien  probará ser una manera consistente y científica de determinar la combinación de colores adecuada para detectar problemas de visibilidad.

En el ejemplo anterior, podemos apreciar cómo los dos colores rojos para el texto generan contrastes diferentes contra el mismo color rosado de fondo ( Fondo rosado FFCCCC 86%Lum)

Te explico con un ejemplo:

Si utilizamos un texto color gris (#666666 40%Lum) y fondo de diferentes tonos de grises hasta llegar al blanco, calculemos el contraste restando los valores de Luminancia.

Fondo gris #d9d9d9 85%Lum Contraste: 45%

Fondo gris e6e6e6 90%Lum Contraste= 50%

Fondo gris f2f2f2 95%Lum Contraste=55%

Fondo gris fafafa 98%Lum Contraste=58%

Fondo blanco #ffffff 100%Lum Contraste=60%

Para el primer cuadro sería: (Lum fondo)85% – (Lum texto)40 % = 45% de contraste. El resultado (40%) está por debajo de la regla que establece que el contraste debe ser mayor que el 50%. Así que esta combinación de colores texto/fondo no es adecuada para la lectura y ustedes lo pueden corroborar al ver que no tiene mucho contraste. En los siguientes cuadros vemos que a medida que aumenta el contraste entre los colores del texto y el fondo, el mismo texto se visualiza mejor para la lectura porque tiene más contraste.

Te preguntarás ¿y cómo conozco el valor de luminancia para cada color? No te preocupes. Hay programas que te ayudan a encontrar estos valores. Solo tienes que colocar el código del color y te da la Luminancia, o seleccionas el color de acuerdo al fondo que quieres para tu texto y te calcula automáticamente la luminancia.  Recuerda, la resta debe dar mayor a 50% para que se visualize mejor el texto.

En workwithcolor http://www.workwithcolor.com/hsl-color-picker-01.htm, se puede calcular la luminancia seleccionando un color o colocando el código del color directamente.

Según lo que he investigado y las normas de accesibilidad de la web W3C, he elaborado esta lista de qué hacer y qué no hacer.

Qué hacer con los colores de texto

1. Debemos utilizar colores de texto y de fondo que proporcionen suficiente contraste para poder permitir la correcta visibilidad para todo tipo de público, incluyendo las personas que son ciegas al color y que utilizan pantallas en blanco y negro. Para este tipo de personas, el color del texto y del fondo serán iguales sin no tienen suficiente contraste y por lo tanto no podrán ver el texto. Utilizemos los valores de luminancia para chequear este contraste según se explicó en los párrafos anteriores.
2. Utilizar el color para guiar al usuario al contenido que promueva su estadía prolongada, para guiarlo sobre qué camino seguir, indicar una acción, provocar una respuesta o distinguir visualmente un elemento. El más utilizado en estos casos es la aplicación de colores neutros o pasteles en general y colores vivos en aquellas zonas en las que deseemos que nuestros visitantes se enfoquen. Utilicen este recurso con moderación.
3. Utilizar un máximo de tres colores para el texto de una página. Más colores distraerán al usuario, en vez de concentrarlo en la lectura.
4. Utilizar efecto de contraste de luminancia para textos de enlace web junto con algún efecto visual tales como subrayado, o cambiar el estilo de la fuente (negrita o itálica) o incrementar el tamaño de la fuente, cuando el usuario ubica el ratón sobre el enlace. Por ejemplo:
   Los enlaces de hipertexto son de color azul medio (#3366CC) y el color del texto es negro (#000000). Debido a que el azul es lo suficientemente claro, el contraste de luminencia es > 0.50 con respecto al texto que le rodea y puede ser identificado como diferente por personas con todo tipo de dificultades de visibilidad, incluyendo a los que no pueden ver los colores.

Qué no hacer con los colores del texto en la web

• Evitar combinaciones de colores que tienen valores parecidos de luminancia, que harán muy difícil la lectura del texto para ser percibida por el ojo humano. Por ejemplo, en estos dos casos, el contraste es muy bajo:

1. Evitar caer en combinación de colores estridentes, demasiado brillantes o agresivos, que dificulten la lectura y cansen a la vista. Por ejemplo:

Esto es una letra de color estrindente

1. Evitar el uso de colores opuestos de la rueda cromática, en sus tonos fuertes, para el texto y el fondo en párrafos largos, es decir, evitar el uso de colores complementarios en tonos fuertes que puedan ser difíciles de percibir por el ojo humano y cansan lo vista por períodos largos. El uso de colores complementarios si se aconseja en caso que el fondo sea un tono claro y el texto un tono oscuro. Por ejemplo:

Esta combinación no es adecuada para ser utilizada en párrafos largos. Cansan la vista

Esta combinación no es adecuada para ser utilizada en párrafos largos. Cansan la vista

1. Evitar el uso de combinación de tonos de verde/rojo o rojo/verde para textos/fondo, debido a que el texto en este tipo de combinación, sería difícil de percibir por la personas daltónicas. Verían todo del mismo color. Por ejemplo, los siguientes cuadros de colores los verían del mismo color:

Esta combinación de colores para letra y fondo sería muy difícil de percibir por los daltónicos

Esta combinación de colores para letra y fondo sería muy difícil de percibir por los daltónicos

Conlusiones:

Es muy importante conocer cuáles son las reglas más importantes que nos permiten utilizar los colores en los textos que se muestran en Internet. Conocer qué permite que tenga el suficiente contraste (luminancia), los colores adecuados, que sean percibidos como fácil lectura por todo tipo de personas, incluyendo las personas que no perciben los colores o que son daltónicos. Nuestra web debe ser accesible a todo tipo de público, especialmente si es una web educativa.

Y tu, ¿qué piensas?

Más información:

Luminancia: http://es.wikipedia.org/wiki/Luminancia

Luminancia (en Inglés): http://nemesis.lonestar.org/reference/internet/web/color/luminance.html

Encontrar los colores complementarios y análogos: http://www.colorsontheweb.com/colorwizard.asp

Colores en la web y sus códigos: href=”http://es.wikipedia.org/wiki/Colores_web#Tabla_de_colores

Lista de colores con sus códigos y nombres: http://gucky.uni-muenster.de/cgi-bin/rgbtab-en

 

¿ Te gustó este artículo? Suscríbete a mi boletín para recibir más información como ésta. http://www.academia-interactiva.com/suscribir/

Tags: color, complementarios, cromático, texto, web

Category: Diseño