Inclui uso do contraste adequado, boa aplicação das cores e tipografia legível para garantir acessibilidade.
Critérios que asseguram que o conteúdo visual seja legível e perceptível.
O contraste deve assegurar que textos e ícones sejam legíveis em qualquer condição de luz. Ou seja, aumenta legibilidade, evita fadiga visual e assegura que pessoas com baixa visão ou daltonismo possam compreender a informação. A cor não pode ser o único recurso para transmitir informação. A tipografia deve adotar fontes legíveis, tamanhos mínimos adequados e espaçamento confortável.
Contraste e tipografia corretos reduzem barreiras e melhoram a leitura para todos.
Baixo contraste está entre os problemas de acessibilidade mais frequentes na web. Ele prejudica não só pessoas com deficiência visual ou daltonismo, mas todos os usuários em telas pequenas ou sob luz intensa. Boa tipografia reduz fadiga visual, aumenta a compreensão e diminui erros em tarefas digitais.
Sempre que houver texto, ícones, botões, links, gráficos ou estados de interface.
Links precisam de mais de um indicador (cor + sublinhado ou ícone). Em gráficos, não depender apenas da cor: usar padrões e legendas.
Garanta contraste mínimo, use cores acompanhadas de rótulos e escolha tipografia clara com espaçamento adequado.
• Use ferramentas para medir contraste (WebAIM Contrast Checker, WAVE).
• Prefira fontes sem serifa para leitura em tela (Arial, Verdana, Montserrat).
• Corpo de texto ≥ 16 px; espaçamento entre linhas ≥ 1.5; parágrafos ≥ 2.0.
• Evite blocos em caixa alta e centralização de parágrafos longos.
• Em gráficos, adicione padrões (listras, pontos) além das cores.
table {mso-displayed-decimal-separator:"\,"; mso-displayed-thousand- Teste contraste e legibilidade em ferramentas e em uso real.
Links precisam de mais de um indicador (cor + sublinhado ou ícone). Em gráficos, não depender apenas da cor: usar padrões e legendas.
Textos escuros sobre fundo claro, links com sublinhado e gráficos com padrões são acessíveis; cores similares ou instruções apenas por cor prejudicam.
Corretos:
• Texto preto sobre fundo branco ou azul marinho.
• Link azul sublinhado.
• Botão com rótulo textual + ícone, contraste adequado em foco.
• Gráfico que diferencia categorias por cores + padrões + legenda textual.
Incorretos:
• Texto cinza claro (#aaa) sobre fundo branco.
• Link apenas em azul, sem sublinhado.
• Instrução: “Clique no botão verde” sem alternativa textual.
• Placeholder em cinza claro quase invisível.
Não confie em cores corporativas sem teste, ignorar contraste em ícones e usar tipografia difícil de ler.
• Não utilize paletas institucionais sem verificar contraste real.
• Não utilize estados desabilitados ilegíveis (botões em cinza claro).
• Não ignore contraste em modo escuro de tela.
• Não utilize placeholders (espaços reservados) e rodapés com baixo contraste.
• Não permita inconsistência de tipografia (mistura de muitas fontes ou tamanhos).
Recursos adicionais serão disponibilizados em breve.
• WCAG 1.4.3 exige razão de contraste mínima de 4.5:1 (texto normal) e 3:1 (texto grande).
• WCAG 1.4.1 proíbe depender apenas da cor.
• WCAG 1.4.11 trata do contraste em ícones e controles de interface.
• WCAG 1.4.12 especifica espaçamento mínimo para texto.
• NBR 17225 referencia esses critérios no contexto brasileiro.
