01
Indicar as camadas visíveis
Digite três ou seis dígitos HEX. A opacidade do texto tem campo próprio; um HEX de oito dígitos não é cortado silenciosamente.
Color & Accessibility
verificador de contraste de corespara texto legível
Informe duas cores HEX e ajuste opacidade e tipografia para conferir os cinco limites WCAG.
verificador de contraste de cores
Texto de exemplo
Razão de contraste
4.48:1
Resultado do texto escolhido: Reprovado · AA · Limite 4.5:1
Critério de texto normal · Primeiro plano composto: #777777
Texto normal AA · 4.5:1Reprovado
Texto normal AAA · 7:1Reprovado
Texto grande AA · 3:1Aprovado
Texto grande AAA · 4.5:1Reprovado
Interface/gráficos AA · 3:1Aprovado
Prévia das cores
Esta frase mostra o tamanho e as cores escolhidas.
Cores sugeridas que passam
Ajustar primeiro plano
#767676 · 4.54:1
Ajustar fundo
#060606 · 4.52:1
O cálculo ocorre no navegador; as cores não são enviadas.
Condições do texto
O resultado está atualizado.
Um cinza pode parecer nítido no arquivo de design e ainda ficar um pouco abaixo de AA sobre um cartão branco. O verificador de contraste de cores revela essa diferença antes da publicação.
Uma calculadora de contraste WCAG deve medir a cor como aparece na tela. Este verificador de contraste de cores compõe a frente semitransparente com o fundo antes de medir a luminância.
Por que usar este verificador de contraste de cores
A cor visível orienta o cálculo; duas mudanças possíveis ficam lado a lado.
Considerar a transparência real
Uma letra escura com 50% de opacidade fica mais clara sobre branco. O verificador de contraste de cores mostra o HEX resultante e só então calcula a razão, sem tratar o valor original como opaco.
Comparar correções sem perder a cor original
Quando o objetivo falha, há uma proposta para o texto e outra para o fundo, cada uma com a nova razão. A aplicação é explícita e pode ser desfeita uma vez.
Três ajustes antes de confiar no resultado
A razão só faz sentido quando as camadas e a condição do texto refletem o layout.
02
Escolher tamanho e peso reais
Texto regular é grande a partir de 24px; em negrito, a partir de aproximadamente 18,67px. A verificação automática aguarda uma pausa curta e pode ser desligada.
03
Ler a aprovação sem arredondar
A razão exibida tem duas casas, mas a decisão usa o valor inteiro. Após alterar um parâmetro, cópia e aplicação aguardam o resultado atualizado.
O que cada avaliação considera
Separe o número calculado do limite apropriado para texto ou interface.
Composição da cor da frente
A opacidade entre 0 e 100% é aplicada sobre o fundo opaco. O HEX visível permite conferir por que a taxa muda quando a transparência muda.
Critério do tamanho da fonte
Texto normal precisa de 4,5:1 para AA, enquanto texto grande precisa de 3:1. Uma legenda regular de 20px continua sendo texto normal.
Cinco respostas independentes
AA e AAA para texto normal e grande, mais AA para gráficos úteis, aparecem juntos. Alterar a meta muda a resposta destacada, não a taxa calculada.
Duas sugestões reversíveis
Uma sugestão altera o primeiro plano e outra altera o fundo pela luminosidade. Ambas exibem o novo resultado antes de mudar qualquer campo.
Limites de uma única combinação
Uma aprovação dessa dupla não representa toda a experiência do site.
- Fundo sólido e opaco
- Um fundo transparente depende de uma camada inferior desconhecida. Foto e gradiente variam por pixel e exigem amostragem além de dois códigos HEX.
- Somente HEX curto ou completo
- São aceitos três ou seis dígitos, com ou sem #. Nomes CSS, rgb(), hsl(), OKLCH e HEX de oito dígitos não são convertidos automaticamente.
- Sem garantia de acessibilidade geral
- O teste de contraste AA AAA mede esta dupla e esta condição de texto. Foco, teclado, semântica e outras cores ainda precisam de revisão.
- Sem misturar APCA
- Os níveis AA e AAA aqui seguem WCAG 2.x. APCA tem fórmula e escala diferentes, portanto não entra na mesma aprovação.
Dúvidas sobre o verificador de contraste de cores
Entenda tamanho do texto, limites AA/AAA, transparência e alcance da análise.
Qual é o contraste mínimo para texto normal?
Para texto normal, AA exige pelo menos 4,5:1 e AAA exige 7:1. O verificador de contraste de cores compara a razão sem arredondar, mesmo exibindo duas casas decimais.
O que é considerado texto grande pelas WCAG?
Texto grande tem ao menos 24px em peso normal, ou cerca de 18,67px em negrito. O limite AA cai para 3:1 nesse caso.
Qual é a diferença entre AA e AAA?
AA usa 4,5:1 para texto normal e 3:1 para grande. AAA sobe esses valores para 7:1 e 4,5:1, respectivamente.
Como verificar cores com transparência?
A cor do texto é composta com o fundo opaco canal por canal antes da medição. Com 0% de opacidade, o texto vira a cor do fundo e a taxa é 1:1.
Passar no teste de contraste garante acessibilidade ao site todo?
Não. A aprovação vale para esta dupla nas condições escolhidas. Navegação por teclado, foco, estrutura e demais estados ainda devem ser avaliados.
Encontrou uma dupla avaliada incorretamente?
Abra o verificador de contraste de cores
Use o verificador de contraste de cores ao revisar rótulos, botões e tokens de um sistema de design.
Copie a razão atual ou veja uma cor sugerida antes de aplicá-la.
Cálculo local de uma dupla conforme WCAG 2.x.