O Desafio
O projeto das Loterias Caixa enfrentava problemas de inconsistência visual e riscos de processos legais devido à falta de acessibilidade. Uma análise heurística revelou que diversos elementos de UI não passavam nos critérios básicos da WCAG 2.1 (AA), comprometendo a experiência de milhões de usuários com baixa visão.
A Causa Raiz
O diagnóstico técnico apontou que o problema não era apenas estético, mas estrutural: ausência de Design Tokens. Cores eram aplicadas via Hexadecimal direto no código ("hard-coded"), gerando débitos técnicos, dificultando a manutenção em escala e criando variações indesejadas da marca.
A Solução Sistêmica?
Não apenas "ajustamos as cores". Criamos uma arquitetura semântica. Em vez
de usar nomes como "Azul Escuro", passamos a usar tokens funcionais como
$brand-quina-primary. Isso garante que a correção visual se propague por todo o
sistema automaticamente, garantindo a integridade do Design System.
Resultado Imediato
Aprovação de 100% nos validadores de contraste (WCAG AA e AAA) para textos críticos. Além disso, a criação do manual de referência para desenvolvedores reduziu drasticamente o tempo de implementação de novas telas e o retrabalho em QA.
Estudo de Contraste & Validação
+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
Design Tokens & Semântica
Através da organização estruturada do arquivo no Figma, foi possível criar tokens globais que garantem a padronização total dos layouts. Isso eliminou erros de inconsistência visual e facilitou a escalabilidade para todas as modalidades.
mega-sena
$brand-mega-primary
#009B63
$brand-mega-secondary
#00AB67
lofácil
$brand-loto-primary
#702A82
$brand-loto-secondary
#7F2992
quina
$brand-quina-primary
#005DA4
$brand-quina-secondary
#004E8A
lotomania
$brand-mania-primary
#E67200
$brand-mania-secondary
#F79710
timemania
$brand-time-primary
#FFDA2B
$brand-time-secondary
#2D8563
dupla sena
$brand-dupla-primary
#A63055
$brand-dupla-secondary
#C63A66
super sete
$brand-super-primary
#5BA616
$brand-super-secondary
#99C02E
dia de sorte
$brand-dia-primary
#B09209
$brand-dia-secondary
#DBB612
+milionária
$brand-mili-primary
#332A62
$brand-mili-secondary
#2C3682
loteca
$brand-loteca-primary
#ED1C24
$brand-loteca-secondary
#C61017
Impacto no Negócio
Mitigação de Risco Legal
Ao adequar os produtos digitais às normas da WCAG (Web Content Accessibility Guidelines), reduzimos drasticamente a exposição da Caixa a processos judiciais baseados na Lei Brasileira de Inclusão (LBI), garantindo conformidade regulatória para uma empresa pública.
Eficiência Operacional (Design Ops)
A criação dos Design Tokens e da documentação semântica eliminou o "chute" no desenvolvimento. Isso reduz o tempo de QA (Controle de Qualidade) e refatoração, permitindo que os desenvolvedores implementem novas telas até 30% mais rápido sem dúvidas sobre qual hexadecimal usar.
Ampliação de Mercado
No Brasil, cerca de 18,6 milhões de pessoas possuem algum tipo de deficiência visual (IBGE). Melhorar o contraste não é apenas inclusão, é permitir que uma fatia significativa da população consiga realizar apostas de forma autônoma, impactando diretamente a receita dos canais digitais.
Consistência de Marca
A padronização visual fortalece a confiança na marca. Um ecossistema digital coeso transmite segurança, fator crítico para produtos financeiros e de apostas, reduzindo a fricção cognitiva e aumentando a taxa de conversão em novos jogos.
Fale Comigo!
Se você tem uma ideia, uma vaga ou só quer trocar uma figurinha, me manda uma mensagem.