Como verifico se minhas cores de texto e fundo passam na WCAG?

Digite códigos hex em Cor do texto e Cor do fundo, ou use os seletores. A Taxa de contraste aparece com Aprovado ou Reprovado para AA e AAA em texto normal e grande, além de componentes de interface.

Qual proporção de contraste a WCAG AA exige?

AA exige 4,5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 para texto normal e 4,5:1 para texto grande. Componentes de interface e objetos gráficos exigem 3:1.

O que conta como texto grande?

A ferramenta trata texto regular de 18pt (24px) ou texto em negrito de 14pt (18,66px) como grande. Textos menores devem atender aos limites mais altos para texto normal.

Minhas cores falham no AA. Como faço para corrigi-las?

Use as sugestões de um clique Corrigir cor do texto ou Corrigir fundo. Elas ajustam a luminosidade mantendo o mesmo matiz até que o par atinja 4,5:1.

Quais formatos de cor ele aceita e posso capturar da tela?

Ele aceita valores hex de 3 e 6 dígitos, como #abc ou #1e293b. Um botão Escolher cor da tela aparece em navegadores que suportam a API EyeDropper, como o Chromium.

Sim. Todas as ferramentas são gratuitas, sem conta e sem cartão de crédito. O processamento acontece no seu dispositivo, e não nos nossos servidores, e é isso que permite manter tudo gratuito.

Sim. Funciona nos navegadores móveis atuais em iOS e Android, sem instalar nada.

🌓

Verificador de Contraste de Cores WCAG grátis

Verifique se duas cores atendem aos padrões de contraste WCAG AA e AAA para acessibilidade. Pré-visualização ao vivo em vários tamanhos de texto com sugestões automáticas quando o contraste é insuficiente.

Executa no seu navegadorSem inscrição, sem pop-upsSem login necessárioGratuito para sempre

Funciona offline depois de carregado

Cor do texto

Cor de fundo

Texto de título grande

Texto de corpo médio (18px) para leitura e conteúdo.

Texto de corpo normal (16px) para parágrafos.

Texto de corpo pequeno (14px) para legendas e metadados.

14,63:1

Proporção de contraste

✓WCAG AA — Texto normal

Requer 4.5:1 · Você tem 14,63:1

✓WCAG AA — Texto grande

Requer 3.0:1 · Você tem 14,63:1

✓WCAG AAA — Texto normal

Requer 7.0:1 · Você tem 14,63:1

✓WCAG AAA — Texto grande

Requer 4.5:1 · Você tem 14,63:1

✓Componentes UI / objetos gráficos

Requer 3.0:1 · Você tem 14,63:1

Predefinições rápidas

Baseado nas diretrizes de contraste WCAG 2.1. Texto grande = 18pt (24px) normal ou 14pt (18,66px) negrito. Códigos HEX atualizam em ambas as direções: digite um hex ou escolha uma cor, ambas as entradas ficam sincronizadas.

Usos comuns

Auditar Páginas da Web para Conformidade WCAGVerifique se as cores de texto do seu site atendem aos padrões de contraste WCAG AA ou AAA para acessibilidade.
Verificar Combinações de Cores da MarcaTeste os emparelhamentos de paletas de cores da marca para garantir que funcionem para design de UI acessível.
Testar Paletas de Cores em Modo EscuroTexto claro em fundos escuros ainda pode falhar em contraste — verifique seus emparelhamentos de paleta de modo escuro aqui.
Emparelhamentos de Cores para Materiais ImpressosCartazes, placas e materiais impressos também precisam de contraste legível — especialmente para espectadores mais velhos.
Projete Cores de Botão AcessíveisCertifique-se de que seus CTAs, botões de ação e links passam WCAG contra seus fundos.

Como funciona

A verificação de contraste funciona inteiramente no seu navegador usando o algoritmo de luminância relativa WCAG 2.1 — sem biblioteca, sem servidor, apenas matemática escrita à mão que segue a especificação exatamente. Cada resultado atualiza em tempo real enquanto escreve ou escolhe uma cor.

1
Entrada hexadecimal e normalização
Tanto valores hexadecimais de 3 dígitos (#abc) como de 6 dígitos (#aabbcc) são aceites e normalizados para triplos RGB completos. A entrada inválida é rejeitada imediatamente em vez de assumir silenciosamente preto, por isso aparece uma borda vermelha em vez de um resultado de aprovação enganador.
2
Cálculo de luminância WCAG
Cada cor é convertida em luminância relativa usando a fórmula WCAG 2.1: os valores de canal sRGB são linearizados com uma correção gama por partes (dividindo por 12,92 abaixo de 0,03928, elevando à potência de 2,4 acima disso), depois ponderados como 0,2126R + 0,7152G + 0,0722B.
3
Rácio de contraste e verificações de conformidade
O rácio de contraste é calculado como (mais claro + 0,05) / (mais escuro + 0,05) e verificado contra todos os cinco limiares WCAG: AA texto normal (4,5:1), AA texto grande (3:1), AAA texto normal (7:1), AAA texto grande (4,5:1), e componentes de UI (3:1). Os resultados atualizam a cada tecla.
4
Sugestões de correção que preservam a matiz
Quando o par falha o WCAG AA, a ferramenta pesquisa o espaço de luminosidade HSL — avançando para fora da luminosidade original em ambas as direções — para encontrar a variante mais próxima de cada cor que passa 4,5:1 mantendo a mesma matiz e saturação. A EyeDropper API (Chromium) também está disponível para amostrar qualquer cor diretamente da sua tela.

Ferramentas relacionadas

👁️

Simulador de Daltonismo

Veja como seu design aparece para pessoas com deficiências na visão de cores. Simula protanopia, deuteranopia, tritanopia, acromatopsia e anomalias mais leves.

ExperimentarArquivos ficam no dispositivo

📐

Qual é a Resolução da Minha Tela

Veja a resolução da sua tela em pixels CSS e reais, o tamanho da janela, a proporção de pixels, a profundidade de cor, HDR, suporte ao toque e taxa de atualização, e copie tudo.

Experimentar

🖥️

Teste de Pixels Mortos

Verifique se a sua tela tem pixels mortos ou presos com tela cheia em preto, branco, vermelho, verde, azul e cinza, além de um reparador opcional de pixels presos.