Verificador de Contraste de Cores
Garanta que seu site seja legível para todos. Nosso Verificador de Contraste de Cores gratuito calcula a proporção exata entre as cores do seu texto e do fundo, verificando a conformidade com as diretrizes de acessibilidade WCAG.
Sample Heading
This is an example paragraph to test readability and visual contrast.
WCAG 2.1 Compliance Status
O que é o Verificador de Contraste de Cores - Ferramenta de Acessibilidade WCAG?
O Verificador de Contraste de Cores é uma ferramenta de acessibilidade na web. Ele avalia matematicamente a luminância relativa de uma cor de primeiro plano (texto) em relação a uma cor de fundo para determinar se há diferença visual suficiente para que usuários com deficiência visual consigam ler o texto confortavelmente.
Como usar o Verificador de Contraste de Cores - Ferramenta de Acessibilidade WCAG
- Digite o código HEX para a cor do seu texto/primeiro plano.
- Digite o código HEX para a cor de fundo.
- A ferramenta calcula a taxa de contraste (por exemplo, 4,5:1).
- Ele exibe uma nota de Aprovação/Reprovação para os padrões WCAG AA e AAA.
Exemplo
Você testa texto preto puro (#000000) em um fundo branco puro (#FFFFFF). A ferramenta calcula a razão de contraste máxima possível de exatamente 21:1, passando facilmente por todos os requisitos de acessibilidade AAA.
Entendendo Seus Resultados
Uma proporção mais alta significa que o texto é mais fácil de ler. As Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) exigem uma proporção mínima de 4,5:1 para texto normal (padrão AA) e 7:1 para acessibilidade rigorosa (padrão AAA).
Casos de Uso Comuns
- Auditorias de Acessibilidade na Web: Garantindo que um site corporativo não viole as leis de conformidade com a ADA relacionadas à legibilidade.
- Design de UI/UX: Verificando se um texto de espaço reservado cinza claro dentro de um campo de entrada branco é muito difícil de ler.
- Diretrizes da Marca: Verificando se as cores da marca podem ser sobrepostas com segurança umas sobre as outras em gráficos de marketing.
Como funciona
A ferramenta converte ambos os códigos HEX para RGB, aplica uma fórmula matemática específica para calcular a 'luminância relativa' de ambas as cores e, em seguida, divide a luminância mais clara pela luminância mais escura. O resultado é uma proporção entre 1:1 (sem contraste) e 21:1 (contraste máximo).
Dicas e Notas de Precisão
- •Texto grande (acima de 18pt ou 14pt em negrito) é mais fácil de ler, então o WCAG exige apenas uma razão mínima de 3:1 para passar o padrão AA.
- •O daltonismo afeta a percepção de tonalidades, mas o contraste de luminância relativa continua sendo o fator mais importante para a legibilidade.
Perguntas Frequentes
O que acontece se minhas cores falharem na verificação?
Se eles falharem, seu texto será muito difícil de ler para pessoas com baixa visão ou daltonismo. Você deve escurecer a cor do texto ou clarear a cor do fundo até que a proporção atinja pelo menos 4,5:1.
21:1 é o melhor contraste?
Matematicamente, sim. No entanto, texto preto puro em fundos brancos puros (21:1) pode causar cansaço visual ou 'halation' para alguns usuários com dislexia. Cinza muito escuro (por exemplo, #222222) sobre branco off-white é frequentemente preferido.
Ferramentas relacionadas
Seletor de Cores
Procurando o tom exato de azul para o fundo do seu site? Nosso Seletor de Cores online gratuito permite que você selecione visualmente as cores e fornece os formatos de código exatos que desenvolvedores e designers precisam.
Gerador de Paleta de Cores
Começando um novo projeto de design, mas está preso nas cores? Nosso Gerador de Paleta de Cores gratuito cria automaticamente esquemas de cores impressionantes e matematicamente equilibrados para iniciar sua criatividade.
Conversor de HEX para RGB
Tem um código de cor hexadecimal, mas precisa dos valores RGB para adicionar um canal de opacidade no CSS? Nosso conversor gratuito de HEX para RGB traduz instantaneamente strings de cores hexadecimais em números inteiros padrão de Vermelho, Verde e Azul.
Formatador JSON Online Grátis
Trabalhar com dados JSON não formatados pode ser uma dor de cabeça para os desenvolvedores. Nosso Formatador JSON online gratuito torna simples embelezar e validar suas strings JSON. Esteja você depurando uma resposta de API ou escrevendo arquivos de configuração, nossa ferramenta destaca erros para você.
Popular
Calculadora de Idade
Quer saber exatamente quantos anos você tem, até o dia? Nossa calculadora de idade gratuita fornece uma resposta precisa em segundos: anos, meses, dias, o número total de dias vividos e uma contagem regressiva até seu próximo aniversário. Todo o processamento acontece localmente no seu navegador — sua data de nascimento nunca sai do seu dispositivo.
Calculadora de Porcentagem
Dificuldade com matemática de porcentagem? Nosso Calculador de Porcentagem gratuito resolve todas as questões padrão de porcentagem instantaneamente, desde calcular descontos até descobrir impostos.
Isenção de Responsabilidade: Esta ferramenta calcula o contraste com base no algoritmo padrão WCAG 2.1 para luminância relativa.