Guia do Cerrado

O desafio

Era uma atividade de paletas de cores e WCAG: montar uma interface pequena com as cores escolhidas e provar que todo texto era legível. Virou um site inteiro, sem abrir mão da regra.

O que foi feito

• Começou como um estúdio de fotografia de fauna que não existe e virou um guia do Cerrado, em português primeiro: o bioma, as 11 paisagens, 70 espécies, a água, os povos, as ameaças e um quiz, com 32 fontes numeradas.
• Seis páginas de um estúdio de fotografia de fauna que não existe: galeria com filtro e foto ampliada, expedições com perguntas frequentes, sobre e contato.
• Nas Expedições, a pessoa escolhe o mês e vê como está o cerrado e quais saídas estão na melhor época; na galeria, passa de uma foto ampliada para a outra pelas setas ou deslizando o dedo.
• Uma ficha para cada espécie, com a comparação de tamanho com uma pessoa, um diário de campo, um mapa dos três parques, um testador de contraste das cores da paleta e o contato que já chega com a expedição e o mês escolhidos.
• A paleta saiu do próprio bioma, o marrom do tronco, o capim seco e a terra, e cada cor tem o contraste medido na página Sobre.
• Modo claro e escuro, que segue o sistema e lembra a escolha, sem a página clara piscar ao abrir.
• Fotos livres do Wikimedia Commons, com o autor e a licença de cada uma numa página de créditos.

Por dentro

• HTML, CSS e JavaScript sem biblioteca e sem nenhum estilo dentro do HTML.
• Todo texto acima de 4,5:1 nos dois modos, foco visível e menu que funciona pelo teclado.
• 13 idiomas, com o formulário de demonstração respondendo no idioma da página.