Contraste de Cor

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 ❌

Exemplo de Passagem ✅

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

1. 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.
2. Use um seletor de cor para:
   1. Obter a cor mais precisa do elemento de texto.
   2. Obter a cor mais precisa de cada cor de fundo distinta atrás do texto.
3. Insira cada cor no Verificador de Contraste de Paleta de Cores da Deque.
4. 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ê acredita que um achado está incorreto, use o Deque Color Contrast Analyzer para confirmar o raio entre as cores do texto e do fundo.
• A regra de Contraste de Cor usa o framework Vision da Apple (Reconhecimento Óptico de Caracteres, ou OCR) para ler texto dentro dos limites de um elemento. O OCR pode ocasionalmente identificar erroneamente pequenos glifos semelhantes a ícones - como setas de retorno (<), marcadores, símbolos decorativos - como texto. Quando isso acontece, a regra de Contraste de Cor é aplicada em um elemento que não contém texto legível, o que pode produzir um resultado para um botão que contém apenas ícones. Como a saída do OCR não é determinística entre as varreduras, o mesmo elemento pode aparecer nos resultados de Contraste de Cor em uma varredura e ser relatado como "NÃO APLICÁVEL" na próxima. Esta é uma característica conhecida do OCR, não um erro na regra. Para contornar esse problema, você pode usar as ignore APIs para suprimir os resultados de Contraste de Cor para os elementos afetados. Saiba mais sobre ignorando regras.

Recursos

Páginas de Cursos da Deque University

• CE 1.4.3 Contraste (Mínimo)
• Cor
• Contraste

Nota: O acesso completo aos recursos da Deque University requer uma assinatura.

Outros Recursos

• Técnica WCAG G18: Garantir que exista uma proporção de contraste de pelo menos 4,5:1 entre o texto (e imagens de texto) e o fundo por trás do texto
• Entendendo o Critério de Sucesso 1.4.3 do W3C: Contraste (Mínimo)