🧰 UtlKit

Verificador de Contraste de Cor WCAG

Verifique os ratios de contraste de cor contra os padrões WCAG 2.1 AA e AAA.

A rápida raposa marrom salta sobre o cão preguiçoso
Aa Bb Cc 123 — Texto de Amostra de Pré-visualização
Texto pequeno (14px / 11pt negrito)
Ratio de Contraste
21.00:1
✅ Aprovado
WCAG AA (Normal) (min 4.5:1)
✅ Aprovado
WCAG AA (Grande) (min 3:1)
✅ Aprovado
WCAG AAA (Normal) (min 7:1)
✅ Aprovado
WCAG AAA (Grande) (min 4.5:1)
🐛

Reportar um Problema

Encontrou um bug ou tem uma sugestão? Ajude-nos a melhorar esta ferramenta.

📊 Resumo de Dados (preenchido automaticamente)

Ferramenta: contrast-checker · /tools/contrast-checker/

foreground: #000000

background: #FFFFFF

O que é esta ferramenta?

O Verificador de Contraste de Cor WCAG avalia a razão de contraste entre as cores de primeiro plano e de fundo para a conformidade de acessibilidade. Verifica contra os padrões WCAG 2.1/2.2 (níveis AA e AAA) para garantir que o texto seja legível para todos os usuários, incluindo pessoas com deficiência visual.

Como usar

  1. 1

    Definir cor de primeiro plano

    Escolha ou insira a cor do texto.

  2. 2

    Definir cor de fundo

    Escolha ou insira a cor de fundo.

  3. 3

    Verificar resultados

    Veja a razão de contraste e o status de aprovação/reprovação da WCAG AA/AAA.

Perguntas frequentes

Que razão de contraste eu preciso?

O nível AA da WCAG 2.1 exige 4,5:1 para texto normal e 3:1 para texto grande (18px+ regular ou 14px+ em negrito). O nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande.

Por que o contraste de cor é importante?

Contraste insuficiente torna o texto difícil de ler para usuários com baixa visão, daltonismo ou em telas muito claras. Um bom contraste melhora a legibilidade para todos e garante o cumprimento legal de acessibilidade.

O que fazer se o resultado parecer errado?

Confira seus valores de entrada duas vezes. A ferramenta usa fórmulas padrão, mas casos extremos podem exigir verificação manual.