Acessibilidade · XamiHub

Contrastes testados, focus rings visíveis e um checklist prático. Não é regra chata — é o mínimo pra quem não enxerga bem, usa teclado ou tá num notebook na luz do sol.

Contraste · pares testados

Lavender em InkTexto principal em dark

15.1 : 1AAA

Purple em InkLinks e acentos

4.6 : 1AA

Branco em Purple 500Botões primários

5.4 : 1AA

Ink em BrancoTexto light mode

18.9 : 1AAA

Purple em BrancoLinks em light

4.2 : 1AA

Lavender-400 em InkTexto secundário

5.8 : 1AA

Success em InkToasts de sucesso

11.2 : 1AAA

Danger em InkErros e destrutivos

7.9 : 1AAA

Focus rings · teclado

Outline clássico

Acessível, performante

Glow roxo

Identidade Xami

Dual ring

Alto contraste · AA

Input focado

Borda + glow sutil

Pressione Tab pra percorrer os exemplos — cada um usa uma estratégia visual diferente.

Checklist rápido

✓ Sempre

Alt em <img>, mesmo que vazio (alt="") para imagens decorativas
Hit targets ≥ 44×44px em mobile
Contraste ≥ 4.5:1 para texto, ≥ 3:1 para UI
:focus-visible em todo elemento interativo
Skip link no topo da página
ARIA labels em botões só-ícone
aria-live em toasts e alertas dinâmicos

✗ Nunca

outline:none sem substituir por outra pista visual
Cor como único indicador (use ícone + texto também)
Texto dentro de imagem em PNG (quando pode ser HTML)
Animação > 3s sem respeitar prefers-reduced-motion
Clique obrigatório sem alternativa de teclado
placeholder como substituto de label
Contraste abaixo de 3:1 em UI (bordas, ícones ativos)

Testando: use a extensão axe DevTools no Chrome para auditoria automática. Para contraste, o WebAIM Contrast Checker. Teste navegação por teclado: Tab, Shift+Tab, Enter, Esc.