Exemplos de contraste de cor ruim, medidos e corrigidos
Exemplos de contraste de cor ruim
Exemplos de contraste de cor ruim e como corrigir cada um | We.Inc
Oito exemplos comuns de contraste de cor ruim em páginas de loja realistas, cada um com a razão WCAG calculada, o motivo da falha e uma correção que você pode testar ao vivo.
Contraste de cor ruim é um texto ou controle cuja cor fica perto demais da cor que está atrás dele, e por isso muitos visitantes têm dificuldade para ler. Os culpados de sempre são texto cinza-claro, branco sobre laranja ou verde vivos, dicas de placeholder e títulos sobre fotos. A WCAG 2.2 pede 4.5:1 para texto normal; cada exemplo abaixo mostra sua razão.
A razão de cada exemplo antes e depois da correção
Exemplo
Antes
Depois
Texto do corpo em cinza-claro
Texto de placeholder usado como rótulo
Texto branco em um botão laranja vivo
Texto branco em um selo verde-claro
Texto cinza em um card cinza
Texto azul da marca em um painel escuro
Título branco sobre uma foto clara
Estes são erros que aparecem o tempo todo em sites de pequenas empresas, recriados aqui com as nossas próprias cores para você ver os números. Cada um indica a regra que viola, e o editor permite testar uma correção e ver a razão mudar.
Encontre o texto menor e mais claro da página: datas, legendas, rodapés, dicas de formulário.
Compare-o com o fundo exato em que ele está, incluindo cards e faixas coloridos.
Para texto sobre foto, teste contra a parte mais clara da imagem atrás das letras.
Corrija mudando primeiro a luminosidade. Um tom mais escuro ou mais claro da mesma cor mantém a cara da marca.
Não avalie o contraste só em um monitor de desktop bem brilhante. Veja a página em um celular ao ar livre.
Botões desativados são isentos na WCAG, mas garanta que um botão ativo nunca pareça desativado.
Texto de hover e de foco também conta. O W3C inclui o texto mostrado no hover ou no foco do teclado.
Se uma faixa de promoção usa uma cor clara da marca, coloque texto escuro sobre ela em vez de branco.
Razões entre 3:1 e 4.5:1 servem para títulos grandes e ícones, não para parágrafos.
Perguntas frequentes
Por que texto branco sobre laranja reprova com tanta frequência?
Laranja e amarelo são cores claras, então a luminância delas fica perto da do branco. O nosso laranja de exemplo, #F5A623, dá só cerca de 2:1 com texto branco.
O texto de placeholder precisa passar no contraste?
Sim. A explicação do W3C sobre o critério de sucesso 1.4.3 inclui o texto de placeholder entre os textos cobertos. Um rótulo visível acima do campo continua sendo o melhor padrão.
Como verifico texto sobre uma foto?
Meça contra a parte da imagem logo atrás do texto e considere a área mais clara. O W3C cita imagens de fundo sem contraste suficiente como uma falha.
Um link colorido sem sublinhado é uma falha de contraste?
É um problema de uso de cor pelo critério de sucesso 1.4.1, que diz que a cor não pode ser o único meio visual de transmitir uma informação. Um sublinhado resolve.
Botões desativados em cinza são um problema?
Texto em componentes de interface inativos não tem exigência de contraste pelo 1.4.3. Só garanta que o botão esteja realmente inativo, e não apenas estilizado assim.
Por que esses erros são tão comuns
Os layouts costumam ser aprovados em uma tela grande e brilhante, onde o texto claro ainda parece nítido. A mesma página em um celular mais antigo com o brilho baixo conta outra história.
As cores da marca causam o resto. Um laranja alegre ou um verde-limão fica ótimo como forma, e aí alguém coloca texto branco por cima porque é assim que os botões costumam ser.
A regra que não fala de razões
O critério de sucesso 1.4.1 é separado das razões: ele exige que a cor nunca seja o único jeito de mostrar uma informação. Links marcados só pela cor, campos obrigatórios marcados só em vermelho e gráficos diferenciados só pelo tom violam essa regra.
Combine a cor com outra coisa: um sublinhado, um ícone, um rótulo, um padrão.
O que dá errado em cada exemplo
Problema e correção de cada exemplo
Exemplo
Por que reprova
Correção
Texto do corpo em cinza-claro
O cinza-claro parece tranquilo em um mockup, mas em um celular à luz do dia ele some.
Escureça o cinza para #595959, que chega a 7:1 sobre branco.
Texto de placeholder usado como rótulo
A dica dentro de um campo vazio costuma ser clara, e a WCAG conta o texto de placeholder como texto que também precisa de contraste.
Mantenha um rótulo visível acima do campo e escureça a dica para #6B7280.
Texto branco em um botão laranja vivo
Tons médios vivos como laranja e amarelo são claros, então o texto branco sobre eles tem pouco contraste.
Use um laranja queimado como #C2410C, ou mantenha o laranja vivo e coloque texto escuro sobre ele.
Texto branco em um selo verde-claro
Selos de sucesso e de promoção costumam usar um verde vivo que não comporta texto branco.
Use um verde mais fechado como #15803D atrás do texto branco.
Texto cinza em um card cinza
Um cinza que passa sobre branco pode reprovar em um card colorido, porque o card é mais escuro que a página.
Use um cinza mais escuro, como #4B5563, em superfícies coloridas.
Texto azul da marca em um painel escuro
Um azul médio que funciona sobre branco fica turvo sobre grafite: as duas cores ficam no meio da faixa de brilho.
Clareie o azul para #93C5FD em painéis escuros.
Título branco sobre uma foto clara
O texto sobre uma foto é avaliado contra as partes da imagem atrás dele. Um céu claro ou uma parede branca não deixam o texto branco se destacar.
Coloque o título em uma faixa sólida ou bem escurecida, ou tire-o de cima da imagem.
Um link indicado só pela cor
Se um link se diferencia da frase ao redor apenas pela cor, quem não distingue as cores não consegue encontrá-lo.
Sublinhe os links no texto do corpo. A cor pode continuar.
Correções em CSS
Título legível sobre uma foto
Uma faixa escura atrás das palavras dá ao texto branco um fundo estável, seja qual for a foto.
Links que não dependem da cor
Sublinhe os links dentro dos parágrafos e dê ao foco do teclado um contorno bem visível.
Editor de antes e depois
Escolha um exemplo e depois altere as cores corrigidas para ver até onde dá para levar o tom da sua marca antes de reprovar.
Exemplo
Cor do texto
Cor de fundo
Contraste {r}
Link em relação ao texto do corpo {r}
Atende 4.5:1 para texto do corpo.
Atende só 3:1, então no máximo texto grande ou ícones.
Abaixo de 3:1. Difícil de ler para muita gente.
A correção mantém as cores e adiciona um sublinhado, então a cor deixa de ser o único sinal.
Não é uma cor hex
Frete grátis em pedidos acima de $50 nesta semana.
Adicionar ao carrinho
Seu endereço de e-mail
Cardápio de primavera já disponível
Leia a nossa
política de devolução
antes de fazer o pedido.
As cores são verificadas no seu navegador com a fórmula da WCAG 2.2.
Texto do corpo em cinza-claro
Texto de placeholder usado como rótulo
Texto branco em um botão laranja vivo
Texto branco em um selo verde-claro
Texto cinza em um card cinza
Texto azul da marca em um painel escuro
Um link indicado só pela cor
O cinza-claro parece tranquilo em um mockup, mas em um celular à luz do dia ele some.
A dica dentro de um campo vazio costuma ser clara, e a WCAG conta o texto de placeholder como texto que também precisa de contraste.
Tons médios vivos como laranja e amarelo são claros, então o texto branco sobre eles tem pouco contraste.
Selos de sucesso e de promoção costumam usar um verde vivo que não comporta texto branco.
Um cinza que passa sobre branco pode reprovar em um card colorido, porque o card é mais escuro que a página.
Um azul médio que funciona sobre branco fica turvo sobre grafite: as duas cores ficam no meio da faixa de brilho.
Se um link se diferencia da frase ao redor apenas pela cor, quem não distingue as cores não consegue encontrá-lo.
Escureça o cinza para #595959, que chega a 7:1 sobre branco.
Mantenha um rótulo visível acima do campo e escureça a dica para #6B7280.
Use um laranja queimado como #C2410C, ou mantenha o laranja vivo e coloque texto escuro sobre ele.
Use um verde mais fechado como #15803D atrás do texto branco.
Use um cinza mais escuro, como #4B5563, em superfícies coloridas.
Clareie o azul para #93C5FD em painéis escuros.
Sublinhe os links no texto do corpo. A cor pode continuar.