Color Contrast Checker

O que é um Verificador de Contraste de Cores?

Esta ferramenta calcula a Contrast Ratio (taxa de contraste) entre a cor de primeiro plano (texto) e a cor de fundo, e depois verifica se a combinação atende às diretrizes de acessibilidade WCAG 2.0 nos níveis AA e AAA. Também simula o daltonismo, sugere correções para pares reprovados e exporta o código em diversos formatos.

Como Verificar o Contraste de Cores

Escolhendo as Cores

• Color A (primeiro plano/texto) e Color B (fundo) possuem, cada um, uma entrada em hex e um seletor de cores.
• A Shade Scale abaixo de cada seletor permite fazer um ajuste fino da luminosidade. Clique em qualquer tom para aplicá-lo instantaneamente.
• O Color Wheel ajusta o matiz da Color A visualmente. A cor complementar é exibida logo abaixo – clique para aplicá-la como Color B.
• Swap inverte a Color A e a Color B.

O que os Resultados Significam

Resultado	O que indica
Contrast Ratio	A proporção calculada (1:1 – 21:1). Quanto maior, melhor.
A11y Score	Uma pontuação de acessibilidade de até 100 com base na taxa de contraste.
WCAG AA / AAA	Aprovado ou reprovado para Normal Text e Large Text em cada nível.
Preview	Uma pré-visualização ao vivo mostrando título, corpo do texto, botão, selo, entrada e cartão com suas cores.
Fix Suggestion	Quando o contraste reprova no nível AA, um cartão clicável sugere o tom aprovado mais próximo com sua taxa. Clique para aplicar.

Limites do WCAG

Nível	Normal Text	Large Text
AA	Mínimo 4.5:1	Mínimo 3:1
AAA	Mínimo 7:1	Mínimo 4.5:1

• Normal text: abaixo de 18pt (ou abaixo de 14pt em negrito)
• Large text: 18pt e acima (ou 14pt em negrito e acima)

Recursos Adicionais

• Undo / Redo – avance ou retroceda nas suas alterações de cor.
• Share Result – copia uma URL com as cores atuais incorporadas. Qualquer pessoa que a abrir verá a mesma dupla de cores.
• Pin – salve até 8 pares de cores para comparação lado a lado. Clique em um par fixado para recarregá-lo.
• Brand Colors – 8 paletas de marcas do mundo real (Spotify, Slack, GitHub, etc.) com as suas taxas de contraste. Clique em qualquer uma para carregar.
• A11y Check – simula 4 tipos de daltonismo (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) com a taxa de contraste efetiva para cada um.
• Code Output – gera código pronto para copiar em CSS, Tailwind 4, Tailwind 3, Flutter e React. Seção recolhível, aberta por padrão.
• Randomize / Clear All – gere um par de cores acessível de forma aleatória ou redefina para os padrões.

Bons Exemplos

Exemplo 1: Texto Cinza no Branco – um Erro Comum

Texto em cinza claro com um fundo branco parece sutil, mas falha em acessibilidade.

• Color A: #999999, Color B: #ffffff
• Contrast Ratio: 2.85:1 – Reprovado em AA
• A Fix Suggestion recomenda o tom 600 (#595959) para um 4.9:1 – Aprovado em AA. Clique para aplicar.

Exemplo 2: Verificando a Paleta de uma Marca

Clique em Spotify na seção Brand Colors.

• Color A: #191414 (preto), Color B: #1DB954 (verde)
• Contrast Ratio: 4.9:1 – Aprovado em AA, Reprovado em AAA
• Fixe (Pin) este par, depois experimente o LinkedIn (#ffffff no #0A66C2, 4.7:1) e compare.

Exemplo 3: Criando um Modo Escuro (Dark Mode)

Encontrar uma cor de texto legível para um fundo azul-marinho escuro.

• Color A: #e0e0e0, Color B: #1a1a2e
• Contrast Ratio: 12.4:1 – Aprovado em AA e AAA
• Abra o A11y Check para confirmar que os 4 tipos de daltonismo também são aprovados.

Exemplo 4: Fluxo do Desenvolvedor – Exportação de Código

Após encontrar um bom par de cores, expanda Code Output e selecione o seu framework:

• CSS: propriedades personalizadas --fg e --bg
• Tailwind 4: valores de cor arbitrários
• React: objeto de estilo inline

Copie o trecho de código diretamente para o seu projeto.

Dicas Essenciais

• Comece com Brand Colors. Se estiver verificando uma marca existente, clique nela na lista predefinida em vez de digitar os valores hex manualmente.
• Use a Fix Suggestion. Quando o contraste não for aprovado, não tente adivinhar: clique no cartão de sugestão para saltar automaticamente para o tom mais próximo que passa.
• Fixe pares para comparação (Pin). Ao escolher entre várias opções de cor, fixe cada uma. Você pode recarregá-las e compará-las lado a lado.
• Verifique também para daltônicos. Um par que é aprovado no WCAG ainda pode ser difícil de distinguir para usuários daltônicos. Abra a seção A11y Check para confirmar.
• Compartilhe sua decisão. Use o Share Result para enviar a URL com o par exato de cores para um designer ou revisor.

Fórmula

O WCAG 2.0 define a Contrast Ratio usando a luminância relativa:

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

Variável	Significado
$CR$	Contrast Ratio
$L_1$	Luminância relativa da cor mais clara
$L_2$	Luminância relativa da cor mais escura

A luminância relativa é calculada a partir de valores sRGB após linearização: $L = 0.2126R + 0.7152G + 0.0722B$

Perguntas Frequentes

Devo focar em AA ou AAA?

AA é o padrão legal mínimo na maioria dos países. AAA fornece melhor legibilidade, mas é mais difícil de atingir em todos os elementos de design. Uma abordagem prática: AA para corpo de texto, AAA para informações críticas como avisos ou erros.

Ser aprovado no WCAG garante a acessibilidade para usuários daltônicos?

A taxa de contraste do WCAG verifica a luminância, não a distinção de matizes. Um par de cores pode passar no WCAG, mas parecer idêntico para quem tem daltonismo. Use a seção A11y Check para confirmar e sempre complemente as cores com ícones ou rótulos de texto.

Quais formatos de código esta ferramenta suporta?

Propriedades personalizadas de CSS, Tailwind CSS v3 e v4 (valores arbitrários), objetos Color() do Flutter e estilos em linha do React. Selecione o formato pela opção na seção Code Output.

Posso salvar e compartilhar meus pares de cores?

Sim. O Pin salva localmente até 8 pares para comparação. O Share Result copia uma URL com as cores incorporadas – qualquer pessoa que abrir verá exatamente o mesmo par de cores.