# Acessibilidade de alto contraste

Também chamado de: design acessível, design WCAG AAA, modo de alto contraste, UI inclusiva, a11y-first  
Era: WCAG 2.0 (2008), 2.1 (2018), 2.2 (2023); prioridade de design desde a pressão legal de 2020  
Página: https://designforai.dev/pt/style/high-contrast-accessibility

## Traços

- contraste de texto de 7:1 ou melhor (AAA), componentes de UI a 3:1 no mínimo
- tipografia padrão grande (18px+), line-height 1.5+, medida de 60-70 caracteres
- indicadores de foco visíveis e grossos (3px) em cada elemento interativo
- links sublinhados, botões que parecem botões, nunca só a cor para sinalizar estado
- alvos de toque grandes (44px no mínimo), espaçamento generoso entre eles
- movimento mínimo e sempre desativado sob prefers-reduced-motion
- respeita o modo forced-colors; os ícones têm labels de texto

Paleta: #ffffff página, #0b0b0b texto, #005a9c azul de link (7:1 sobre branco), #b30000 erro, #006400 sucesso, #ffd200 anel de foco sobre escuro, #1a1a1a superfície escura

Tipografia: Atkinson Hyperlegible (projetada para baixa visão), IBM Plex Sans, Source Sans 3 ou Lexend; corpo 18-20px, títulos 700 a 32-48px, mínimo de 16px em qualquer lugar; sem pesos leves

## Faça

- teste cada par texto/fundo para 7:1 e cada borda/ícone para 3:1 antes de estilizar qualquer outra coisa
- torne o foco impossível de perder: outline 3px solid mais offset de 2px, numa cor que atinja 3:1 sobre qualquer fundo
- acompanhe cada sinal de cor com uma forma, ícone ou texto (texto de erro mais ícone, não só vermelho)

## Evite

- não use texto placeholder cinza abaixo de 4.5:1 nem inputs com filetes finos
- não remova outlines, não desative o zoom, não anime no scroll
- não dependa do hover; tudo precisa funcionar com teclado e toque

Conhecido por: GOV.UK, BBC (GEL), projeto Atkinson Hyperlegible do Braille Institute, Microsoft Inclusive Design

## Semente CSS

```css
:root{--bg:#ffffff; --fg:#0b0b0b; --accent:#005a9c; --error:#b30000; --focus:#ffd200; --radius:4px; --focus-ring:3px solid #005a9c; --font:'Atkinson Hyperlegible',sans-serif}
```

## Prompt

Construa o site num padrão de acessibilidade de alto contraste (WCAG 2.2 AAA onde possível). Fundo #ffffff, texto #0b0b0b, links #005a9c sempre sublinhados, erro #b30000 com ícone e texto, sucesso #006400. Fonte Atkinson Hyperlegible: corpo 19px line-height 1.6 com max-width 66ch, títulos 700 a 44/32/24px, nada abaixo de 16px, nenhum peso abaixo de 400. Todos os elementos interativos com pelo menos 44x44px e 12px de espaçamento entre eles. Botões: #005a9c sólido com texto branco, raio 4px, borda de 2px na mesma cor para sobreviverem ao modo forced-colors; os botões secundários têm borda 2px #0b0b0b. Foco: outline 3px solid #005a9c, outline-offset 2px em cada elemento; sobre superfícies escuras #1a1a1a use #ffd200. Inputs: borda 2px #0b0b0b, label visível acima, nunca só placeholder. Skip link primeiro no DOM. Ícones decorativos (aria-hidden) com labels de texto adjacentes. Sem autoplay, sem parallax; qualquer transição de no máximo 150ms e removida sob prefers-reduced-motion. Adicione uma estrutura de landmarks visível: header, nav, main, footer.