Gracias a un mensaje publicado en la lista de correo sobre accesibilidad en castellano, tacho de mi imaginaria lista de temas pendientes por tratar en este blog, un interesante asunto sobre accesibilidad web, los colores, o para ser más exacto: el óptimo contraste entre colores.
El Consorcio de la Web, en uno de sus documentos sobre accesibilidad (Techniques For Accessibility Evaluation And Repair Tools), menciona dos algoritmos para medir el brillo de un color, y el contraste entre dos colores combinados, el de fondo y primer plano.
- Brillo de un color
- ((valor de Rojo X 299) + (valor de Verde X 587) + (valor de Azul X 114)) / 1000
- Contraste entre dos colores:
- (máximo (valor Rojo 1, valor Verde 2) – mínimo (valor Rojo 1, valor Rojo 2)) + (máximo (valor Verde 1, valor Verde 2) – mínimo (valor Verde 1, valor Verde 2)) + (máximo (valor Azul 1, valor Azul 2) – mínimo (valor Azul 1, valor Azul 2))
Según la fórmula del brillo, un valor mayor que 125 sería adecuado.
Según la fórmula del contraste, un valor mayor que 500, ofrecería un contraste óptimo entre el color de fondo y el del primer plano.
Observación: los valores para Rojo, Verde y Azul se corresponden al valor decimal del código hexadecimal RGB de cada color. Por ejemplo, el color expresado en hexadecimal #0000FF, descompuesto en cada uno de sus colores primarios (Rojo, Verde y Azul), sería:
00para el rojo (los dos primeros dígitos hexadecimales). Este número pasado al código decimal sería "0".00para el verde (tercer y cuarto dígitos hexadecimales). Al igual que antes, en código decimal sería "0".FFpara el azul (dos últimos dígitos hexadecimales). Pasado a código decimal, sería "255"
Después de toda esta formulación matemática, usaremos un par de ejemplos que nos ayudarán un poquito más, je je:
- Ejemplo de buen contraste entre el texto y el color de fondo (texto de color blanco, fondo de color azul):
- Ejemplo de insuficiente contraste entre el texto y el color de fondo (texto de color gris, fondo de color verde):
Exceptuando aquellas personas que tienen una discapacidad visual cercana a la ceguera, la mayoría de las personas pueden distinguir perfectamente el texto del fondo en el primer ejemplo (texto de color blanco, fondo de color azul). De hecho, es uno de las combinaciones de colores más accesibles.
No podemos decir lo mismo del segundo caso (texto de color gris, fondo de color verde), ya que se trata de colores próximos y no tiene suficiente contraste.
Basándose en las fórmulas anteriores, existen un puñado de buenas herramientas que nos ayudarán a comprobar si el contraste de los colores que usamos es bueno, o puede provocar problemas a ciertos usuarios. Son las siguientes:
- Analizador del Contraste de Color
-
Es una herramienta para comprobar las combinaciones de color de primer plano y color de fondo con el fin de determinar si proveen buena visibilidad del color.
- Calculador de contraste del color
-
Se trata de un "favelet", creado por Vincent Tabard, o script que puede ejecutarse como "bookmark" o enlace a favoritos desde el navegador.
- Colour Contrast Check
-
The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast «when viewed by someone having color deficits or when viewed on a black and white screen»[W3C].
Si alguna vez, como usuarios, nos encontramos con este problema (poco contraste entre el color del texto y el fondo, o el color de texto y una imagen), siempre podemos configurar nuestro navegador para que nuestras preferencias sobre los colores, se impongan sobre las del diseñador de la página en cuestión. Por ejemplo, usando nuestra propia hoja de estilos, forzando a que el texto y el fondo sea de los colores que nosotros queramos, e incluso desactivar los estilos. Si la página está bien hecha (o al menos, no demasiado mal), por lo menos podremos acceder al contenido. Que es lo importante.
Otro día, hablaremos de las discapacidades visuales relacionadas con la ceguera de colores.