Fundamentos
Acessibilidade
WCAG 2.1 AA é o piso de todos os produtos. Os pares de cor do Constela são conferidos por teste automático a cada versão (npm test), nos dois temas.
Contraste
- Texto: 4,5:1. Texto grande (24px ou mais, ou 19px em negrito): 3:1.
- Bordas de controle, ícones que carregam significado e anel de foco: 3:1.
| Par | Claro | Escuro |
|---|---|---|
text-primary sobre bg-page | 16,98:1 | 18,30:1 |
text-secondary sobre bg-surface | 4,83:1 | 6,99:1 |
link sobre bg-surface | 5,15:1 | 6,90:1 |
on-action-primary sobre action-primary | 5,15:1 | 7,83:1 |
on-action-accent sobre action-accent | 8,26:1 | 12,06:1 |
on-action-danger sobre action-danger | 4,83:1 | 7,28:1 |
table-header-text sobre table-header-bg | 8,88:1 | 10,05:1 |
focus-ring sobre bg-surface | 3,70:1 | 6,90:1 |
Foco
Todo elemento interativo mostra foco: outline: 2px solid var(--focus-ring) com outline-offset: 2px. Nunca remova o outline sem colocar outro indicador no lugar. Sobre fundo teal escuro, use anel branco.
Regras
- Cor nunca é o único indicador. Status sempre tem texto; erro sempre tem ícone e mensagem.
- Todo campo tem label visível. Use
aria-labelsó quando não houver label visual possível. - Mensagens de erro são anunciadas com
aria-live="polite". - Alvos de toque têm no mínimo 44 por 44px no mobile (
touch-target). - Ícone sozinho precisa de
aria-label. - Teste com teclado (Tab, Enter, Esc) antes de publicar.