Verificador de Contraste de Cores
Teste suas combinações de cores contra os padrões de acessibilidade WCAG — com pré-visualização ao vivo e sugestões automáticas.
💡 Escolha uma cor de texto e uma de fundo. A taxa de contraste e os resultados WCAG AA/AAA são atualizados ao vivo. Se algum teste falhar, clique em uma cor sugerida para corrigir na hora.
Mesmo matiz e saturação, com a luminosidade ajustada até passar no teste. Clique para aplicar.
Este é um texto normal de 16px. Deve ser confortável de ler em parágrafos longos — a maior parte do conteúdo da web é assim.
Texto de título grande
O que é um verificador de contraste de cores?
Um verificador de contraste mede a diferença de luminância entre duas cores — normalmente o texto e seu fundo — e a expressa como uma taxa de 1:1 (cores idênticas) até 21:1 (preto sobre branco). Essa taxa determina se a combinação é legível para pessoas com baixa visão, daltonismo, ou qualquer pessoa olhando uma tela sob luz solar intensa. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem as taxas mínimas que um site deve cumprir para ser considerado acessível, e em muitos países esses requisitos fazem parte da legislação, como a ADA nos Estados Unidos, o Ato Europeu de Acessibilidade, ou a LBI (Lei Brasileira de Inclusão) no Brasil.
WCAG AA vs AAA: qual é a diferença?
A WCAG define dois níveis de conformidade para contraste. O nível AA — o padrão exigido pela maioria das leis e auditorias — requer uma taxa mínima de 4.5:1 para texto normal e 3:1 para texto grande (24px+, ou 18.5px+ em negrito) e componentes de interface. O nível AAA é mais rigoroso: 7:1 para texto normal e 4.5:1 para texto grande, recomendado para conteúdo voltado a usuários com deficiências visuais mais severas. A maioria dos projetos adota AA como base e aplica AAA a conteúdos críticos como textos legais ou informações de saúde.
Como a taxa de contraste é calculada?
A fórmula WCAG primeiro converte cada cor em sua luminância relativa — uma medida do brilho percebido que dá mais peso ao verde do que ao vermelho ou azul, porque o olho humano é mais sensível ao verde. Cada canal RGB passa por correção gamma e depois é combinado como 0.2126×R + 0.7152×G + 0.0722×B. A taxa é (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara. Esta ferramenta executa a fórmula exata no seu navegador — seus dados nunca saem do seu dispositivo.
Dicas para design de cores acessível
- Não dependa apenas da cor — combine com ícones, sublinhados ou rótulos para estados como erros
- Teste os temas claro e escuro: uma paleta que passa em um costuma falhar no outro
- Texto cinza sobre branco precisa ser #767676 ou mais escuro para passar no AA
- Verifique também os estados hover, focus e disabled — eles devem cumprir 3:1 como componentes de UI
- Use as correções sugeridas desta ferramenta para manter o matiz da sua marca ajustando apenas a luminosidade