Redeseño HA! (Parte 4 — A cor)
Cuarto post, dunha serie escrita en tempo real, sobre o redeseño da web historia-arte.com
Ver versión traducida al español
A cor é un elemento fundamental en HA! que se emprega para darlle máis carácter e personalidade aos comentarios das obras de arte. Cada ficha consta de dúas cores, unha para o texto e outra para o fondo. Ata agora esta elección faciámola calquera de nós un pouco a ollo, pero aproveitando este redeseño, quixen tamén facer un repaso das cores que se están empregando e detectar posibles problemas.
Dentro dos estándares web hai apartado chamado WCAG (Web Content Accessibility Guidelines) que inclúe unha ampla lista de recomendacións pensadas para mellorar a súa accesibilidade. Dentro destas recomendacións podemos atopar un apartado adicado ao uso da cor e, en concreto, ao contraste mínimo que debe haber entre o fondo e o texto. Para medir ese contraste emprégase un número que oscila dende 1 (sen ningún contraste) ata 21 (máximo contraste). Se o número é igual ou maior a 4.5, dise que o contraste ten un nivel “AA”, o que significa que é lexible para a maioría da xente, aínda que existe un número minoritario de persoas con certas limitacións visuais para os que ese contraste resulta insuficiente. Se a diferencia é igual ou maior a 7, o nivel é “AAA”, o que significa que o contraste é suficiente para todas as persoas. Ese é o nivel que queremos acadar en HA!, para que sexa o máis inclusiva posible.
Para calcular o contraste podemos botar man de ferramentas como a creada por Lea Verou que, despois de indicarlle as cores empregadas para o texto e o fondo, danos o valor do contraste resultante. Aínda que nos vai resultar moi útil á hora de introducir novos contidos, non é tan práctica para os contidos anteriores, xa que revisar, unha a unha, as máis de 600 obras que hai actualmente, pode ser bastante tedioso así que debemos automatizar.
Automatizando a comprobación de cores
Para detectar os contrastes de cores empregados ata agora, exportei os datos da base de datos a formato csv e creei un script que calcula o contraste de cada combinación, mostrando os casos que non cumpren o estándar. O resultado vese máis ou menos así :
O script atopou 117 casos problemáticos, considerando que actualmente hai 657 obras comentadas, iso equivale case ao 18% das obras. Ademais, desas 117 hai 42 que nin sequera cumpren o nivel “AA”, polo que son os casos máis graves.
Así que non tocou outra que ir caso por caso, axustando as cores para que tiveran un contraste de 7 ou superior. O caso máis extremo atopeino na obra Arlequín con espejo, que tiña un contraste de 2,3 e que subín a un cómodo 10,7 despois de escurecerlle o fondo.
Tamén había outros casos onde o contraste estaba preto do 7 e solo lle faltaba un pequeno empuxón para conseguir un resultado redondo.
Case todas as cores seleccionadas foron extraídas do propio cadro, como se pode intuír nos exemplos. Pero había casos en que as cores non estaban ben seleccionadas. No seguinte exemplo, a imaxe non está exactamente recortada, senón que existe un pequeno marxe branco. O mellor para disimulalo sería que o fondo da páxina tamén fose branco.
Tamén hai casos en que a cor seleccionada non era o suficientemente representativa do cadro.
O proceso de revisión de cores abarcou, polo de agora, os casos que non cumprían o mínimo contraste necesario para o nivel “AAA” de accesibilidade. Tamén se poderían revisar o resto de casos para corrixir cores que, aínda que teñan un contraste suficiente, poden precisar de menos saturación ou disimular o bordo branco da imaxe ou escoller unha cor máis acorde coa imaxe. Seguramente sexa unha labor que se poida ir facendo aos poucos, agora que os casos máis graves xa están corrixidos.
A guinda do pastel
Outro detalle que aproveitei para introducir foi o de colorear dinamicamente o favicon da web usando estas mesmas cores. É un detalle mínimo, imperceptible para moita xente, pero que axuda a ampliar o significado e influencia da cor dentro de todo sitio.
E isto foi todo o que deron de si estas últimas semanas. Foi un proceso de revisión de cores bastante rutinario pero recoñezo que moi entretido. Tamén se pode ver nas capturas o logotipo de HA!, situado na esquina superior esquerda, empregando a mesma cor do texto agás cando coincide encima da imaxe, que cambia a branco.
