5.1.1.17 - Requisitos para contraste de textos e elementos gráficos
Descrição
Os textos e elementos gráficos devem ter contraste suficiente com seus respectivos planos de fundo. Deve haver contraste mínimo entre os textos e seus respectivos planos de fundo. Também deve haver contraste mínimo entre os elementos gráficos relevantes e seus respectivos planos de fundo e/ou entornos. As taxas de contraste devem estar em conformidade mínima com os critérios de sucesso nível AA do WCAG 2.1. Elementos interativos no estado desabilitado não precisam cumprir requisitos de contraste. Elementos gráficos meramente decorativos e logotipos também estão isentos.
Exemplo
Um fundo claro é escolhido para que as letras de cores escuras possam ser lidas na tela de uma aplicação.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Garanta que os textos e elementos gráficos relevantes tenham contraste adequado em relação ao plano de fundo, conforme os critérios de sucesso de nível AA do WCAG 2.1 (4.5:1 para texto normal e 3:1 para texto grande).
Escolha cores com contraste suficiente
Texto normal: 4,5:1. Texto grande e elementos gráficos relevantes: 3:1.
Certo: Texto legível
anotação de especificação
Texto #344054 sobre branco: contraste de 10,4:1.
Errado: Texto apagado
anotação de especificação
Texto cinza-claro #98A2B3 sobre branco: contraste de 2,6:1.
Certo: Borda de campo visível
anotação de especificação
Borda do campo #667085 sobre branco: 5:1.
Errado: Borda quase invisível
anotação de especificação
Borda do campo #EAECF0 sobre branco: 1,2:1.
Utilize ferramentas automatizadas ou funções CSS para garantir que o contraste entre texto e plano de fundo, assim como entre elementos gráficos relevantes e seus contornos, esteja em conformidade com o WCAG 2.1, exceto para elementos desabilitados ou decorativos.
Use os tokens de cor aprovados
Centralize as cores e verifique o contraste em todos os estados.
Certo: Cores com contraste
.texto { color: #344054; } .botao { background: #026AA2; color: #FFF; }10,4:1 e 5,9:1: acima do mínimo.
Errado: Cores sem verificação
.texto { color: #98A2B3; } .botao { background: #7CD4FD; color: #FFF; }2,6:1 e 1,7:1: ilegível para muitas pessoas.
Aprenda a fazer com conteúdos selecionados para você
Certifique-se de que o processo de design e desenvolvimento inclua verificações de contraste em todas as etapas, garantindo que as interfaces estejam em conformidade com os padrões de acessibilidade do WCAG 2.1.
Inclua o contraste na definição de pronto
Nenhuma tela é entregue sem a verificação de contraste.
Checklist do requisito 5.1.1.17: tela "Login"
- 4,5:1 ou mais
Textos do formulário
texto normal
- 3:1 ou mais
Ícones de ação
elemento gráfico
- pendente
Texto do rodapé
texto pequeno
2 de 3 itens em conformidade, 1 pendente de revisão.
Avaliar contraste com ferramentas de teste
Use ferramentas de verificação de contraste para avaliar a taxa de contraste dos textos e elementos gráficos em relação ao plano de fundo. Certifique-se de que a relação atenda ao mínimo exigido pelo WCAG 2.1 nível AA (4.5:1 para texto normal e 3:1 para texto grande e elementos gráficos).
Garantir contraste em todos os estados
Verifique que textos e elementos interativos mantenham a taxa de contraste mínima em todos os estados (ativo, focado, etc.).
Analisar gráficos e elementos visuais relevantes
Teste elementos gráficos que transmitam informações importantes para garantir que possuam contraste adequado com o plano de fundo. Elementos meramente decorativos não precisam seguir essa regra.
Adaptar contrastes para diferentes modos de exibição
Confirme que o contraste seja adequado tanto no modo claro quanto no modo escuro, se a aplicação suportar ambos.
Documentar casos de exceção
Se elementos interativos no estado desabilitado ou gráficos decorativos forem detectados, documente que eles estão fora do escopo da exigência de contraste.
Revisar contraste em diferentes dispositivos
Teste em telas de diferentes tamanhos e tipos (como monitores, tablets e smartphones) para garantir que o contraste se mantenha adequado em todas as resoluções.
Meça o contraste de cada estado
Use um verificador de contraste nos estados normal, foco e erro.
Certo: Todos os estados aprovados
Normal: 7,2:1 ✓
Foco: 5,1:1 ✓
Erro: 5,9:1 ✓
Legível em qualquer estado.
Errado: Estado esquecido
Normal: 7,2:1 ✓
Foco: 1,9:1 ✗
Erro: 3,1:1 ✗
Foco e erro ficam ilegíveis.
Verifique se os textos que são inseridos estão de acordo com os critérios mínimos de sucesso nível AA da WCAG. Isso mantêm contraste adequado com o fundo, especialmente em áreas de leitura contínua, para garantir que a acessibilidade não seja comprometida.
Não use a cor do texto para esconder informação
Todo texto com informação precisa ter contraste mínimo, inclusive avisos e notas.
Certo: Aviso legível
nota de rodapé
Texto de aviso na cor padrão do corpo, com o mesmo contraste.
Toda informação fica legível.
Errado: Letras miúdas apagadas
nota de rodapé
Condições do contrato em cinza-claro e fonte pequena.
Informação importante fica ilegível.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.