Contraste para texto (mínimo)
O que a norma pede
Texto tem contraste de pelo menos 4,5:1 com o fundo, ou 3:1 quando é texto grande. Logotipos e textos decorativos ou inativos estão dispensados.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Texto normal: contraste de pelo menos 4,5:1 com o fundo.
- Texto grande (pelo menos 18pt, ou 14pt em negrito): contraste de pelo menos 3:1.
- Dispensados: textos de logotipos e textos em plano secundário (decorativos, inativos ou invisíveis).
- 1.4.3 (AA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Defina no sistema de design pares de cor de texto e fundo já aprovados, com contraste de 4,5:1, ou 3:1 para texto grande. Para texto sobre imagem, use uma sobreposição escura.
Texto de apoio
Textos secundários em cinza.
Errado: Cinza claro
Na especificação
Texto #A0A0A0 sobre #FFFFFF — contraste 2,6:1.
Ilegível para muitas pessoas.
Certo: Cinza escuro
Na especificação
Texto #475467 sobre #FFFFFF — contraste 7,6:1.
Legível e ainda secundário.
Use os tokens de cor do sistema de design e rode a verificação automática de contraste. Confira à parte o placeholder e o texto sobre imagens, que as ferramentas costumam deixar passar.
Placeholder
Cor do texto de exemplo nos campos.
Errado: Muito claro
::placeholder { color: #C0C0C0; } /* 1,8:1 */O exemplo não é lido.
Certo: Contraste suficiente
::placeholder { color: #667085; } /* 4,8:1 */O exemplo é legível.
Inclua a verificação de contraste no processo de entrega e revise a paleta da identidade visual. Baixo contraste está entre os problemas mais comuns e é fácil de medir.
Nova identidade visual
A comunicação propõe uma paleta de tons pastel.
Errado: Aprovada sem teste
Decisão
Textos em tons pastel sobre branco.
Todo o site fica difícil de ler.
Certo: Ajustada
Decisão
Pastel nos fundos; textos em tons escuros com 4,5:1 ou mais.
Identidade preservada e legível.
Meça o contraste dos textos com uma ferramenta, inclusive nos estados de hover e foco e sobre imagens. Identifique o tamanho do texto para aplicar o limite certo.
Medição no rodapé
Texto do rodapé sobre fundo azul.
Errado: Abaixo do mínimo
Medição
Texto #7CD4FD sobre #026AA2 — 2,5:1.
Não atende.
Certo: Acima do mínimo
Medição
Texto #E0F2FE sobre #026AA2 — 5,6:1.
Atende.
Evite texto sobre fotos com muitos detalhes e use os estilos de texto do gerenciador, e não cores livres. Peça a verificação de contraste nas peças novas.
Banner com foto
Título do banner sobre uma foto clara.
Errado: Texto branco sobre foto clara
Banner
Título branco sobre céu azul claro.
Contraste insuficiente.
Certo: Faixa escura
Banner
Título branco sobre faixa escura semitransparente.
Legível.