Verificador de contraste
Verifique combinações de cores de texto e fundo quanto à conformidade com a acessibilidade WCAG.
Razão de contraste
12.63:1
Como funciona o Verificador de contraste
Verifique a conformidade com a acessibilidade WCAG para qualquer par de cores de texto e fundo. Confira os níveis AA e AAA com prévia ao vivo.
WCAG AA e AAA
Verifique os seus pares de cores nos dois níveis de conformidade do WCAG 2.1. O AA exige 4,5:1 para texto normal e 3:1 para texto grande. O AAA sobe a exigência para 7:1 e 4,5:1, respectivamente.
Texto normal e grande
A ferramenta avalia o contraste separadamente para texto normal (menos de 18px) e texto grande (18px em negrito ou 24px normal), já que texto grande continua legível com razões menores.
Prévia ao vivo
Veja exatamente como fica a combinação de texto e fundo em tempo real. A prévia é atualizada na hora, conforme você muda as cores, e mostra uma renderização realista.
Sugestões inteligentes
Quando uma combinação não passa, a ferramenta sugere a cor aprovada mais próxima. Faça o ajuste mínimo necessário para atender aos padrões de acessibilidade.
Perguntas frequentes
Para a conformidade com o WCAG AA (a exigência legal mais comum), o texto normal precisa de uma razão de contraste de pelo menos 4,5:1 em relação ao fundo. Texto grande (18px em negrito ou 24px normal) precisa de pelo menos 3:1. O WCAG AAA, nível avançado, exige 7:1 e 4,5:1, respectivamente.
Em muitos países, sim. A Diretiva de Acessibilidade da Web da UE, a ADA dos EUA e leis semelhantes no Canadá, na Austrália e no Reino Unido exigem que sites públicos e comerciais atendam ao WCAG 2.1 AA. Mesmo sem obrigação legal, a acessibilidade melhora a usabilidade para todos os usuários.
A razão se baseia na luminância relativa de duas cores, conforme definido na especificação WCAG 2.1. Ela vai de 1:1 (sem contraste, a mesma cor) a 21:1 (contraste máximo, preto sobre branco). A fórmula leva em conta que o olho humano percebe o brilho de forma diferente ao longo do espectro de cores.
Sim. O WCAG 2.1 exige uma razão de contraste mínima de 3:1 para componentes de interface e objetos gráficos — botões, bordas de formulários, ícones e elementos de gráficos. Isso garante que os elementos interativos fiquem visíveis para pessoas com baixa visão.