Referência

Acessibilidade WCAG

Conformidade da paleta e dos componentes do Spinlist com as WCAG 2.1. Nível alvo: AA.

Contraste de cores

Calculado via fórmula de luminância relativa (WCAG 2.1 SC 1.4.3). AA exige ≥ 4.5:1 para texto normal, ≥ 3:1 para texto grande (+18px regular ou +14px bold). AAA exige ≥ 7:1.

Par de cores Ratio Nível Uso no app
#f5f5f5 · #0f0f0f
17.6:1 AAA Texto primário sobre fundo do app
#f5f5f5 · #1a1a1a
16.0:1 AAA Texto primário sobre cards e inputs
#888888 · #0f0f0f
5.4:1 AA Metadados, labels sobre fundo do app
#888888 · #1a1a1a
4.9:1 AA Metadados sobre cards — margem estreita
#C8F53C · #0f0f0f
15.1:1 AAA Labels verdes, badges, preços sobre fundo
#C8F53C · #1a1a1a
13.7:1 AAA Labels verdes sobre cards e inputs
#0f0f0f · #C8F53C
15.1:1 AAA Texto escuro em botões primários (filled)
#f87171 · #0f0f0f
6.9:1 AA Mensagens de erro — não alcança AAA (7:1)
#22c55e · #0f0f0f
8.4:1 AAA Mensagens de sucesso
#ffffff · #1a0a2e
18.6:1 AAA Texto branco em cards de gênero (Rock)

#888 sobre #1a1a1a = 4.9:1 — passa AA por 0.4 pontos. Nunca reduza a opacidade de texto secundário em cards. Se o tamanho cair abaixo de 14px bold ou 18px regular, revisar a cor.

Alvos de toque

WCAG 2.1 SC 2.5.5 (AA) recomenda ≥ 44×44px. WCAG 2.2 SC 2.5.8 exige ≥ 24×24px. iOS HIG e Material Design recomendam 44pt / 48dp respectivamente.

56px
BottomNav tabs w-14 h-14 = 56×56px ✓ WCAG 2.1 AA
40px
Botões do header w-10 h-10 = 40×40px ⚠ WCAG 2.2 AA (24px)
36px
Chips e filtros h-9 ≈ 36px altura ⚠ Texto grande compensa
48px
Botão primário (filled) py-3 = ~48px altura ✓ WCAG 2.1 AA

Checklist semântico

✓

aria-label em botões de ícone

Todos os botões sem texto visível têm aria-label descritivo. Ex: aria-label="Notificações", aria-label="Voltar", aria-label="Adicionar disco".

✓

alt em imagens de capa

Capas de álbum usam alt={record.album}. Imagens decorativas (thumbnails sobrepostos) usam alt="".

✓

Hierarquia de cabeçalhos

Cada tela tem no máximo um <h1> implícito (o título principal). Sub-seções usam <h2> e <h3> em ordem. Não pular níveis.

✓

Estados disabled comunicados

Botões desabilitados usam atributo disabled nativo, não apenas opacity-40. O atributo disabled comunica o estado a leitores de tela.

✓

Navegação por regiões ARIA

BottomNav usa aria-label="Navegação principal" no elemento <nav>. Links ativos são detectáveis por aria-current (gerenciado pelo React Router NavLink).

!

Informação não transmitida só por cor

O like ativo usa coração preenchido em verde — a forma muda além da cor (outline → filled), atendendo WCAG 1.4.1. Atenção ao badge de rating: só usa cor (#C8F53C) sem ícone diferenciado — compensado pelo símbolo ★.

!

Movimento reduzido

Transições de duration-200 são curtas e não causam problemas para a maioria dos usuários. Para conformidade total com WCAG 2.3.3 (AAA), adicionar @media (prefers-reduced-motion: reduce) desabilitando as transições de escala e opacidade nos componentes interativos.

Referências

  • WCAG 2.1 — W3C Recommendation — base deste documento
  • WCAG 2.2 — SC 2.5.8 Target Size (Minimum) — 24×24px obrigatório
  • Ferramenta de verificação: contrast-ratio.com ou Chrome DevTools → Accessibility
  • Nunca comunicar estado (erro, sucesso, ativo) apenas pela cor — sempre complementar com forma, ícone ou texto.