Global AD
DS v1.0
Acessibilidade

Padrão, não extra

WCAG 2.2 nível AA é o piso de qualquer tela publicada, não uma etapa opcional no fim do projeto.

Contraste mínimo

Os valores de contraste par a par vivem na página Cor. Aqui fica só a regra.

Texto normal · 4.5:1

Corpo, label, link e botão precisam passar 4.5:1 sobre o fundo.

Texto grande e UI · 3:1

Texto 18px+ bold ou 24px+, borda de input, foco: mínimo 3:1.

✓ passa
Texto legível · alto contraste
✕ falha
Texto cinza-escuro · 1.7:1

Teclado

Todo alvo interativo é alcançável via Tab. Foco sempre visível — nunca outline:none sem substituto.

Cor nunca sozinha

Cerca de 8% dos homens têm daltonismo. Todo sinal vem com ícone ou texto — cor apenas amplia.

Aprovado ✓passa
Só uma bolinha verdefalha

Motion reduzido

Quem ativa prefers-reduced-motion não vê parallax, marquee ou bounce — colapsa para fade simples ou nada.

Ver implementação em Motion

ARIA e leitor de tela

Ícone decorativo

Acompanha texto → aria-hidden="true".

Ícone semântico

Botão só com ícone → aria-label obrigatório.

Toasts e notificações

Live region — leitor anuncia sem foco manual.

Imagens de conteúdo

Sempre alt descritivo. Decorativas → alt="".

<button aria-label="Fechar modal">
  <X aria-hidden="true" />
</button>

Checklist rápido

Antes de aprovar qualquer tela
(1) tire uma captura em preto e branco — se a informação sumiu, você depende só de cor. (2) navegue só com Tab — se um botão não recebe foco, ele está inacessível.