Úsalo: Usabilidad y Accesibilidad para el diseño web. Usabilidad para todos

La Colour Contrast Analyser Firefox Extension es una extensión para Firefox que, como todas, se instala en un momento y te permite, con sólo pulsar el botón derecho del ratón, detectar de un vistazo los problemas de contraste de la página en la que estés en ese momento.

Se abrirá una nueva pestaña, en la que una tabla te mostrará un desglose de tu hoja de estilo, destacando visualmente los elementos de color que no superan el test, ya sea en cuanto a contraste, brillo o diferencia de color.

Lo bueno es que en un momento te muestra una lista con los fallos concretos que hay en cuanto a contraste.

Lo malo es que la herramienta no perdona. Es muy fácil que te regañe y te haga saltar los colores.

Los aprobados o suspensos se dan en base a una fórmula, en la que los valores mínimos para superar el test son:

• Luminosidad. 5:1 para el nivel 2 de la directriz 1.4, y 10:1 para el nivel 3.
• Brillo: 125
• Diferencia de Color: 500

Probamos a pasar el test completo a nuestra página y, ejem, saltaron unas cuantas alarmas.

Los principales fallos detectados para Úsalo fueron:

• El color de los enlaces. Un primer plano con un tono de azul (#0066ff) sobre blanco con falta de luminosidad (4.83) y diferencia de color (408), aunque suficiente brillo (166).
• El color del texto normal de la barra de navegación lateral es un gris (#999999) sobre blanco. Falla en luminosidad (2.8), brillo (102) y color (306).

Ese mismo color (#999999) se utiliza también para otros elementos textuales de la página, si bien en ellos la atenuación de color es intencional, buscando que el contraste sea máximo en lo más importante (el texto de cada artículo) y menor en las partes secundarias (fecha, hora, alias del autor…). Por supuesto, la intención no era hacerlo ilegible, sino atenuarlo para destacar lo más importante.

También falla, aunque por muy poco, el contraste de la cita (blockquote). Usamos para el texto de cita en primer plano un #666666 sobre un fondo gris con valor #f9f9f9, lo que genera un pequeño fallo en cuanto a diferencia de color (441).

Queda pendiente, por tanto, mejorar el color del enlace y del texto normal de la barra de navegación para hacerlos plenamente visibles, aunque sigan estando atenuados respecto al texto principal.

También debemos mejorar ligeramente la diferencia de color usada en las citas.

En segundo lugar, aunque menos prioritario, habría que mejorar la visibilidad de los textos del alias del autor, la fecha, etc. aunque intencionadamente le demos menos intensidad visual que al resto.

Este es el aspecto de una captura de pantalla antes de proceder a los ajustes:

Es lo que tienen las herramientas automáticas, que cuando pueden medir algo lo hacen de forma implacable, sin favoritismo alguno.

Como aquí pretendemos predicar con el ejemplo bueno será que mejoremos esa cuestión.

Actualizado 22/02/06:
Hemos retocado algunos colores, los que considerábamos clave de entre los que fallaban. Aún salen algunos fallos de contraste, pero en elementos que intencionalmente queremos atenuar (el texto con la fecha y alias del autor, p.e.). La cuestión es si es de radicales o no el retocar eso también o si está bien así como está ahora. ¿Qué opináis?.