Contraste de Cor
Certifique-se de que o texto é legível para todos os usuários
Descubra como estamos usando inteligência artificial para esta regra!
O Que Verificamos
Assegure-se de que o contraste de cor entre o texto e seu fundo atenda às proporções mínimas exigidas pela WCAG 2 AA.
De acordo com WCAG 2.0 1.4.3 AA, a apresentação visual do texto deve ter uma taxa de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Texto grande é definido como pelo menos 18pt ou 14pt em negrito.
Exemplo de Falha ❌
A taxa 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 baixa visão podem não conseguir ler este texto
Exemplo de Passagem ✅
A taxa 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 baixa visão conseguem ler este texto sem dificuldade
Resumidamente
- Esta regra tem um impacto sério para os usuários
- Texto normal deve ter uma taxa 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 taxa 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 na facilidade ou dificuldade de distinguir o texto de 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 um problema para usuários com baixa visão. O que parece um rótulo legível para um usuário pode parecer uma mancha quase invisível para outro.
Confirmar Problema de Contraste de Cor
- Faça uma das seguintes ações:
- Abra seu aplicativo em um simulador, OU
- Tire uma captura de tela do aplicativo em seu dispositivo físico. Envie a captura de tela para você mesmo e abra-a em seu computador.
- Use um seletor de cor para:
- Obter a cor mais precisa do elemento de texto.
- Obter a cor mais precisa de cada cor de fundo distinta atrás do texto.
- Insira cada cor no Verificador de Contraste de Paleta de Cores da Deque.
- Você encontrará um dos seguintes:
- Acessível: A relação de contraste de cor atende ao mínimo exigido para o tamanho do texto.
- Inacessível: A relação de contraste de cor não atende ao mínimo exigido para o tamanho do texto.
Corrigir Problemas
Os problemas de contraste de cor ocorrem quando a cor do texto e a cor de fundo são muito semelhantes em brilho. Para corrigir o problema, use o Analisador de Contraste de Cor da 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 proporçã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 WCAG AA, por 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ções. 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á em um fundo com muitas cores, como um gradiente, imagem ou fundo semitransparente. Se você acreditar que um resultado está incorreto, use o Verificador de Contraste de Cor da Deque para confirmar a proporçã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.