Cinco resultados explícitos
O verificador de contraste de cores separa AA normal, AAA normal, AA grande, AAA grande e a referência UI 3:1. Cada limite permanece no uso correto.
Ferramenta gratuita WCAG 2.2
Verificador de contraste de cores WCAG AA e AAA
Use este verificador de contraste de cores para medir frente e fundo, entender os limites, ver uma interface real e encontrar uma cor próxima aprovada sem enviar sua paleta.
Atualizado em 25 de julho de 2026
verificador de contraste de cores
O que este verificador de contraste de cores testa?
Este verificador de contraste de cores calcula a relação WCAG entre dois HEX. Ele separa AA e AAA para texto normal e grande, a referência 3:1 de UI, uma prévia e uma matriz. O verificador de contraste de cores também procura um primeiro plano HSB próximo que chegue a 4.5:1 ou 7:1. Um resultado aprovado não certifica uma página inteira.
Da relação para uma decisão de design
O verificador de contraste de cores reúne número, contexto visual e correção.
Prévia parecida com UI real
O verificador de contraste de cores aplica o par a título, texto, botão e selo. Problemas aparecem antes dos valores entrarem no sistema de componentes.
Matriz da paleta inteira
Adicione duas a oito cores e o verificador de contraste de cores mede cada par. Assim surgem combinações que um cálculo isolado esconderia.
WCAG 2.2 · HEX · HSB
Usar o verificador de contraste de cores
Informe duas cores HEX. Todos os cálculos são locais e imediatos.
Aprovado · AA texto normal
Prévia de interface legível
A amostra usa o primeiro plano em texto, bordas e controles sobre o fundo escolhido.
Encontrar primeiro plano próximo aprovado
A busca preserva a matiz quando possível e altera o mínimo de saturação e brilho HSB.
Todos os cálculos ficam neste navegador.
:root {
--accessible-foreground: #1F2937;
--accessible-background: #F9FAFB;
}
.your-component {
color: var(--accessible-foreground);
background: var(--accessible-background);
}Matriz de contraste da paleta
Adicione duas a oito cores. Cada célula compara a linha com a coluna.
| Cor | 1#1F2937 | 2#F9FAFB | 3#2563EB | 4#F59E0B |
|---|---|---|---|---|
1#1F2937 | — | 14.05:1AA | 2.84:1Abaixo de 3:1 | 6.83:1AA |
2#F9FAFB | 14.05:1AA | — | 4.95:1AA | 2.06:1Abaixo de 3:1 |
3#2563EB | 2.84:1Abaixo de 3:1 | 4.95:1AA | — | 2.41:1Abaixo de 3:1 |
4#F59E0B | 6.83:1AA | 2.06:1Abaixo de 3:1 | 2.41:1Abaixo de 3:1 | — |
Limites de contraste WCAG 2.2
O verificador de contraste de cores separa os limites de texto da referência não textual 3:1.
| Uso | Nível | Relação mínima | Significado |
|---|---|---|---|
| Texto normal | AA | 4.5:1 | Texto abaixo da definição WCAG de texto grande. |
| Texto grande | AA | 3:1 | 24 CSS px normal ou cerca de 18.5 CSS px em negrito. |
| Texto normal | AAA | 7:1 | Meta ampliada para texto menor. |
| Texto grande | AAA | 4.5:1 | Meta ampliada para texto grande. |
| UI e gráficos | AA | 3:1 | Informação visual necessária contra cores adjacentes. |
Revisão de contraste em três etapas
Use o verificador de contraste de cores como uma revisão repetível.
1. Testar as cores de produção
Cole os tokens reais no verificador de contraste de cores. Não capture uma tela comprimida se o HEX original estiver disponível. Teste separadamente os estados padrão, hover, ativo, foco, erro, selecionado e desativado.
2. Escolher o limite correto
Use 4.5:1 para texto AA comum e 7:1 para AAA. Só aplique o limite menor de texto grande quando tamanho e peso cumprirem a definição. Bordas, ícones e estados essenciais devem seguir a regra não textual 3:1.
3. Verificar o componente final
Depois do verificador de contraste de cores, revise zoom, ambos os temas e texto real. Confirme foco visível, sinais sem cor e todos os estados. A matemática encontra a relação; a revisão humana encontra o contexto.
Como o verificador de contraste de cores calcula
O verificador de contraste de cores lineariza cada canal sRGB e aplica os pesos de luminância relativa WCAG: 0.2126 vermelho, 0.7152 verde e 0.0722 azul. Depois calcula (L1 + 0.05) / (L2 + 0.05), com L1 mais claro. Cores iguais dão 1:1; preto e branco dão 21:1.
Trocar frente e fundo não altera o número, mas o contexto continua importante. Transparência, gradientes, imagens, mistura e sombras criam outros pixels. Componha a transparência no fundo real e insira o resultado sólido no verificador de contraste de cores.
Por que um resultado aprovado não é certificado
A conformidade WCAG vale para páginas e processos completos. Um verificador de contraste de cores não sabe se o texto é realmente grande, se um ícone traz informação ou se cor é a única pista. Teclado, nomes, papéis, ordem de foco e conteúdo exigem outros testes.
Trate o verificador de contraste de cores como uma etapa da auditoria. Registre componente, estado, tokens, limite, data e resultado. Esse histórico explica ajustes e torna mudanças de tema mais seguras.
Checklist de entrega do verificador de contraste de cores
Conclua estes itens antes de aceitar o resultado como evidência.
- 01
verificador de contraste de cores: Usar HEX original em vez de amostra de captura comprimida.
- 02
verificador de contraste de cores: Testar temas claro e escuro separadamente.
- 03
verificador de contraste de cores: Testar padrão, hover, foco, ativo, seleção, erro e desativado.
- 04
verificador de contraste de cores: Aplicar 4.5:1 ao texto AA comum sem exceção.
- 05
verificador de contraste de cores: Aplicar 7:1 quando o texto normal precisar de AAA.
- 06
verificador de contraste de cores: Confirmar tamanho e peso antes de classificar texto grande.
- 07
verificador de contraste de cores: Revisar ícones, limites e estados essenciais contra 3:1.
- 08
verificador de contraste de cores: Compor transparência antes de informar a cor visível.
- 09
verificador de contraste de cores: Medir a área mais fraca de imagem ou gradiente.
- 10
verificador de contraste de cores: Adicionar pista sem cor para erros, links e estados.
- 11
verificador de contraste de cores: Testar foco contra os dois estados próximos.
- 12
verificador de contraste de cores: Aplicar zoom e confirmar conteúdo e função.
- 13
verificador de contraste de cores: Usar texto real, não apenas uma amostra curta.
- 14
verificador de contraste de cores: Registrar componente, estado, tokens, limite, resultado e data.
- 15
verificador de contraste de cores: Escolher pares aprovados, sem exigir todas as combinações.
- 16
verificador de contraste de cores: Repetir depois de mudar um token compartilhado.
- 17
verificador de contraste de cores: Revisar cores forçadas quando houver suporte.
- 18
verificador de contraste de cores: Combinar relação, teclado, leitor de tela e revisão visual.
Fontes primárias WCAG
O verificador de contraste de cores segue a fórmula e os limites publicados; documentos oficiais permanecem como autoridade.
- WCAG 2.2 1.4.3 define 4.5:1 para texto AA normal e 3:1 para texto AA grande. Critérios de contraste WCAG 2.2
- WCAG 2.2 1.4.6 define 7:1 para texto AAA normal e 4.5:1 para texto AAA grande. Critérios de contraste WCAG 2.2
- WCAG 2.2 1.4.11 define 3:1 para informação necessária de UI e gráficos contra cores adjacentes. Contraste não textual WCAG 2.2
O critério de texto AA afirma:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Fontes do verificador de contraste de cores
Depois do verificador de contraste de cores
Perguntas sobre contraste
Qual relação de contraste é boa?
Para texto comum, o verificador de contraste de cores usa 4.5:1 como mínimo AA e 7:1 para AAA. Texto grande usa 3:1 e 4.5:1; informação essencial de UI geralmente usa 3:1.
3:1 passa no WCAG AA?
Pode passar para texto grande qualificado e informação não textual, mas não para texto AA comum. O verificador de contraste de cores separa esses resultados.
É possível testar transparência?
O verificador de contraste de cores aceita HEX sólidos. Componha a transparência no fundo real primeiro. Em imagem ou gradiente, meça a área com menor contraste.
Como funciona o ajuste automático?
O verificador de contraste de cores pesquisa saturação e brilho HSB mantendo a matiz quando possível. Ele sugere um primeiro plano próximo, que deve ser revisto no design.
A aprovação torna a página acessível?
Não. Um verificador de contraste de cores valida uma relação matemática. Estrutura, teclado, foco, rótulos, alternativas e o processo completo também exigem testes.