Rediseño HA! (Parte 4 — El color)
Traducción al español del cuarto post, escrito en tiempo real, sobre el rediseño de la web historia-arte.com. Ver la versión original en gallego
El color es un elemento fundamental en HA! que se utiliza para darle más carácter y personalidad a los comentarios de las obras de arte. Cada ficha consta de dos colores, uno para el texto y otro para el fondo. Hasta ahora esta elección la hacíamos cualquiera de nosotros, un poco a ojo, pero aprovechando este rediseño, quise hacer un repaso de los colores empleados para detectar posibles problemas.
Dentro de los estándares web hai un apartado llamado WCAG (Web Content Accessibility Guidelines) que incluye una amplia lista de recomendaciones para mejorar la accesibilidad web. Dentro de estas recomendaciones podemos encontrar una sección dedicada al uso del color y, en concreto, al contraste mínimo que debe haber entre el fondo y el texto. Para medir ese contraste se utiliza un número que oscila dende 1 (sin ningún contraste) hasta 21 (máximo contraste). Si el número es igual o mayor a 4.5, se dice que el contraste tiene un nivel “AA”, lo que significa que es legible para la mayoría de las personas, aunque queda un número reducido con ciertas limitaciones visuales para los que este contraste resulta insuficiente. Si la diferencia es igual o mayor a 7, el nivel es “AAA”, lo que significa que el contraste es suficiente para todos. Ese es el nivel que queremos conseguir en HA!, para hacerla lo más inclusiva posible.
Para calcular el contraste podemos echar mano de herramientas como la creada por Lea Verou que, despues de indicar los colores de texto y fondo, nos devuelve el valor del contraste resultante. Aunque esto nos va resultar muy útil para los nuevos contenidos introducidos a partir de ahora, no es tan práctico para los contenidos anteriores, ya que revisar, una a una, las más de 600 obras que hay actualmente, puede ser bastante tedioso así que debemos automatizar.
Automatizando la comprobación de colores
Para detectar los contrastes de colores empleados hasta ahora, exporté los datos de la base de datos a formato csv y creé un script que calcula el contraste de cada combinación, mostrando los casos que no cumplen el estándar. El resultado se ve más o menos así :
El script encontró 117 casos problemáticos, considerando que actualmente hay 657 obras comentadas, equivale casi al 18% de las obras. Además, de esas 117 hay 42 que ni siquiera cumplen el nivel “AA”, por lo que son los casos más graves.
Así que no hubo más remedio que ir caso por caso, ajustando los colores para que tuviesen un contraste de 7 o superior. El caso más extremo lo encontré en la obra Arlequín con espejo, que tenía un contraste de solo 2,3 y que conseguí subir a un cómodo 10,7 despues de oscurecer el fondo.
También había otros casos donde el contraste estaba cerca del 7 por lo que sólo le faltaba un pequeño empujón para conseguir un resultado más redondo.
Casi todos los colores seleccionados fueron extraídos del propio cuadro, como se puede intuir en los ejemplos. Pero había casos en los que los colores no estaban bien seleccionados. En el siguiente ejemplo, la imagen no está exactamente recortada, sino que existe un pequeño margen blanco. Lo mejor para disimularlo sería que el fondo de la página también fuese blanco.
También había casos en los que el color seleccionado no era lo suficientemente representativo del cuadro.
El proceso de revisión de colores abarcó, por ahora, los casos que no cumplían el mínimo contraste necesario para el nivel “AAA” de accesibilidad. También se podrían revisar el resto de casos para corregir colores que, aunque tengan un contraste suficiente, pueden necesitar bajar algo la saturación, disimular un borde blanco de la imagen o escoger un color más acorde. Seguramente sea una labor que se pueda ir haciendo poco a poco, ahora que los casos más graves ya están solucionados.
La guinda del pastel
Otro detalle que aproveché para introducir fue el de colorear dinámicamente el favicon de la web usando estos mismos colores. Es un detalle mínimo, imperceptible para mucha gente, pero que ayuda a ampliar el significado e influencia del color dentro de todo sitio.
Y esto fue todo lo que dieron de si estas últimas semanas. Fue un proceso de revisión de colores bastante rutinario pero reconozco que muy entretenido. También se puede ver en las capturas el logotipo de HA!, situado en la esquina superior izquierda, empleando el mismo color del texto menos cuando coincide encima de la imagen, que cambia a blanco.
