Design for AI

Estilo Acessibilidade de alto contraste: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de acessibilidade de alto contraste. Também chamado de design acessível, design WCAG AAA, modo de alto contraste, UI inclusiva, a11y-first. WCAG 2.0 (2008), 2.1 (2018), 2.2 (2023); prioridade de design desde a pressão legal de 2020.

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
: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.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
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.

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

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.