Pular para conteúdo

Acessibilidade — Auditoria e Ajustes

Contraste de Cores (WCAG AA)

Todos os pares de cor foreground/background foram auditados para conformidade WCAG AA (mínimo 4.5:1 para texto normal, 3:1 para texto grande).

Pares que passam (sem ajuste)

Elemento Foreground Background Ratio Status
Body text #F0F0F0 #111111 14.9:1 AA
Headings #FFFFFF #111111 16.9:1 AAA
Links #FFFFFF #111111 16.9:1 AAA
Tab links (inactive) #AAAAAA #111111 8.1:1 AAA
Sidebar nav links #AAAAAA #111111 8.1:1 AAA
Code text #F0F0F0 #222222 11.9:1 AAA
Admonition title #FFFFFF #444444 8.0:1 AAA
Admonition body #F0F0F0 #222222 11.9:1 AAA
Button primary #000000 #FFFFFF 21:1 AAA
Button secondary #FFFFFF #111111 16.9:1 AAA
Header title #FFFFFF #000000 21:1 AAA
Header page title #CCCCCC #000000 13.1:1 AAA
Footer nav links #CCCCCC #000000 13.1:1 AAA
Footer meta #AAAAAA #000000 9.0:1 AAA

Pares ajustados para conformidade

Elemento Antes Depois Ratio Antes Ratio Depois
Footer direction #666 on #000 #AAA on #000 3.7:1 9.0:1
Copyright text #666 on #000 #AAA on #000 3.7:1 9.0:1
Search result meta #666 on #111 #AAA on #111 3.3:1 8.1:1
Search placeholder #666 on #222 #AAA on #222 2.8:1 6.9:1
Material lightest fg #666 on #111 #AAA on #111 3.3:1 8.1:1
  • Focus visible: Todos os elementos interativos exibem outline: 2px solid white com outline-offset: 2px ao receber foco via teclado (:focus-visible)
  • Tab order: Header → search → tabs → sidebar nav → content → footer (order padrão do Material Theme, preservado)
  • Skip links: Material Theme inclui skip-to-content link nativo

Independência de Cor

Nenhum elemento depende exclusivamente de cor para transmitir significado:

  • Admonitions: Usam ícone + título textual além da borda colorida lateral
  • Links: Possuem border-bottom underline além da cor diferente
  • Active nav items: Usam font-weight: 600 + cor branca (não só cor)
  • Active ToC item: Usa border-left indicator + cor + peso da fonte
  • Buttons: Possuem borda visível além do background

Estrutura de Headings

  • Cada página usa hierarquia correta: h1h2h3 (sem pulos)
  • MkDocs Material gera landmarks <nav>, <main>, <footer> automaticamente
  • Table of Contents (ToC) no sidebar direito facilita navegação por seção

Arquivos Alterados

  • docs/stylesheets/colors.css — Focus-visible styles + ajuste --md-default-fg-color--lightest
  • docs/stylesheets/layout.css — Ajuste de contraste em footer, search meta, placeholder