Verificador de Cores Acessíveis
Verifique se as cores do texto e do fundo são acessíveis e receba sugestões de cores compatíveis com WCAG que passam em AA ou AAA quando falham.
Texto de exemplo grande
O texto de exemplo pequeno mostra a legibilidade do corpo do texto neste contraste.
Sugestões de cores acessíveis
Elas ajustam a luminosidade da cor do texto mantendo o matiz, até atingir o seu alvo.
Nenhuma versão acessível desta cor de texto conseguiu atingir o alvo sobre este fundo. Tente mudar a cor de fundo ou escolher outro matiz.
Torne seu texto acessível com este verificador de cores acessíveis gratuito. Informe as cores do texto e do fundo, escolha um nível alvo da WCAG e veja na hora se a combinação é acessível. Quando ela não atinge o mínimo, a ferramenta sugere cores de texto compatíveis com a WCAG que mantêm o matiz original mas ajustam a luminosidade até passar em AA ou AAA. Tudo roda no seu navegador, então nada é enviado e não há cadastro.
O que é um verificador de cores acessíveis?
Um verificador de cores acessíveis testa se a combinação de cor do texto e do fundo atende aos requisitos de contraste das Diretrizes de Acessibilidade para Conteúdo Web (WCAG), para que pessoas com baixa visão ou daltonismo consigam ler o seu conteúdo. Diferente de um verificador de contraste simples, que só informa se passou ou falhou, esta ferramenta vai além: quando uma combinação não é acessível, ela gera automaticamente cores de texto corrigidas que atingem o alvo escolhido mantendo-se o mais próximo possível da cor original.
Como corrigir cores inacessíveis
Defina suas cores e o alvo, e aplique uma das cores acessíveis sugeridas quando a combinação falhar.
- Informe a cor do texto, por exemplo #7a7a7a, pelo seletor ou pelo campo hex.
- Informe a cor de fundo, por exemplo #ffffff.
- Escolha o nível da WCAG que precisa atender (AA ou AAA, texto normal ou grande).
- Se a combinação falhar, revise as cores de texto acessíveis sugeridas e suas razões.
- Clique em Aplicar em uma sugestão para carregá-la como a nova cor do texto.
Como funcionam as sugestões de cor
Cada sugestão mantém o matiz e a saturação da cor do texto, mas desloca a luminosidade em HSL — tanto mais escura quanto mais clara — até o contraste com o fundo atingir a razão alvo. Isso gera cores acessíveis que ainda combinam com a sua marca ou paleta, em vez de trocar por cores sem relação. A sugestão com a maior razão aparece primeiro, para você escolher a opção mais segura ou a mais próxima da original.
Alvos AA e AAA da WCAG
O nível AA da WCAG exige no mínimo 4,5:1 para texto normal e 3:1 para texto grande, enquanto o nível mais rígido AAA exige 7:1 para texto normal e 4,5:1 para texto grande. Texto grande significa cerca de 18pt (24px) normal ou 14pt (18,66px) em negrito e acima. Use o seletor de alvo para verificar e corrigir exatamente no nível que o seu projeto precisa.
Por que usar este verificador de cores acessíveis?
- Diz na hora se uma combinação passa no nível WCAG escolhido.
- Sugere cores de texto acessíveis corrigidas quando a combinação falha.
- Mantém o matiz original para que as sugestões fiquem fiéis à marca.
- Suporta alvos AA e AAA para texto normal e grande.
- A pré-visualização ao vivo mostra um texto de exemplo nas suas cores.
- Roda inteiramente no seu navegador — grátis, sem anúncios, sem cadastro.
Perguntas frequentes
Qual a diferença para um verificador de contraste?
Um verificador de contraste apenas mede a razão e diz se passa. Este verificador de cores acessíveis faz isso também, mas quando as cores falham ele também gera cores de texto corrigidas que atingem o seu nível alvo, para você corrigir o problema com um clique em vez de tentar valores novos no chute.
Como as sugestões de cores acessíveis mantêm a identidade da marca?
As sugestões ajustam apenas a luminosidade da cor do texto em HSL, preservando o matiz e a saturação. Ou seja, a cor recomendada é uma versão mais clara ou mais escura da que você já tinha, mantendo o mesmo caráter em vez de substituí-la por uma cor sem relação.
Qual nível da WCAG devo buscar?
O nível AA (4,5:1 para texto normal, 3:1 para texto grande) é a base legal e de design mais comum e um bom padrão. Busque AAA (7:1 normal, 4,5:1 grande) para interfaces com muito texto ou onde a maior legibilidade importa.
Por que às vezes nenhuma cor acessível é encontrada?
Se o seu fundo fica no meio da faixa de luminosidade, nenhuma versão do matiz do seu texto pode ficar escura ou clara o bastante para atingir o alvo sobre ele. Nesse caso, mude a cor de fundo ou escolha outro matiz de texto, e a ferramenta procurará novamente.
Minhas cores são enviadas para algum lugar?
Não. Todos os cálculos de contraste e sugestões de cor acontecem localmente no seu navegador. Nada sobre as suas cores é enviado para um servidor.