Acessibilidade
Erros comuns que violam a identidade Fluxr. Qualquer componente que viole estas regras deve ser corrigido antes do deploy.
Razões calculadas no build. Se um par documentado cair abaixo de AA, o build quebra.
| Par | Papel | Mínimo | Uso | |
|---|---|---|---|---|
| Aa | texto | 18.92:1 | 4.5:1 | Texto principal sobre o fundo do site |
| Aa | texto | 7.72:1 | 4.5:1 | Subtítulos e descrições |
| Aa | texto | 15.33:1 | 4.5:1 | Lime como texto de destaque no tema escuro |
| Aa | texto | 14.26:1 | 4.5:1 | Texto dentro do botão lime |
| Aa | texto | 8.35:1 | 4.5:1 | Texto sobre o preenchimento lime do tema claro |
| Aa | texto | 4.58:1 | 4.5:1 | Lime como LETRA sobre branco |
| Aa | ui | 3.06:1 | 3:1 | Borda, ícone e anel de foco sobre branco |
Anel lime obrigatório em todo elemento acionável. Foco invisível é falha, não estilo.
Visual
Começar Agora
outline: none
Ver Demo
Com prefers-reduced-motion a interface entrega o estado FINAL, não uma versão mais lenta.
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}Mínimo 44×44px em qualquer controle tocável. No celular o dedo não acerta 32px.
32px44px56px
Um h1 por página, hierarquia sem saltos, landmarks reais, alt em toda imagem com conteúdo.
cursor:default em clicável
Todo elemento interativo deve ter cursor:pointer. Sem exceção.
Focus states invisíveis
Obrigatório para a11y. Usar box-shadow com rgba(var(--brand-primary-rgb),0.3).
Contraste insuficiente
Mínimo 4.5:1 WCAG AA. Testar com ferramentas de contraste.
Scroll horizontal mobile
Toda tela deve ser testada em 375px. overflow-x:hidden no body.
Conteúdo sob nav fixa
Verificar padding-top suficiente quando navbar é sticky/fixed.
Visual
☐ Sem emojis como ícones (usar SVG)
☐ Ícones de set consistente (Lucide/Heroicons)
☐ cursor-pointer em todos os clicáveis
☐ Hover states com transições 150–300ms
☐ Contraste mínimo 4.5:1
☐ Lime #C3F400 como primária; sem accent roxo
☐ Tema claro: lime de preenchimento é #8DBE22, nunca #C3F400
☐ Background correto (#0a0a0a / #0B0F19)
Técnico / A11y
☐ Focus states visíveis (teclado)
☐ prefers-reduced-motion respeitado
☐ Responsivo: 375px, 768px, 1024px, 1440px
☐ Sem scroll horizontal no mobile
☐ Sem conteúdo sob navbar fixa
☐ Console.log removido (produção)
☐ Rotas em inglês, conteúdo via i18n