Como usar contraste adequado, cores e tipografia legível para garantir textos mais acessíveis.
Conjunto de critérios para facilitar a leitura e a visualização do conteúdo visual.
O contraste deve garantir a leitura de textos e ícones em qualquer condição de luz, inclusive para pessoas com baixa visão ou daltonismo. Isso evita fadiga visual e facilita a compreensão. A cor não pode ser o único elemento para transmitir informação. A tipografia (forma e organização do texto) deve usar fontes legíveis, tamanho suficiente para leitura confortável e espaçamento adequado.
Contraste e tipografia corretos reduzem barreiras e melhoram a leitura para todos.
Baixo contraste está entre os problemas de acessibilidade mais frequentes na web. 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.
O contraste deve ser aplicado a todo texto (inclusive rodapés, legendas e placeholders) e elementos interativos em todos os estados (normal, foco, hover, desabilitado).
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.
Teste contraste e legibilidade com ferramentas e em situações reais de uso.
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:
Incorretos:
Não confie em cores institucionais sem teste, não ignore contraste em ícones e não utilize tipografia difícil de ler.
WCAG 1.4.1, 1.4.3, 1.4.11, 1.4.12 e NBR 17225 definem requisitos de contraste, uso da cor e legibilidade.
Outras normas relacionadas:
Guias e ferramentas para aplicar contraste, cor e tipografia acessível.
