Verificador de contraste
Calcule a taxa de contraste WCAG entre duas cores com selos AA e AAA para texto normal e grande, além de pré-visualização ao vivo. Tudo no navegador.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
Limites WCAG — texto normal: AA ≥ 4.5, AAA ≥ 7; texto grande (≥ 24 px, ou ≥ 18.7 px em negrito): AA ≥ 3, AAA ≥ 4.5.
Esta ferramenta roda inteiramente no seu navegador. Seus dados nunca saem do seu dispositivo e não são enviados a nenhum servidor.
Como usar
- 1Digite um valor hex ou rgb(), ou use o seletor, para a cor do texto.
- 2Faça o mesmo para a cor de fundo.
- 3Leia a taxa e os selos AA / AAA, ou toque em um par predefinido.
- 4Confira o bloco de pré-visualização para julgar a combinação com os próprios olhos.
Verificador de contraste
Informe uma cor de texto e uma de fundo — hex como #333 ou #1F2937, ou rgb()/rgba() — e receba a taxa de contraste WCAG com duas casas decimais, com selos imediatos de passa / não passa para os quatro limites que importam: AA e AAA, para texto normal e grande. Uma pré-visualização ao vivo mostra texto de corpo e texto grande nas cores reais.
O cálculo usa a fórmula oficial de luminância relativa do WCAG 2.x — a mesma do verificador do W3C — então um 4.5 aqui é 4.5 em qualquer lugar. Os presets incluem um par cinza de 4.54:1 bem na linha para você sentir o quanto o limite do AA é apertado.
Perguntas frequentes
Qual taxa de contraste eu preciso para passar?
WCAG 2.x: texto normal precisa de 4.5:1 para AA e 7:1 para AAA. Texto grande — pelo menos 24 px, ou 18.7 px em negrito — precisa de 3:1 para AA e 4.5:1 para AAA. Componentes de interface e elementos gráficos precisam de 3:1.
Como a taxa é calculada?
Cada cor é linearizada do sRGB e combinada em uma luminância relativa L = 0.2126·R + 0.7152·G + 0.0722·B; a taxa é (L mais claro + 0.05) / (L mais escuro + 0.05). É a fórmula exata da especificação WCAG 2.x, idêntica à do verificador oficial do W3C.
E cores semitransparentes?
Um alfa rgba() abaixo de 1 é achatado sobre o branco antes do cálculo. O WCAG não tem conceito de transparência — componha a cor sobre o fundo real primeiro, ou informe a cor opaca resultante, para números oficiais.
Ferramentas relacionadas
Conversor de cores
Cole uma cor em hex, rgb() ou hsl() e receba os três formatos mais uma fileira de tons e sombras pronta para o seu design system.
Todas as ferramentas →
Seletor de cores
Escolha uma cor na paleta ou capture uma direto da tela com a API EyeDropper — hex, RGB e HSL copiáveis num clique.
Todas as ferramentas →
Calculadora de notas
Calculadora de notas ponderada ou por pontos: adicione atividades, veja sua nota e conceito atuais e descubra o que precisa no exame final.
Todas as ferramentas →
Incorporar esta ferramenta
Coloque esta ferramenta no seu site com uma linha — ela roda no navegador do visitante.
<iframe src="https://zoyku.com/pt/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>