07 · Marca
Acessibilidade
O critério mínimo
A Innova adota WCAG 2.2 nível AA como critério mínimo em qualquer aplicação digital. Isso significa contraste de 4.5:1 em texto corrido, 3:1 em texto grande (a partir de 18pt regular ou 14pt bold) e em componentes de interface (botões, ícones de UI, bordas que transmitem informação).
Em peças de marca (capas, hero, materiais editoriais), a régua é a mesma — só o vocabulário muda: contraste suficiente para que o texto continue legível em monitor calibrado, em projeção e em impresso.
Contraste entre cores da paleta
Pares mais comuns da paleta institucional, com a razão de contraste já calculada. Use a tabela como triagem rápida — para pares fora dela, valide em WebAIM Contrast Checker.
| Texto | Fundo | Razão | AA texto normal | AA texto grande | Amostra |
|---|---|---|---|---|---|
| Preto #000000 | Branco #FFFFFF | 21.0:1 | Passa | Passa | Aa |
| Branco #FFFFFF | Carvão #272831 | 14.6:1 | Passa | Passa | Aa |
| Branco #FFFFFF | Brasa #E75B10 | 3.7:1 | Reprova | Passa | Aa |
| Branco #FFFFFF | Brasa Forte #C94A0A | 5.0:1 | Passa | Passa | Aa |
| Carvão #272831 | Creme #E3DFDC | 11.6:1 | Passa | Passa | Aa |
| Carvão #272831 | Tinta #FCE5D5 | 13.6:1 | Passa | Passa | Aa |
| Brasa #E75B10 | Branco #FFFFFF | 3.7:1 | Reprova | Passa | Aa |
| Brasa Forte #C94A0A | Branco #FFFFFF | 5.0:1 | Passa | Passa | Aa |
| Brasa #E75B10 | Carvão #272831 | 3.9:1 | Reprova | Passa | Aa |
Brasa sobre Branco (3.7:1) reprova AA em texto normal — use apenas em texto grande, ou substitua por Brasa Forte sobre Branco (5.0:1) em texto corrido. Mesma regra vale para Brasa sobre Carvão: preserve para acentos visuais (palavra grifada em headline, ícone), nunca para parágrafos.
Tamanhos mínimos de texto
- Corpo de texto — não menos que 16px (1rem) em tela. Em material impresso, 9pt.
- Caption / texto auxiliar — não menos que 13px
em tela.
text-smallno sistema (=13px). - Eyebrow / kicker — 12px é o mínimo absoluto.
Abaixo disso, em uppercase com tracking largo, vira ilegível
para muita gente.
text-eyebrow-sm(10.4px) é uma exceção reservada a metadata muito discreta — não use em conteúdo principal. - Logotipo — 32px de altura em tela, 10mm em impresso. Documentado em Regras e usos.
Alt-text em imagens
Toda imagem que não seja puramente decorativa precisa de
alt descritivo. Imagens decorativas levam
alt="" (vazio) ou
aria-hidden="true".
Descreva o que a imagem comunica, não o que ela é.
"Vendedora apresentando catálogo de persianas a cliente em loja" é melhor que "foto de loja".
Em logos, use o nome da marca como alt.
Ex.: <code>alt="Innova"</code>. Não escreva "logo da Innova" — leitor de tela já anuncia que é uma imagem.
Em ícones de UI, descreva a ação ou função.
Ícone de carrinho → <code>aria-label="Carrinho de compras"</code>. Ícone decorativo → <code>aria-hidden="true"</code>.
Repetir o texto adjacente no alt.
Se a imagem ilustra uma legenda já visível, use alt vazio para não duplicar.
Usar "imagem de", "foto de" como prefixo.
O leitor de tela já anuncia o tipo do elemento.
Deixar imagens sem alt no markup.
Sem <code>alt</code>, o leitor de tela lê o nome do arquivo — péssimo. Sempre defina, mesmo que vazio.
Cor não pode ser o único canal
Sempre que uma cor transmitir informação (estado, prioridade, categoria), reforce com um segundo canal: ícone, texto, posição ou padrão. Pessoas com daltonismo, monitores mal calibrados e impressões em P&B precisam do segundo canal para entender.
- Estados de feedback (success/warning/error) levam o ícone de Material Symbols correspondente, não só a cor.
- Em gráficos, use padrão (linhas tracejadas, hachuras) além de cor diferente.
- Links em texto corrido têm underline além da cor — nunca apenas cor.
Movimento e prefers-reduced-motion
Toda animação automática (loops, parallax, autoplay, transições
longas) precisa respeitar a preferência
prefers-reduced-motion: reduce do sistema operacional.
Hoje a única animação automática do manual — a construção do
símbolo em Construção — segue essa
regra: o holofote é suprimido quando o usuário pediu menos
movimento.
Em peças novas, a regra é: se a animação durar mais de 5s, tiver loop, ou cobrir mais de um terço da tela, ela precisa de fallback estático para reduced-motion.
Foco visível
Todo elemento interativo (link, botão, input, card clicável)
precisa mostrar um foco visível quando recebe a
navegação por teclado. O daisyUI já entrega isso por padrão nos
componentes btn, menu,
input; em elementos custom, garanta que o
:focus-visible tem outline ou ring perceptível
(mínimo 2px, contraste AA).
Nunca remova o outline com outline: none sem
substituir por outro indicador. Foco invisível torna o site
inutilizável por teclado.
Roadmap
Itens previstos para versões seguintes desta página:
- Auditoria automatizada de contraste rodando no build (axe-core ou similar).
- Tabela completa de todos os pares de cores da paleta (49 pares possíveis, hoje só os mais comuns aparecem).
- Diretrizes específicas de PDF acessível para o manual offline.
- Checklist de revisão acessível (uma página dedicada a validação manual antes de publicar peça nova).