Contraste de Cor
Certifique-se de que o texto seja legível para todos os usuários
Descubra como estamos usando inteligência artificial para esta regra!
O que Verificamos
Certifique-se de que o contraste de cor entre o texto e seu fundo atenda aos níveis mínimos de razão da WCAG 2 AA.
De acordo com WCAG 2.0 1.4.3 AA, a apresentação visual do texto deve ter uma razão de contraste de pelo menos 4.5:1 para texto regular e 3:1 para texto grande. Texto grande é definido como pelo menos 18pt ou 14pt em negrito.
Exemplo de Falha ❌
A razão de contraste está abaixo do mínimo de 4.5:1 para texto normal e 3:1 para texto grande.
O texto é difícil de distinguir do fundo
Usuários com visão reduzida podem não conseguir ler este texto
Exemplo de Sucesso ✅
A razão de contraste atende ou excede o mínimo de 4.5:1 para texto normal.
O texto é claramente distinguível do fundo
Usuários com visão reduzida podem ler este texto sem dificuldade
Em Resumo
- Esta regra tem um impacto sério para os usuários
- Texto regular deve ter uma razão de contraste de pelo menos 4.5:1 em relação ao seu fundo
- Texto grande (pelo menos 18pt ou 14pt em negrito) deve ter uma razão de contraste de pelo menos 3:1
- Esta regra verifica o contraste de cor de elementos de texto estáticos e texto dentro de elementos interativos
- Esta regra usa IA para detectar problemas de contraste - os resultados podem precisar de verificação manual em fundos complexos
Impacto nos Usuários
O nível de contraste de cor impacta a facilidade ou dificuldade de distinguir o texto do seu fundo. Quando as cores do texto e do fundo são muito semelhantes em brilho, o texto se torna difícil ou impossível de ler.
Isso afeta qualquer pessoa em condições de pouca luz, ao ar livre sob luz solar ou usando uma tela mais antiga — mas é especialmente problemático para usuários com visão reduzida. O que parece ser uma etiqueta legível para um usuário pode parecer um borrão quase invisível para outro.
Confirmar Problema de Contraste de Cor
- Faça um dos seguintes:
- Abra seu aplicativo em um emulador, OU
- Tire uma captura de tela do aplicativo no seu dispositivo físico. Envie a captura para você mesmo e abra-a no seu computador.
- Use um seletor de cores para:
- Obter a cor mais fiel do elemento de texto.
- Obter a cor mais fiel de cada cor de fundo distinta atrás do texto.
- Insira cada cor no Verificador de Contraste de Paleta de Cores Deque.
- Você encontrará um dos seguintes:
- Acessível: A razão de contraste de cor atende ao mínimo exigido para o seu tamanho de texto.
- Inacessível: A razão de contraste de cor não atende ao mínimo exigido para o seu tamanho de texto.
Corrigir Problemas
Problemas de contraste de cor ocorrem quando a cor do texto e a cor do fundo são muito semelhantes em brilho. Para corrigir o problema, use o Analisador de Contraste de Cor Deque para encontrar cores que atendam ao mínimo exigido com base no tamanho do texto. Ajuste a cor do texto ou a cor do fundo até que a razão de contraste necessária seja alcançada.
Posso Ignorar Esta Regra?
O contraste de cor tem um Impacto sério para os usuários. Um contraste de cor adequado é um requisito da WCAG AA, então isso deve ser uma correção prioritária. Em casos raros, pode ser aceitável ignorar esta regra — por exemplo, se o texto for puramente decorativo e não transmitir informação. Saiba mais sobre ignorando regras.
Perguntas Frequentes
Existem limitações conhecidas com esta regra?
Sim. Esta regra pode produzir resultados imprecisos quando o texto está sobre um fundo com muitas cores, como um gradiente, imagem ou fundo semitransparente. Se você acreditar que uma constatação está incorreta, use o Verificador de Contraste de Cor da Deque para confirmar a relação entre as cores do texto e do fundo.
Recursos
Páginas de Cursos da Deque University
Nota: O acesso completo aos recursos da Deque University requer uma assinatura.