Design Visual

Cada tópico foi alinhado com referências da NBR 17225:2025, critérios da WCAG 2.2 e boas práticas do Guia de Acessibilidade do Governo do Reino Unido, garantindo conformidade técnica e apoio prático à implementação. O objetivo é assegurar que a camada visual – cores, tipografia, layout e movimento – seja inclusiva desde o primeiro esboço até a entrega em produção.

1. – Aparência Geral

1.1 – Cores e Contraste

• 1. Contraste mínimo 4,5 : 1 para texto normal.
• 2. Contraste mínimo 3 : 1 para texto grande (≥ 18 pt ou 14 pt negrito).
• 3. Contraste mínimo 3 : 1 para ícones e componentes (inputs, bordas, botões).
• 6. Cores personalizadas de ::selection mantêm contraste acessível.

Referências

- NBR 17225:2025 – 5.11.3 / WCAG 2.2 – C.S. 1.4.3
- NBR 17225:2025 – 5.11.4‑6 / WCAG 2.2 – C.S. 1.4.11
- NBR 17225:2025 – 5.11.1 / WCAG 2.2 – C.S. 1.4.1

1.2 – Tipografia

• 1. Texto redimensionável até 200 % sem perda de conteúdo.
• 2. Máximo 80 caracteres por linha (≈ 40 CJK).
• 3. Espaçamento: linhas 1,5×; parágrafos 2×; letras 0,12×; palavras 0,16×.
• 4. Evitar textos longos em caixa alta ou ultra‑condensados.
• 5. Evitar alinhamento justificado, salvo exceções editoriais.

Referências

- NBR 17225:2025 – 5.12.7 / WCAG 2.2 – C.S. 1.4.4
- NBR 17225:2025 – 5.12.6 / WCAG 2.2 – C.S. 1.4.10
- NBR 17225:2025 – 5.12.1‑4 / WCAG 2.2 – C.S. 1.4.12
- NBR 17225:2025 – 5.12.5 / WCAG 2.2 – C.S. 1.4.8

1.3 – Layout e Responsividade

• 1. Sem barras de rolagem horizontais em 320 px (largura) ou 256 px (altura).
• 2. Suporta ambas as orientações de tela (retratos e paisagem).
• 3. Linhas de texto se ajustam ao viewport sem ocultar conteúdo.
• 4. Modo escuro / alto contraste, respeitando prefers-color-scheme.
• 5. Fontes, paddings e gutters em unidades relativas (rem/em).

Referências

- NBR 17225:2025 – 5.10.4 / WCAG 2.2 – C.S. 1.4.10
- NBR 17225:2025 – 5.10.3 / WCAG 2.2 – C.S. 1.3.4

2. – Animação e Movimento

2.1 – Animações Gerais

• 1. Pausar, parar ou ocultar animações automáticas (> 5 s).
• 2. Evitar conteúdo que pisque mais de 3 vezes/s.
• 3. Respeitar prefers-reduced-motion em transições.
• 4. Permitir controle de animações paralelas ao conteúdo.

Referências

- NBR 17225:2025 – 5.15.1 / WCAG 2.2 – C.S. 2.2.2
- NBR 17225:2025 – 5.15.4 / WCAG 2.2 – C.S. 2.3.1
- NBR 17225:2025 – 5.15.2 / WCAG 2.2 – C.S. 2.3.3

3. – Indicadores e Feedback Visual

• 1. Foco visível em todos os elementos interativos.
• 2. Área de foco equivalente a contorno de 2 px.
• 3. Feedback perceptível ao clicar/tocar (hover, active, pressed).

Referências

- NBR 17225:2025 – 5.1.1 / WCAG 2.2 – C.S. 2.4.7
- NBR 17225:2025 – 5.10.5 / WCAG 2.2 – C.S. 2.4.13
- NBR 17225:2025 – 5.8.15 / WCAG 2.2 – C.S. 4.1.3

Referências gerais

Baseado na NBR 17225:2025, nos Critérios de Sucesso da WCAG 2.2 e no Guia de Acessibilidade do Governo do Reino Unido.