devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Verificador de Contraste de Cores WCAG

Informe uma cor de texto e uma cor de fundo para obter a razão de contraste WCAG exata, o resultado de aprovado ou reprovado em cada nível, uma pontuação APCA e correções com um clique que mantêm o seu tom.

Atualizado em
Exemplos:
–
UsoMínimoAAAAA
Texto normal
abaixo de 24px, ou abaixo de 18,66px em negrito
4,5:1 · 7:1
Texto grande
24px+, ou 18,66px+ em negrito
3:1 · 4,5:1
Componentes de UI & gráficos
ícones, bordas de campos, indicadores de foco
3:1—
APCA (rascunho WCAG 3): Lc –
Texto grande — 24px normal
Texto grande em negrito — 18,66px negrito

Texto corrido normal em 16px. Um pequeno trecho de texto para checar se a leitura é confortável mesmo sob a luz forte do sol.

Texto pequeno em 13px é onde o baixo contraste mais prejudica.

BotãoBorda do campo

Cores aprovadas mais próximas

Cada sugestão mantém o matiz e a saturação e altera apenas a luminosidade, na menor quantidade que atinge o alvo.

AjusteSugestãoRazão

Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

Como usar: Verificador de Contraste

  1. Informe a cor do texto e a cor de fundo (HEX, rgb(), hsl(), oklch() ou um nome CSS), ou use os seletores de cor.
  2. Confira a razão de contraste e os resultados AA/AAA para texto normal, texto grande e componentes de UI.
  3. Veja a pré-visualização ao vivo: títulos, texto corrido, texto pequeno, um botão e a borda de um campo.
  4. Se um nível falhar, clique em Usar ao lado da cor aprovada mais próxima para aplicá-la e copie o novo HEX para o seu CSS.

O que é a razão de contraste de cores?

A razão de contraste compara a luminância relativa de duas cores em uma escala que vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco). As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) a utilizam para decidir se um texto é legível para pessoas com baixa visão ou com deficiência na percepção de cores — e para qualquer pessoa que esteja lendo o celular sob luz forte. Ela também é um parâmetro legal: leis de acessibilidade, como o European Accessibility Act e o ADA, costumam ser avaliadas com base no nível AA da WCAG 2.x.

Requisitos de contraste da WCAG 2.2

CritérioNívelTexto normalTexto grande
1.4.3 Contraste (Mínimo)AA4,5:13:1
1.4.6 Contraste (Reforçado)AAA7:14,5:1
1.4.11 Contraste de elementos não textuaisAA3:1 para bordas de componentes de UI, indicadores de foco e ícones/gráficos significativos

Texto grande significa pelo menos 18 pt (24 px) em peso normal ou 14 pt (≈18,66 px) em negrito. Logotipos, textos puramente decorativos e o texto de controles desativados são isentos.

Como a razão é calculada

Cada canal sRGB é linearizado (valores ≤ 0,04045 são divididos por 12,92; os demais usam ((c + 0,055) / 1,055)2,4) e depois combinado na luminância relativa: L = 0,2126 R + 0,7152 G + 0,0722 B. A razão é (Lmais clara + 0,05) / (Lmais escura + 0,05). Os limites são rigorosos: #777777 sobre branco tem 4,47:1 e reprova no AA, enquanto #767676 chega a 4,54:1 e passa. Por isso este verificador trunca a razão exibida em vez de arredondá-la. Textos semitransparentes são primeiro mesclados ao fundo, exatamente como o navegador os renderizaria.

O que é APCA?

O Accessible Perceptual Contrast Algorithm (APCA) é o método de contraste candidato para a futura WCAG 3. Ele informa um valor de contraste de luminosidade Lc que vai de aproximadamente 0 a 106 (negativo para texto claro sobre fundo escuro) e leva em conta a polaridade — texto claro sobre escuro e escuro sobre claro não são percebidos da mesma forma. Como referência, Lc 90 é o recomendado para texto corrido, Lc 75 é o mínimo para texto corrido e Lc 60 para outros conteúdos textuais. O APCA ainda é um rascunho, então para conformidade hoje use a WCAG 2.x e trate o APCA como uma segunda opinião, especialmente em temas escuros.

Como corrigir um par que reprova

A tabela de sugestões encontra a cor aprovada mais próxima alterando apenas a luminosidade HSL do texto ou do fundo, assim o tom da sua marca se mantém. Para variações mais escuras ou mais claras de uma cor da marca, gere uma escala completa de tons e sombras com o Conversor de Cores e teste os pares aqui. No Webflow, a Vision preview do Designer simula a deficiência na percepção de cores, mas não mostra a razão — confira os números exatos aqui antes de publicar.

Também pesquisado como: verificador de contraste de cores, contraste wcag, razão de contraste, acessibilidade, a11y, aa aaa, apca, acessibilidade de cores.

Ferramentas que combinam com: Verificador de Contraste

  • Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
  • Verificador de Alt de Imagens — Audite todas as imagens de uma página em uma tabela: status do texto alt, tamanho do arquivo, atributos de largura/altura, formato e lazy loading — com filtros e exportação em CSV.
  • Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
  • Conversor HEX para RGBA — Cole um código HEX, arraste o slider de opacidade e copie o CSS exato que você precisa: rgba() tradicional, rgb( / alpha) moderno ou HEX de 8 dígitos.

Perguntas frequentes

Qual razão de contraste preciso para passar na WCAG AA?
Pelo menos 4,5:1 para texto normal e 3:1 para texto grande (24px, ou 18,66px em negrito). Componentes de interface e gráficos significativos, como ícones e bordas de campos, também precisam de 3:1 pelo critério 1.4.11 da WCAG 2.1/2.2.
A razão 4,49:1 arredonda para 4,5:1?
Não. Os limites da WCAG são mínimos exatos, então uma razão de 4,499:1 reprova no AA. Este verificador trunca a razão exibida para duas casas decimais, para não mostrar um "4,5:1" enganoso em um par que reprova.
Botões desativados, placeholders e logotipos precisam de contraste suficiente?
Logotipos e o texto de controles inativos (desativados) são isentos do critério 1.4.3. O texto de placeholder não é isento se transmitir informação, então deve atingir 4,5:1 — ou não use placeholders como rótulos.
O que é APCA e ele vai substituir a razão de contraste da WCAG 2?
APCA é o método de contraste perceptual proposto para a WCAG 3. Ele é mais preciso para modo escuro e fontes finas, mas a WCAG 3 ainda é um rascunho, então as razões da WCAG 2.x continuam sendo o requisito para auditorias e conformidade legal.
Como verifico o contraste de texto sobre um gradiente ou imagem?
Meça a área mais clara (para texto escuro) ou a mais escura (para texto claro) atrás do texto — esse é o pior caso. Se reprovar, adicione uma sobreposição sólida ou semitransparente atrás do texto e teste a cor resultante da mistura.
Posso instalar o Verificador de Contraste como um aplicativo da web e usá-lo offline?
Sim. O Verificador de Contraste é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

Ferramentas relacionadas

localConversor de CoresCole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros…localGerador de Gradiente CSSMonte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma…apiVerificador de Alt de ImagensAudite todas as imagens de uma página em uma tabela: status do texto alt, tamanho do arquivo, atributos de…localGerador de Box ShadowEmpilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao…localConversor HEX para RGBACole um código HEX, arraste o slider de opacidade e copie o CSS exato que você precisa: rgba()…localCSS Variables para TailwindTransforme suas variáveis de cor em :root em um tema do Tailwind com uma única colagem — Tailwind v3 com…