Verificador de contraste de cores
Certifique-se de que seu texto e botões estejam legíveis para todos — e conserte cores que falham.
- Seus dados nunca saem do seu dispositivo
- 100% grátis
- Sem cadastro
- Funciona offline após a primeira carga
Como verificar o contraste de cores
- Clique em Texto ou Fundo e escolha ou cole uma cor.
- Leia a proporção, o AA / Resultados AAA e APCA, e ver a pré-visualização ao vivo.
- Aplique uma correção sugerida ou verifique uma paleta inteira na grade.
Sobre: Verificador de contraste
Verifique texto e cores de fundo contra WCAG 2.2 AA e AAA e o novo APCA.
Tudo funciona no seu navegador, por isso é instantâneo e privado. Suas cores e configurações recentes são lembradas neste dispositivo, e a barra de endereço mantém sua cor para que você possa compartilhá-la ou marcá-la.
Ideal para
- Sites e aplicativos acessíveis (WCAG / ADA / EN 301 549)
- Cores da marca para botões e links
- Cores de modo escuro e visualização de dados
Dica: Defina a visualização para o seu tamanho e peso de fonte real — texto grande ou negrito precisa de menos contraste.
Perguntas frequentes
Que relação de contraste eu preciso?
WCAG 2.2 nível AA precisa de 4.5:1 para texto normal e 3:1 para texto grande (24 px, ou 18.66 px negrito) e para partes da interface do usuário como fronteiras e ícones. Nível AAA precisa de 7:1 e 4.5:1.
O que é APCA?
O Algoritmo de Contraste Perceptivo Acessível proposto para WCAG 3. Ele dá um valor Lc que é responsável pelo tamanho da fonte e modo escuro melhor do que a proporção 2.x. Lc 75+ combina texto corporal, 60+ texto de conteúdo, 45+ manchetes.
Minhas cores falham. — E agora?
Use "Corrigir": ele encontra o texto mais próximo ou a cor de fundo (mesma tonalidade, leveza ajustada) que passa AA ou AAA. Clique em um para aplicá-lo.
Posso verificar uma paleta inteira?
Sim. — mude para "Palette grid", liste suas cores e veja cada combinação de texto / background com sua proporção e nota.
O contraste importa para ícones e botões?
Sim. WCAG pede pelo menos 3:1 para partes da interface do usuário e gráficos significativos, como ícones, bordas de entrada e contornos de foco.