Objetivo
Focamos este estudo na otimização do uso de cores para atender aos critérios da WCAG, aprimorando a acessibilidade. Uma análise de tarefas revelou a falta de consistência e padronização visual em diversas telas, tanto na interface do aplicativo quanto na versão para desktop.
O que foi usado?
Realizamos um mapeamento para entender a origem das inconsistências na prática. O diagnóstico revelou que, embora algumas modalidades tivessem passado por testes, as cores não foram devidamente ajustadas para a interface digital. Além disso, o mapeamento confirmou que não existia uma diretriz padronizada para a aplicação de cores, o que era a causa raiz dos problemas.
Na prática?
Antes do lançamento, algumas modalidades passaram por testes, mas não foram devidamente ajustadas, o que resultou em inconsistências. Identificou-se também que não existia uma diretriz padronizada para a aplicação de cores no design digital.
Futuro?
Nosso foco foi em mudanças sutis, mas capazes de gerar impacto significativo. Para promover uma transformação cultural no projeto, foi criado um manual de cores abrangente, garantindo a padronização e a conformidade digital a partir de agora.
Estudo de Contraste
+milionária
A +milionária atende todos os requisitos da WCAG e é aprovado no quesito de acessibilidade.
12.74:1
Simple Contrast (WCAG)
Normal Text
Large Text
lotofácil
A lotofácil também atende todos os requisitos da WCAG e é aprovado no quesito de acessibilidade.
8.96:1
Simple Contrast (WCAG)
Normal Text
Large Text
loteca
Alterando a cor original, foi possível alcançar 6.61:1, garantindo aprovação em todos os critérios.
6.61:1
Simple Contrast (WCAG)
Normal Text
Large Text
mega-sena
Com a cor sugerida pelo Manual Loterias Caixa foi possível alcançar a nota de 3.57:1
3.57:1
Simple Contrast (WCAG)
Normal Text
Large Text
A mudança é sutil para 4.5:1, porém o aumento do contraste é um ganho na visibilidade.
4.5:1
Simple Contrast (WCAG)
Normal Text
Large Text
Alterando a cor original, foi possível alcançar 7.15:1, garantindo aprovação em todos os critérios.
7.15:1
Simple Contrast (WCAG)
Normal Text
Large Text
lotomania
Com a cor original do manual, o contraste atingiu apenas 2.59:1, resultando em reprovação.
2.59:1
Simple Contrast (WCAG)
Normal Text
Large Text
Um primeiro ajuste, ainda seguindo o manual, elevou o contraste para 3.1:1, aprovando em textos grandes.
3.1:1
Simple Contrast (WCAG)
Normal Text
Large Text
O segundo ajuste de cor alcançou 4.51:1, garantindo aprovação no critério AA para todos os textos.
4.51:1
Simple Contrast (WCAG)
Normal Text
Large Text
Finalmente, a cor ideal atingiu 7.01:1, aprovando em todos os critérios de acessibilidade (AAA).
7.01:1
Simple Contrast (WCAG)
Normal Text
Large Text
super sete
Com a cor sugerida pelo Manual Loterias Caixa foi possível alcançar a nota de 2.14:1. A nota mais baixa entre todas as modalidades.
2.14:1
Simple Contrast (WCAG)
Normal Text
Large Text
Com a cor de sugestão ao lado é possível chegar ao nível AA do WCAG, e melhorando a visibilidade e contraste da modalidade.
3.4:1
Simple Contrast (WCAG)
Normal Text
Large Text
Alterando a cor da modalidade é possível chegar nas notas de AA e AAA apenas em textos maiores.
4.73:1
Simple Contrast (WCAG)
Normal Text
Large Text
Com a cor original da modalidade diferente da original é possível chegar
na nota de
7.19:1
Simple Contrast (WCAG)
Normal Text
Large Text
timemania
Timemania possui um contraste muito baixo principalmente por conta da cor amarela.
2.24:1
Simple Contrast (WCAG)
Normal Text
Large Text
Mesmo que seja feita a alteração de cor, ainda é difícil de ter uma boa visibilidade.
3.31:1
Simple Contrast (WCAG)
Normal Text
Large Text
As soluções apresentadas são limitadas, com essa combinação de cor não é possível chegar 7:1
4.65:1
Simple Contrast (WCAG)
Normal Text
Large Text
Resultado
Este estudo gerou melhorias diretas em pontos cruciais de usabilidade e acessibilidade. Além do impacto imediato na experiência do usuário, o projeto estabelece um legado duradouro através da documentação detalhada das novas cores, garantindo consistência e conformidade para o futuro do produto.
Fale Comigo!
Se você tem uma ideia, uma vaga ou só quer trocar uma figurinha, me manda uma mensagem.