Etapa 1
Informe as cores de texto e fundo
Escolha ou digite valores HEX opacos. Um valor inválido ou incompleto mostra um erro enquanto a última cor válida permanece ativa.
Ferramentas de design grátis
Verificador de contraste de cores WCAG gratuito: AA e AAA
Teste cores de texto e fundo segundo WCAG 2.2 AA e AAA. Veja a proporção de contraste exata, visualize o tamanho e o peso de fonte selecionados e identifique se o par é aprovado.
Verifique um par de cores exato
Os resultados usam luminância relativa WCAG 2.2. A aprovação ou reprovação usa o valor completo, embora a proporção grande seja arredondada para exibição.
#RGB ou #RRGGBB opaco. Pressione Enter ou saia do campo para aplicar.
#RGB ou #RRGGBB opaco. Pressione Enter ou saia do campo para aplicar.
Pares de exemplo
Visualização de texto ao vivo
Texto legível ajuda todas as pessoas a concluir a tarefa com menos esforço.
Proporção de contraste17.46:1Completa: 17.457:1
Exemplo ativo
AA aprovado para texto texto normal
Precisa de 4.5:1 para AA e 7:1 para AAA neste tamanho e peso.
Verificação WCAGMínimoResultado
Texto normal AA4.5:1Aprovado
Texto grande AA3:1Aprovado
Texto normal AAA7:1Aprovado
Texto grande AAA4.5:1Aprovado
UI e gráficos AA3:1Aprovado
O exemplo ativo atende a AA. Mantenha o tamanho e peso selecionados e repita a verificação para cada estado que use um par de cores diferente.
A linha de UI e gráficos só se aplica quando essas cores representam o visual essencial e sua cor adjacente real. O resultado de um par não é uma auditoria de acessibilidade de todo o site.
Como conferir contraste de cores online
Etapa 2
Defina o tamanho e o peso do texto de amostra
Faça corresponder ao contexto CSS pretendido para que o veredito ativo use o limite WCAG correto para texto normal ou grande.
Etapa 3
Revise, corrija e copie o resultado
Leia a matriz de proporção e aprovação ou reprovação, experimente a sugestão AA quando necessário e copie um resultado conciso para encaminhar.
Entenda os resultados de contraste WCAG AA e AAA
Uma proporção calculada é comparada a diferentes limites do WCAG 2.2 conforme o tamanho e peso do texto e o nível de conformidade.
Texto normal usa o limite AA de 4,5:1
Texto de corpo, rótulos, legendas e outros textos abaixo da definição de texto grande precisam de pelo menos 4,5:1 para AA. A ferramenta compara o valor completo, portanto um resultado arredondado exibido nunca transforma uma reprovação em aprovação.
Texto grande pode usar o limite AA de 3:1
O texto se qualifica como grande a 24 px em peso regular ou cerca de 18,67 px em negrito. Um elemento de título ou rótulo visualmente destacado não é automaticamente texto grande.
AAA usa limites de 7:1 e 4,5:1
O contraste aprimorado exige 7:1 para texto normal e 4,5:1 para texto grande. Trate esses valores como resultados para o par selecionado, não como uma alegação de que a página inteira atende ao nível AAA.
Corrija um par de cores que não atende
Um resultado reprovado deve levar a uma próxima etapa concreta, preservando espaço para a revisão da marca e do sistema de design.
Experimente a cor de texto AA sugerida
A sugestão move o primeiro plano em direção ao preto ou branco até alcançar a meta AA da amostra ativa. É uma correção prática, não a alegação de ser a cor de marca perceptualmente mais próxima.
Compare texto preto e branco
Testar extremos simples ajuda a revelar qual direção melhora o par. Use essa direção para ajustar deliberadamente uma tonalidade de marca em vez de alterar várias variáveis de uma vez.
Confira novamente cada estado interativo
Estados de passar o mouse, foco, selecionado, desativado, placeholder, visitado e erro podem introduzir novos pares. Repita a verificação sempre que as cores de primeiro plano, limite, ícone ou superfície mudarem.
Confira componentes de interface, ícones e estados de design
Elementos visuais essenciais que não são texto têm um requisito separado de 3:1 contra sua cor adjacente relevante, e a cor não deve transmitir significado sozinha.
Teste limites e gráficos essenciais
Use os campos de primeiro plano e fundo para a borda real de entrada, contorno de botão, ícone, segmento de gráfico ou indicador de foco e a superfície diretamente ao lado.
Confira estados de foco, selecionado e erro
Um componente pode ser aprovado em repouso e falhar após a interação. Teste cada estado significativo usando as cores que são realmente renderizadas nesse estado.
Não use a cor como único sinal
Adicione texto, ícones, padrões, formas ou outra indicação visível para status e significado. Uma proporção forte não torna uma instrução baseada somente em cor compreensível para todas as pessoas.
Saiba o que um teste de contraste de cor sólida não pode provar
O resultado é determinístico para duas cores sRGB opacas especificadas, mas interfaces reais ainda precisam de avaliação manual e contextual.
Imagens, gradientes e transparência precisam de contexto
O fundo efetivo pode variar em um elemento. Avalie o design final composto e confira as áreas de menor contraste em vez de considerar um único par sólido como representativo.
Fontes finas e a renderização ainda afetam a legibilidade
Antialiasing e glifos finos podem parecer mais claros do que a cor CSS especificada. A aprovação do par calculado é necessária, mas a revisão visual no tamanho pretendido continua importante.
A aprovação de um par não é uma auditoria completa de acessibilidade
Contraste é um requisito entre muitos. Uma revisão completa também abrange todos os componentes e estados, estrutura, operação por teclado, zoom e reflow e comportamento com tecnologias assistivas.
Privacidade e limites
O cálculo é executado nesta aba do navegador. Este verificador aceita cores sRGB opacas #RGB e #RRGGBB; ele não inspeciona gradientes, imagens, transparência nem um site inteiro.
- • Apenas cores sRGB opacas #RGB e #RRGGBB são aceitas.
- • O resultado verifica um par de cores e não é uma certificação legal de acessibilidade nem de um site inteiro.
- • Gradientes, imagens de fundo, transparência, renderização de fontes finas e estados variáveis exigem revisão contextual.
Perguntas frequentes
Este verificador de contraste de cores é gratuito?
Sim. O verificador de contraste de cores é gratuito para usar online, sem cadastro ou login, e o resultado não fica oculto atrás de uma conta.
Qual proporção de contraste atende ao WCAG AA?
O WCAG 2.2 AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Informações visuais essenciais em componentes de interface e objetos gráficos também precisam de pelo menos 3:1 contra a cor adjacente relevante.
Qual proporção de contraste atende ao WCAG AAA?
O WCAG 2.2 AAA exige pelo menos 7:1 para texto normal e 4,5:1 para texto grande. Um resultado AAA para um par não significa que uma página ou site inteiro esteja em conformidade com o nível AAA.
O que conta como texto grande no WCAG?
Texto grande tem pelo menos 24 pixels CSS em peso regular, ou cerca de 18,67 pixels CSS em negrito. Esta ferramenta considera o peso 700 como negrito e usa o tamanho e o peso selecionados para classificar a prévia ativa.
Uma proporção exibida de 4,50:1 sempre atende ao AA para texto normal?
Não. A proporção visível é arredondada para duas casas decimais para facilitar a leitura, mas a aprovação ou reprovação usa o valor calculado completo. Um valor como 4,499:1 não é arredondado para cima para cumprir o requisito de 4,5:1.
Esta ferramenta pode sugerir uma cor aprovada?
Quando a amostra de texto ativa não atende ao AA, a ferramenta pode sugerir um ajuste prático de primeiro plano em direção ao preto ou branco que alcance o limite ativo. Revise a sugestão em relação à sua marca, sistema de design e todos os estados interativos antes de usá-la.
Posso conferir botões, ícones e bordas de formulários?
Sim, quando as duas cores selecionadas representam o limite essencial do componente, ícone ou gráfico e sua cor adjacente real. Use a linha AA para interface e gráficos, que verifica o limite de 3:1, e teste cada estado distinto separadamente.
Posso conferir gradientes, imagens ou cores transparentes?
Não com este verificador de cores sólidas. Ele aceita cores HEX sRGB opacas porque gradientes, imagens e transparência podem criar fundos efetivos diferentes no mesmo elemento e precisam de avaliação contextual.
Um resultado aprovado torna meu site compatível com WCAG?
Não. Este resultado cobre um par de cores especificado. Uma revisão completa de acessibilidade também precisa verificar todos os estados e componentes, uso do teclado, semântica, zoom e reflow, estrutura de conteúdo e comportamento com tecnologias assistivas.
A ferramenta envia ou salva minhas cores?
Nenhum serviço externo é usado para o cálculo. Suas cores, texto de amostra e configurações permanecem na aba atual do navegador e voltam aos valores iniciais quando a página é recarregada.
Ferramentas relacionadas
Sd Ferramentas de design grátis
Escolha e converta uma cor
Seletor de cores
Escolha uma cor visualmente ou informe um valor HEX; depois, ajuste RGB, HSL e opacidade. Visualize o resultado, compare tons próximos e copie o código de cor exato sem login.
Gd Ferramentas de design grátis
Crie um gradiente CSS
Gerador de gradiente CSS
Crie gradientes lineares, radiais ou cônicos com duas a seis paradas de cor. Visualize o resultado ao vivo, ajuste a direção ou origem relevante e copie CSS pronto para usar sem fazer login.
Gd Ferramentas de design grátis
Crie uma sombra CSS
Gerador de sombra de caixa CSS
Crie sombras CSS em camadas com até quatro camadas editáveis. Ajuste deslocamentos, desfoque, expansão, cor, opacidade e modo inset, visualize o resultado e copie o CSS sem login.
Od Ferramentas de design grátis
Otimize um ícone SVG
Otimizador de SVG
Envie ou cole marcação SVG, otimize-a localmente com SVGO e compare o código, tamanho do arquivo e resultado visual antes de baixar. Não é necessário login nem envio ao servidor.