Acessibilidade e contraste
Contraste adequado garante que todos os alunos leiam o conteúdo — verifique antes de publicar.
Por que acessibilidade importa
Cerca de 8% dos homens e 0,5% das mulheres têm algum grau de daltonismo. Além disso, pessoas acessando de celulares sob luz solar forte precisam de contraste mais alto para enxergar o conteúdo. Configurar a identidade visual pensando em contraste não é apenas uma boa prática de design — é uma exigência crescente de compliance e amplia o alcance do conteúdo.
O padrão WCAG
O padrão internacional de acessibilidade para web (WCAG 2.1) define três níveis:
| Nível | O que exige | |---|---| | A | Requisitos mínimos de contraste | | AA | Contraste 4,5:1 para texto normal, 3:1 para texto grande — recomendado | | AAA | Contraste 7:1 — excelente para conteúdo crítico |
A evob recomenda atingir o nível AA como padrão mínimo.
Como verificar o contraste
Opção 1 — Ferramentas online
- contrast-ratio.com — insira a cor do texto e do fundo
- coolors.co/contrast-checker — verificação visual em tempo real
- webaim.org/resources/contrastchecker
Opção 2 — DevTools do Chrome
- Abra a vitrine da loja no Chrome
- Clique com o botão direito em um elemento de texto e selecione "Inspecionar"
- No painel de estilos, clique no swatch de cor do texto
- O Chrome exibe automaticamente a taxa de contraste com o fundo
Checklist de acessibilidade para a evob
| Elemento | Verificação | |---|---| | Texto sobre a cor primária (botões) | Contraste mínimo 3:1 com texto branco | | Texto corrido sobre fundo branco | Cores de texto escuras (não cinza claro) | | Links | Distinguíveis do texto por cor E por sublinhado | | Campos de formulário | Bordas visíveis — não confiar apenas na cor | | Estados de erro | Não use apenas vermelho — adicione ícone ou texto | | Imagens informativas | Alt text descritivo |
Problemas comuns de contraste por cor
| Cor primária problemática | Problema | Correção | |---|---|---| | Amarelo claro (#FCD34D) | Texto branco sobre amarelo tem contraste < 1,5:1 | Use texto preto ou escureça o amarelo | | Laranja médio (#FB923C) | Contraste borderline com texto branco | Escureça para #EA580C (contraste 3:1) | | Verde claro (#86EFAC) | Muito baixo contraste para texto | Use apenas como cor de destaque, não em botões com texto | | Cinza claro (#D1D5DB) | Ilegível como cor principal de texto | Use cinza escuro (#374151) para texto |
Boas práticas
✅ Faça
- Verifique o contraste da cor primária com texto branco antes de salvar
- Use a ferramenta de inspeção do Chrome para checar elementos específicos na vitrine publicada
- Considere o acesso mobile sob luz solar — contrastes que parecem OK no monitor calibrado podem ser insuficientes em telas menores ao ar livre
❌ Não faça
- Usar cor como único diferenciador visual (ex: campo obrigatório marcado só em vermelho) — adicione rótulo ou ícone junto
- Confiar apenas na sua percepção de cor — peça para alguém com monitor diferente avaliar
- Ignorar acessibilidade em elementos do AVA como progresso, badges e certificados
Erros comuns
"Minha cor primária é amarela e é a identidade da marca — o que faço?"
Use amarelo apenas em elementos decorativos (banners, fundos de seção). Para botões de ação, use texto preto sobre amarelo (contraste melhor) ou crie uma variante mais escura do amarelo para botões. Muitas marcas com identidade amarela usam o amarelo como cor de destaque mas não como cor de botão.
"O preview mostra tudo bem mas alunos reclamam que está difícil de ler"
Cada monitor tem calibração diferente. O que parece confortável no monitor de design pode ter baixo contraste em monitores mais baratos. Teste em um monitor comum (não calibrado) ou use as ferramentas de verificação de contraste.
"Quero melhorar a acessibilidade mas não posso mudar a cor da marca"
Você pode manter a cor primária para elementos decorativos e usar uma versão mais escura (ou mais clara) especificamente para os elementos interativos (botões, links) via CSS personalizado em Loja > Aparência > CSS personalizado.
"Há um requisito legal de acessibilidade no Brasil?"
A Lei Brasileira de Inclusão (LBI, Lei 13.146/2015) e o decreto 5.296/2004 estabelecem requisitos de acessibilidade para serviços na internet. Para operações com foco em instituições públicas ou educação corporativa, o cumprimento do WCAG AA é especialmente relevante.
Próximos passos
- 📖 Cor primária — impacto na interface
- 📖 Paleta de cores — guia completo
- 📖 Tipografia personalizada
- 📖 Preview de identidade visual
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-06